JTI AR Research tests

Tests and examples used to reserach Web AR capabilities of different frameworks, devices and environments

This example uses Mind-AR-js. It shows the click funtionality (click on JTI logo) and animation of a flying stork. To run the test open the link in a differrent window and point your camera (desktop webcam or mobile camera) to the LD bold Image on the right side of this page. Once the image is detected it will load the JTI scene/object Image tracking MIND-AR
This example uses AR.js abd NFT (Natural Feature Tracking)for image tracking. To run the test open the link in a differrent window and point your camera (desktop webcam or mobile camera) to the LD bold Image on the right side of this page. Once the image is detected it will load the JTI scene/object Image tracking with JTI object
This example uses AR.js abd NFT (Natural Feature Tracking)for image tracking. To run the test open the link in a differrent window and point your camera (desktop webcam or mobile camera) to the LD bold Image on the right side of this page. Once the image is detected it will load a simple cube. this test is to debug the problem on iPad Image tracking simple cube

This example use three.js to animate the cigarrete cover by bending it. Bending animation are not easy to bake from the 3D editors such Blender. It can be done by exporting then as Alembic (abc) binary animations but so far I did not find any framework supporting this so I converted a typescript bender function for three.js into javascript in order to use it for the project. Here is the source https://sbcode.net/threejs/bender/

Cigarrete bender animation

This example use three.js to animate the cigarrete cover by bending it enable XR by adding a ARButton. Needs rework to actually use the AR implementation.

Cigarrete bender animation with AR button

This example use three.js and the ARButton to detect a plane and place a simepl 3D cube on place. This can be modified to actually load the cigarrete scene and activate when the NFT is detected

Basic AR button

This example use three.js to load a comples 3D object on glb format

Complex scene
...