diff --git a/ar_examples.js b/ar_examples.js
index ce4b6a3..c9befae 100644
--- 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
index 008b102..c6f07ee 100644
--- 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
index 628cf41..5ff38be 100644
--- a/index.html
+++ b/index.html
@@ -9,8 +9,6 @@
XR Examples
- The WebXR polyfill uses ES6 modules, so for now you'll need to enable them.
-
- Simplest AR example (teapot)
- Anchor AR example
diff --git a/polyfill/XRDisplay.js b/polyfill/XRDisplay.js
index 98aa33e..1edd330 100644
--- 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
index d8c999e..b80ba6f 100644
--- 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
index a5530e7..c530135 100644
--- 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
index 7c52e39..8c09df8 100644
--- 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