Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Developing a new NFT utiltity lib #18

Merged
merged 22 commits into from
Apr 7, 2020
Merged

Developing a new NFT utiltity lib #18

merged 22 commits into from
Apr 7, 2020

Conversation

kalwalt
Copy link
Owner

@kalwalt kalwalt commented Apr 5, 2020 •
edited
Loading

Proposal

With this PR i want to develop a little lib that help to make a nft Webapp with jsartoolkit5.
It provide a set of functions that can be reused and simplify the development process.
Features to add:

Example

add the styling inside the <head>:

<link rel="stylesheet" type="text/css" href="../resources/css/video-style.css">

in your html inside <body> import the libs:

<script src="../resources/three.min.js"></script>
<script src="../resources/js/libs/stats.min.js"></script>
<script src="../resources/build/nftLoader/nftLoader.min.js"></script>

then create a script like this:

<script>

	var nftLoader = new NFTLoader(640, 480, 'config.json');

	nftLoader.init("../../dataNFT/pinball", true);

	var texture = new THREE.TextureLoader().load( '../../../resources/data/textures/aframe-k.png' );

	var mat = new THREE.MeshLambertMaterial({color: 0xbbbbff, map: texture});
	var planeGeom = new THREE.PlaneGeometry(1,1,1,1);
	var plane = new THREE.Mesh(planeGeom, mat);
	plane.position.z = 0;
	plane.position.x = 90;
	plane.position.y = 90;
	plane.scale.set(180,180,180);

	nftLoader.add(plane);

</script>

To do list

  • base class where you can define video width, height and camera param url.
  • init() function where define marker url, canvas, video...
  • add() function where you can attach a Three.js Object3D.
  • nft marker url setting
  • loadModel() to load a gltf model.
  • a config file where store artoolkit.worker.js path and other settings.
  • create container, canvas and video html elements ( without to be explictly written inside the html by the user)
  • create optionally stats html elements
  • minified version
  • fullscreen mode

@kalwalt kalwalt added enhancement New feature or request NFT labels Apr 5, 2020
@kalwalt kalwalt self-assigned this Apr 5, 2020
@kalwalt kalwalt changed the title developing a new nft uiltity lib developing a new NFT utiltity lib Apr 5, 2020
@kalwalt kalwalt changed the title developing a new NFT utiltity lib Developing a new NFT utiltity lib Apr 5, 2020
@ThorstenBux
Copy link

You want to run NFT on server side?

@kalwalt
Copy link
Owner Author

kalwalt commented Apr 5, 2020 •
edited
Loading

You want to run NFT on server side?

No only to add some functions to simplify things, to avoid rewriting the same code overe and over again. I will let you know of my results 🙂

@ThorstenBux
Copy link

got it,
fullscreen you should be able to get from here: https://github.com/ThorstenBux/ar-magazine

@kalwalt
Copy link
Owner Author

kalwalt commented Apr 5, 2020

Thank you @ThorstenBux !

@kalwalt
Copy link
Owner Author

kalwalt commented Apr 6, 2020

I think i can put in config.json also the camera_para.dat file configuration path, i need also to solve how to inject the artoolkit url inside the worker

kalwalt-interactivity-AR/resources/jsartoolkit5/artoolkit/artoolkit.worker.js

Line 1 in 0847a3a

importScripts('../standard/artoolkit.min.js');

@kalwalt
Copy link
Owner Author

kalwalt commented Apr 6, 2020 •
edited
Loading

Although the grunt-contrib-uglify-es solved the issue, is deprecated. So better to use this package instead grunt-terser. See this article: https://stackoverflow.com/questions/38429567/some-es6-features-are-not-understood-by-grunt-uglify-js
Travis is failing because is configured for Ruby (Gemfile).

@kalwalt
Copy link
Owner Author

kalwalt commented Apr 7, 2020

Travis issue because i changed the files structures and names, was easy to solve see: 64284da

@kalwalt
Copy link
Owner Author

kalwalt commented Apr 7, 2020

I will merge this. Other features will be added in a next PR / release.

@kalwalt kalwalt merged commit 1a80a28 into master Apr 7, 2020
@kalwalt kalwalt deleted the nft-update branch May 5, 2021 16:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees

@kalwalt kalwalt

Labels
enhancement New feature or request NFT
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@kalwalt @ThorstenBux