Switched around how the pose uses tracking info, so now the stage is …

…at 0,0,0 the head pose is shifted up to about eye level.
mozilla · Sep 8, 2017 · 2a6b4e0 · 2a6b4e0
1 parent bddaef9
commit 2a6b4e0
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 20 deletions.
diff --git a/ar_examples.js b/ar_examples.js
@@ -10,6 +10,7 @@ class ARSimplestExample extends XRExampleBase {
 
 	// Called during construction to allow the app to populate this.stageGroup (a THREE.Group)
 	initializeStageGroup(){
+		// Add a teapot at about eye level
 		var geometry = new THREE.TeapotBufferGeometry(0.1)
 		let materialColor = new THREE.Color()
 		materialColor.setRGB(1.0, 1.0, 1.0)
@@ -18,9 +19,17 @@ class ARSimplestExample extends XRExampleBase {
 			side: THREE.DoubleSide
 		})
 		let mesh = new THREE.Mesh(geometry, material)
-		mesh.position.set(0, 1.6, -1)
+		mesh.position.set(0, 1.4, -1)
 		this.stageGroup.add(mesh)
 
+		// Add a box at the stage origin
+		let box = new THREE.Mesh(
+			new THREE.BoxBufferGeometry(0.1, 0.1, 0.1),
+			new THREE.MeshPhongMaterial({ color: '#DDFFDD' })
+		)
+		box.position.set(0, 0, 0)
+		this.stageGroup.add(box)
+
 		this.stageGroup.add(new THREE.AmbientLight('#FFF', 0.2))
 		let directionalLight = new THREE.DirectionalLight('#FFF', 0.6)
 		directionalLight.position.set(0, 10, 0)
@@ -30,7 +39,7 @@ class ARSimplestExample extends XRExampleBase {
 	// Called once per frame, before render to give the app a chance to update this.stageGroup (a THREE.Group)
 	updateStageGroup(frame, stageCoordinateSystem, stagePose){
 		// Uncomment the next line to spin the teapot
-		this.stageGroup.children[0].rotation.y += 0.01
+		//this.stageGroup.children[0].rotation.y += 0.01
 	}
 }
 

diff --git a/common_examples.js b/common_examples.js
@@ -153,7 +153,7 @@ class XRExampleBase {
 
 	handleFrame(frame){
 		const nextFrameRequest = this.session.requestFrame(frame => { this.handleFrame(frame) })
-		let stageCoordinateSystem = frame.getCoordinateSystem('stage')
+		let stageCoordinateSystem = frame.getCoordinateSystem(XRCoordinateSystem.STAGE)
 		if(stageCoordinateSystem === null){
 			this.showMessage('Could not get a usable stage coordinate system')
 			this.session.cancelFrame(nextFrameRequest)
@@ -179,7 +179,7 @@ class XRExampleBase {
 		this.scene.matrixAutoUpdate = false
 		this.renderer.autoClear = false
 		this.renderer.setSize(this.session.baseLayer.framebufferWidth, this.session.baseLayer.framebufferHeight, false)
-		//this.renderer.clear()
+		this.renderer.clear()
 
 		//this.session.baseLayer.context.bindFramebuffer(this.session.baseLayer.context.FRAMEBUFFER, this.session.baseLayer.framebuffer)
 

diff --git a/index.html b/index.html
@@ -9,8 +9,6 @@
 	<body>
 		<h1>XR Examples</h1>
 
-		<p>The WebXR polyfill uses ES6 modules, so for now you'll need to <a href="https://jakearchibald.com/2017/es-modules-in-browsers/">enable them</a>.
-
 		<ul>
 			<li><a href="ar_simplest_example.html">Simplest AR example (teapot)</a>
 			<li><a href="ar_anchor_example.html">Anchor AR example</a>

diff --git a/polyfill/XRDisplay.js b/polyfill/XRDisplay.js
@@ -20,9 +20,9 @@ export default class XRDisplay extends EventHandlerBase {
 		this._eyeLevelCoordinateSystem = new XRCoordinateSystem(this, XRCoordinateSystem.EYE_LEVEL)
 		this._stageCoordinateSystem = new XRCoordinateSystem(this, XRCoordinateSystem.STAGE)
 
-		this._headPose = new XRViewPose([0, 0, 0])
-		this._eyeLevelPose = new XRViewPose([0, 0, 0])
-		this._stagePose = new XRViewPose([0, -XRViewPose.DEFAULT_EYE_HEIGHT, 0])
+		this._headPose = new XRViewPose([0, XRViewPose.SITTING_EYE_HEIGHT, 0])
+		this._eyeLevelPose = new XRViewPose([0, XRViewPose.SITTING_EYE_HEIGHT, 0])
+		this._stagePose = new XRViewPose([0, 0, 0])
 
 		var fov = 50/2;
 		this._fov = new XRFieldOfView(fov, fov, fov, fov)

diff --git a/polyfill/XRViewPose.js b/polyfill/XRViewPose.js
@@ -43,4 +43,4 @@ export default class XRViewPose {
 	}
 }
 
-XRViewPose.DEFAULT_EYE_HEIGHT = 2 // meters
+XRViewPose.SITTING_EYE_HEIGHT = 1.1 // meters
diff --git a/polyfill/display/FlatDisplay.js b/polyfill/display/FlatDisplay.js
@@ -105,28 +105,31 @@ export default class FlatDisplay extends XRDisplay {
 		this._views[0].setProjectionMatrix(this._vrFrameData.leftProjectionMatrix)
 		this._deviceOrientation.set(...this._vrFrameData.pose.orientation)
 		this._devicePosition.set(...this._vrFrameData.pose.position)
+		this._devicePosition.add(0, XRViewPose.SITTING_EYE_HEIGHT, 0)
 		MatrixMath.mat4_fromRotationTranslation(this._deviceWorldMatrix, this._deviceOrientation.toArray(), this._devicePosition.toArray())
 		this._headPose._setPoseModelMatrix(this._deviceWorldMatrix)
-		this._eyeLevelPose.position = this._devicePosition.toArray()
-		this._stagePose._position = [-this._headPose._position[0], -this._headPose._position[1] - XRViewPose.DEFAULT_EYE_HEIGHT, -this._headPose._position[2]]
+		this._eyeLevelPose._position = this._devicePosition.toArray()
+		this._stagePose._position = [0, 0, 0]
 	}
 
 	_updateFromDeviceOrientationTracker(){
 		// TODO set XRView's FOV
 		this._deviceOrientationTracker.getOrientation(this._deviceOrientation)
 		this._devicePosition.set(this._headPose.poseModelMatrix[12], this._headPose.poseModelMatrix[13], this._headPose.poseModelMatrix[14])
+		this._devicePosition.add(0, XRViewPose.SITTING_EYE_HEIGHT, 0)
 		MatrixMath.mat4_fromRotationTranslation(this._deviceWorldMatrix, this._deviceOrientation.toArray(), this._devicePosition.toArray())
 		this._headPose._setPoseModelMatrix(this._deviceWorldMatrix)
-		this._eyeLevelPose.position = this._devicePosition.toArray()
-		this._stagePose._position = [-this._headPose._position[0], -this._headPose._position[1] - XRViewPose.DEFAULT_EYE_HEIGHT, -this._headPose._position[2]]
+		this._eyeLevelPose._position = this._devicePosition.toArray()
+		this._stagePose._position = [0, 0, 0]
 	}
 
 	_handleARKitUpdate(...params){
 		const cameraTransformMatrix = this._arKitWrapper.getData('camera_transform')
 		if (cameraTransformMatrix) {
 			this._headPose._setPoseModelMatrix(cameraTransformMatrix)
+			this._headPose._poseModelMatrix[13] += XRViewPose.SITTING_EYE_HEIGHT
 			this._eyeLevelPose._position = this._headPose._position
-			this._stagePose._position = [-this._headPose._position[0], -this._headPose._position[1] - XRViewPose.DEFAULT_EYE_HEIGHT, -this._headPose._position[2]]
+			this._stagePose._position = [0, 0, 0]
 		} else {
 			console.log('no camera transform', this._arKitWrapper.rawARData)
 		}

diff --git a/vr_examples.js b/vr_examples.js
@@ -6,14 +6,30 @@ class VRSimplestExample extends XRExampleBase {
 
 	// Called during construction
 	initializeStageGroup(){
-		let mesh = new THREE.Mesh(
-			new THREE.BoxBufferGeometry(0.2, 0.2, 0.2),
+		// Add a teapot at about eye level
+		var geometry = new THREE.TeapotBufferGeometry(0.1)
+		let materialColor = new THREE.Color()
+		materialColor.setRGB(1.0, 1.0, 1.0)
+		let material = new THREE.MeshLambertMaterial({
+			color: materialColor,
+			side: THREE.DoubleSide
+		})
+		let mesh = new THREE.Mesh(geometry, material)
+		mesh.position.set(0, 1.4, -1)
+		this.stageGroup.add(mesh)
+
+		// Add a box at the stage origin
+		let box = new THREE.Mesh(
+			new THREE.BoxBufferGeometry(0.1, 0.1, 0.1),
 			new THREE.MeshPhongMaterial({ color: '#DDFFDD' })
 		)
-		mesh.position.set(0, 1.6, -1)
-		this.stageGroup.add(mesh)
+		box.position.set(0, 0, 0)
+		this.stageGroup.add(box)
+
 		this.stageGroup.add(new THREE.AmbientLight('#FFF', 0.2))
-		this.stageGroup.add(new THREE.DirectionalLight('#FFF', 0.6))
+		let directionalLight = new THREE.DirectionalLight('#FFF', 0.6)
+		directionalLight.position.set(0, 10, 0)
+		this.stageGroup.add(directionalLight)
 	}
 
 	// Called once per frame