Assets/WebGLTemplates/WebXR/index.html

<!DOCTYPE html>
<html lang="en-us">

<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Test WebXR</title>
    <link rel="stylesheet" href="common.css" />
    <script src="%UNITY_WEBGL_LOADER_URL%"></script>
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <script src="js/libs/three/three.min.js"></script>
    <script module src="js/webxr.js"></script>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-163892314-1"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag() { dataLayer.push(arguments); }
        gtag('js', new Date());

        gtag('config', 'UA-163892314-1');

        if (navigator.userAgent.indexOf("WebXRViewer") == -1) alert("Your browser is not compatible with augmented reality. Please use WebXR Viewer browser on iOS.");
    </script>

</head>

<body>
    <div id="unityContainer" style="position:absolute;top:0;left:0;right:0;bottom:0;"></div>

    <div id="description">Chargement...</div>

    <div style="position:absolute;bottom:5px;right:5px;font-size:4em;background-color:rgba(255, 255, 255, 0.5);"><a href="https://github.com/Rufus31415/MixedRealityToolkit-Unity-WebXR" target="_blank">?</a></div>

    <script type=module>
		function MyUnityProgress(gameInstance, progress){
			if(progress==1){
				setTimeout(debugInfo, 100);
				document.getElementById('description').style.display = "none";
				handleStartSessionRequest(null);
			}
			if(progress > 0.89){
				document.getElementById('description').innerText = "Loading WebGL components, WebXR session and WebASM program...";
			}

			else{
				document.getElementById('description').innerText = "Download " + Math.floor(100 * progress) + "% ...";
			}
		}
		
		var unityInstance = UnityLoader.instantiate("unityContainer", "%UNITY_WEBGL_BUILD_URL%", {onProgress: MyUnityProgress});
		
		function debugInfo(){
			try{
				   var pose = new THREE.Vector3();
				   var quaternion = new THREE.Quaternion();
				   var scale = new THREE.Vector3();
				   engine.camera.matrix.decompose(pose, quaternion, scale);
	   
				//document.getElementById('description').innerText = JSON.stringify(pose, null, 1) + "\r\n" + JSON.stringify(quaternion, null, 1) + "\r\n" + JSON.stringify(scale, null, 1);
				
				var coef = 1/0.4;
	   
				var msg = {x: pose.x * coef, y: pose.y * coef, z: -pose.z * coef, _x: quaternion._x, _y: quaternion._y, _z: quaternion._z, _w: quaternion._w, crx: -1, cry: -1, crz: 1, fov:40};
				var msgStr = JSON.stringify(msg);
				document.getElementById('description').innerText = JSON.stringify(engine.camera, null, 1);
				
				unityInstance.SendMessage("JSConnector", "setCameraTransform", msgStr);
			}
			catch(e){
				document.getElementById('description').innerText = e.message;
			}
			
				setTimeout(debugInfo, 10);
		}
	

            // some dependencies and utilities
            import * as mat4 from './js/libs/gl-matrix/mat4.js'
            import * as vec3 from './js/libs/gl-matrix/vec3.js'


            import XREngine from "./js/XREngine.js"
            import XRInputManager from "./js/XRInputManager.js"

            let device = null
            let session = null
            let eyeLevelFrameOfReference = null
            let engine = null
            
            // worldMap:  uid => { 
            //    seen: bool, 
            //    threeMesh: threejs mesh, 
            //    node: node for mesh 
            //    worldMesh: the XRMesh node
            // }
            // need to add timestamp, and use it to get rid of some updates!
            var meshMap = new Map()
            
            // temporary working variables
            const workingMatrix = mat4.create()
            const workingVec3 = vec3.create()

            var savedOrigin = [0,0,0]
            var savedDirection = [0,0,-1]
            var reticleParent = new THREE.Object3D()
            var reticle = null
            
            var reticleTrackedColor = new THREE.Color( 0xDDFFDD );
            var reticleNotTrackedColor = new THREE.Color( 0xFF6666 );
            var reticleMaterial = new THREE.MeshStandardMaterial({ color: reticleTrackedColor })
            var requestNextHit = true

            var ambientLight = null
            var directionalLight = null

            function initializeScene(){
                ambientLight = engine.addAmbientLight()
                directionalLight = engine.addDirectionalLight()
                // Add a box and axis at the origin of the eye-level coordinate system
                // for debugging by uncommenting these lines
                // engine.addBox([0, 0, 0], [0.025, 0.025, 0.025], 0x44ff44)
                // engine.addAxesHelper([0,0,0], [0.2,0.2,0.2])				
                
                reticle = new THREE.Mesh(
                    new THREE.RingGeometry(0.04, 0.05, 36, 64),
                    reticleMaterial
                )

                reticle.geometry.applyMatrix(new THREE.Matrix4().makeRotationX(THREE.Math.degToRad(-90)))
                reticleParent.add(reticle)

                reticleParent.matrixAutoUpdate = false
                reticleParent.visible = false
                engine.scene.add(reticleParent)
            }
            
            function updateScene(frame){
                let worldInfo = frame.worldInformation
                if(worldInfo.estimatedLight){
                    let ambientIntensity = worldInfo.estimatedLight.ambientIntensity
                    ambientLight.intensity = ambientIntensity;
                    directionalLight.intensity = ambientIntensity * 0.5;
                }
                if(worldInfo.meshes){
                    meshMap.forEach(object => { object.seen = false })

                    worldInfo.meshes.forEach(worldMesh => {
                        var object = meshMap.get(worldMesh.uid);
                        if (object) {
                            handleUpdateNode(worldMesh, object)
                        } else {
                            handleNewNode(worldMesh)
                        }
                    })

                    meshMap.forEach(object => { 
                        if (!object.seen) {
                            handleRemoveNode(object)
                        } 
                    })
                }
            }

            function handleUpdateNode(worldMesh, object) {
                object.seen = true

                // we don't need to do anything if the timestamp isn't updated
                if (worldMesh.timeStamp <= object.ts) {
                    return;
                }

                if (worldMesh.vertexCountChanged) {
                    let newMesh = newMeshNode(worldMesh)
                    object.threeMesh.geometry.dispose()
                    object.node.remove(object.threeMesh)
                    object.node.add(newMesh)
                    object.threeMesh = newMesh
                } else {
                    if (worldMesh.vertexPositionsChanged) {
                        let position = object.threeMesh.geometry.attributes.position
                        if (position.array.length != worldMesh.vertexPositions.length) {
                            console.error("position and vertex arrays are different sizes", position, worldMesh)
                        }
                        position.setArray(worldMesh.vertexPositions);
                        position.needsUpdate = true;
                    }
                    if (worldMesh.textureCoordinatesChanged) {
                        let uv = object.threeMesh.geometry.attributes.uv
                        if (uv.array.length != worldMesh.textureCoordinates.length) {
                            console.error("uv and vertex arrays are different sizes", uv, worldMesh)
                        }
                        uv.setArray(worldMesh.textureCoordinates);
                        uv.needsUpdate = true;
                    }
                    if (worldMesh.triangleIndicesChanged) {
                        let index = object.threeMesh.geometry.index
                        if (index.array.length != worldMesh.triangleIndices) {
                            console.error("uv and vertex arrays are different sizes", index, worldMesh)
                        }
                        index.setArray(worldMesh.triangleIndices);
                        index.needsUpdate = true;
                    }
                    if (worldMesh.vertexNormalsChanged && worldMesh.vertexNormals.length > 0) {
                        // normals are optional
                        let normals = object.threeMesh.geometry.attributes.normals
                        if (normals.array.length != worldMesh.vertexNormals) {
                            console.error("uv and vertex arrays are different sizes", normals, worldMesh)
                        }
                        normals.setArray(worldMesh.vertexNormals);
                        normals.needsUpdate = true;
                    }
                }
            }

            function handleRemoveNode(object) {
                object.threeMesh.geometry.dispose()
                engine.removeAnchoredNode(object.node);
                meshMap.delete(object.worldMesh.uid)
            }

            function handleNewNode(worldMesh) {
                let worldMeshGroup = new THREE.Group();
                var mesh = null;

                mesh = newMeshNode(worldMesh)

                worldMeshGroup.add(mesh)

                var axesHelper = engine.createAxesHelper([0.1,0.1,0.1])
                worldMeshGroup.add( axesHelper );
                
                //worldMesh.node = worldMeshGroup;
                engine.addAnchoredNode(worldMesh, worldMeshGroup)

                meshMap.set(worldMesh.uid, {
                    ts: worldMesh.timeStamp, 
                    worldMesh: worldMesh, 
                    node: worldMeshGroup, 
                    seen: true, 
                    threeMesh: mesh
                })
            }

            function newMeshNode(worldMesh) {
                let edgeColor, polyColor
                if (worldMesh instanceof XRFaceMesh) {
                    edgeColor = '#999999'
                    polyColor = '#999900'
                } else {
                    edgeColor = '#11FF11'
                    polyColor = '#009900'
                }

                let mesh = new THREE.Group();
                let geometry = new THREE.BufferGeometry()

                let indices = new THREE.BufferAttribute(worldMesh.triangleIndices, 1)
                indices.dynamic = true
                geometry.setIndex(indices)
                
                let verticesBufferAttribute = new THREE.BufferAttribute( worldMesh.vertexPositions, 3 )
                verticesBufferAttribute.dynamic = true
                geometry.addAttribute( 'position', verticesBufferAttribute );

                let uvBufferAttribute = new THREE.BufferAttribute( worldMesh.textureCoordinates, 2 )
                uvBufferAttribute.dynamic = true
                geometry.addAttribute( 'uv', uvBufferAttribute );

                if (worldMesh.vertexNormals.length > 0) {
                    let normalsBufferAttribute = new THREE.BufferAttribute( worldMesh.vertexNormals, 3 )
                    normalsBufferAttribute.dynamic = true
                    geometry.addAttribute( 'normal', normalsBufferAttribute );
                } else {
                    geometry.computeVertexNormals()
                }

                // transparent mesh
                var wireMaterial = new THREE.MeshPhongMaterial({color: edgeColor, wireframe: true})
                var material = new THREE.MeshPhongMaterial({color: polyColor, transparent: true, opacity: 0.25})

                mesh.add(new THREE.Mesh(geometry, material))
                mesh.add(new THREE.Mesh(geometry, wireMaterial))

                mesh.geometry = geometry;  // for later use

                //worldMesh.mesh = mesh;
                return mesh
            }

            // handle hit testing slightly differently than other samples, since we're doing
            // it per frame.  The "boiler plate" code below is slightly different, setting 
            // requestNextHit on tap instead of executing the hit test.  The custom XREngineHits
            // does a hit test each frame if the previous one has resolved
            function handleHitResults(hits) {
                let size = 0.05;
                if (hits.length > 0) {
                    let hit = hits[0]

					session.requestFrameOfReference('head-model').then(headFrameOfReference => {
                        // convert hit matrices from head to eye level coordinate systems
                        headFrameOfReference.getTransformTo(eyeLevelFrameOfReference, workingMatrix)
                        mat4.multiply(workingMatrix, workingMatrix, hit.hitMatrix)

                        const node = reticleParent
                        node.matrix.fromArray(workingMatrix)
                        reticleParent.visible = true   // it starts invisible
                        reticle.material.color = reticleTrackedColor

                        node.updateMatrixWorld(true)
                    })
                } else {
                    reticle.material.color = reticleNotTrackedColor
                }
                requestNextHit = true
            }

            class XREngineHits extends XREngine {
                endFrame(){
                    if (requestNextHit) {
                        requestNextHit = false

						session.requestFrameOfReference('head-model').then(headFrameOfReference => {
                            session.requestHitTest(savedOrigin, savedDirection, headFrameOfReference)
                                .then(handleHitResults)
                                .catch(err => {
                                    console.error('Error testing hits', err)
                                })
                        })
                    }
                }
            }


            ////////////////////////////////////////////////////
            ////////////////////////////////////////////////////
            // BOILER PLATE.  Can you feel the plates boiling?
            //
            // There are slight differences between examples but largely this code is similar
            //
            // Create the output context where the XRSession will place composited renders
            const xrCanvas = document.createElement('canvas')
            xrCanvas.setAttribute('class', 'xr-canvas')
            const xrContext = xrCanvas.getContext('xrpresent')
            if(!xrContext){
                console.error('No XR context', xrCanvas)
            }

            // get the XR Device
            navigator.xr.requestDevice().then(xrDevice => {
                device = xrDevice
            }).catch(err => {
            })

/*
            document.getElementById('description').addEventListener('touchstart', hideMe, {capture: true})
            function hideMe(event) { 
                event.target.style.display = 'none' 
                event.stopPropagation()
            }
*/
		
           // document.getElementById('go-button').addEventListener('click', handleStartSessionRequest, true)

			
			/*
            document.getElementById('go-button').addEventListener('touchstart', handleGoButtonTouch, true)
            function handleGoButtonTouch(event) { 
                event.stopPropagation()
            }*/

            // handle input events from the XRInputManager
            const inputManager = new XRInputManager(handleXRInput)
            function handleXRInput(eventName, details){
                switch(eventName){
                    case 'normalized-touch':
                        hitTestWithScreenCoordinates(...details.normalizedCoordinates)
                        break
                    default:
                        console.error('unknown xr input event', eventName, details)
                        break
                }
            }

            function hitTestWithScreenCoordinates(normalizedX, normalizedY){
                if(session === null){
                    console.log('No session for hit testing')
                    return
                }

                // Convert the screen coordinates into head-model origin/direction for hit testing
                const [origin, direction] = 
                XRInputManager.convertScreenCoordinatesToRay(normalizedX, normalizedY, 
                                                            engine.camera.projectionMatrix)
                savedOrigin = origin
                savedDirection = direction

                requestNextHit = true
            }

            /////////////////////
            // Session startup / shutdown
            function handleStartSessionRequest(ev){
                if(device === null){
                    console.error('No xr device')
                    return
                }

                if (!session) {
                    device.requestSession({ 
                        outputContext: xrContext,
                        worldSensing: true  
                    }).then(handleSessionStarted)
                        .catch(err => {
                            console.error('Session setup error', err)
                        })
                    document.getElementById('go-button').innerText = "End"
                    document.getElementById('go-button').style.display = 'none' 
                } else {
                    session.end()
                    handleSessionEnded();
                    reticleParent.visible = false   // it starts invisible
                    document.getElementById('description').style.display = 'block' 
					document.getElementById('go-button').style.display = "block"
                    document.getElementById('go-button').innerText = "Go"
                }
            }

            function handleSessionEnded() {	
                session = null
            }

            function handleSessionStarted(xrSession){
                session = xrSession
                document.body.insertBefore(xrCanvas, document.body.firstChild)

                let sensingState = xrSession.updateWorldSensingState({
                    illuminationDetectionState : {
                        enabled : true
                    },
                    meshDetectionState : {
                        enabled : true,
                        normals: true
                    }
                })

                // Create the context where we will render our 3D scene
                const canvas = document.createElement('canvas')
                var glContext = canvas.getContext('webgl', {
                    compatibleXRDevice: device
                })
                if(!glContext) throw new Error('Could not create a webgl context')

                // Set up the base layer
                session.baseLayer = new XRWebGLLayer(session, glContext)

                // Create a simple test scene and renderer
                // The engine's scene is in the eye-level coordinate system 
                // Our custom engine class does hit testing at the end of each rAF 
                engine = new XREngineHits(canvas, glContext)

				createRootNode().then(() => {
					// Kick off rendering
					session.requestAnimationFrame(handleAnimationFrame)
				})

				initializeScene()
			}

			async function createRootNode() {
				let headFrameOfReference = await session.requestFrameOfReference('head-model')
				eyeLevelFrameOfReference = await session.requestFrameOfReference('eye-level')

				// get the location of the device, and use it to create an 
				// anchor with the identity orientation
				headFrameOfReference.getTransformTo(eyeLevelFrameOfReference, workingMatrix)
				mat4.getTranslation(workingVec3, workingMatrix)
				mat4.fromTranslation(workingMatrix, workingVec3)

				let anchor = await session.addAnchor(workingMatrix, eyeLevelFrameOfReference)
				engine.addAnchoredNode(anchor, engine.root)
				
				return true
			}

            ////////////////
            // render loop			
            function handleAnimationFrame(t, frame){
                updateScene(frame)
                if(!session || session.ended) return
                session.requestAnimationFrame(handleAnimationFrame)

                let pose = frame.getDevicePose(eyeLevelFrameOfReference)
                if(!pose){
                    console.log('No pose')
                    return
                }

                engine.startFrame()
                for (let view of frame.views) {
					engine.preRender(
						session.baseLayer.getViewport(view),
						view.projectionMatrix,
						pose.getViewMatrix(view)
					)
					engine.render()
                }
                engine.endFrame()
            }

        </script>
</body>

</html>