Browse Source

Fix WebXR Layers example. (#24691)

* Fix WebXR Layers example.

    Invisible dummy meshes relied on old alphaWrite logic so they became
    opaque after dfca2bd4748b00245225c9e4d8ba0ef7374c9b36 on Jan 27 and
    obscured the quad layers. This switches to using colorWrite=false
    logic to properly create holes in the 3D scene and let the dummy
    meshes interect the controller ray without obscuring the quad
    layers.

    Tested:
      * https://raw.githack.com/sigmaxipi/three.js/webXrLayersFix/examples/index.html?q=webxr#webxr_vr_layers
        Properly shows the charts on the top two quads on a Quest 2 with
        chrome://flags/#webxr-layers enabled and ray intersection works
        properly with the quad layers and GUI.

* Update webxr_vr_layers.html

Co-authored-by: Michael Herzog <[email protected]>
SxP 2 years ago
parent
commit
9926bd60b6
1 changed files with 7 additions and 2 deletions
  1. 7 2
      examples/webxr_vr_layers.html

+ 7 - 2
examples/webxr_vr_layers.html

@@ -144,6 +144,10 @@
 				] );
 				] );
 				const line = new THREE.Line( lineGeometry, new THREE.LineBasicMaterial( { color: 0x5555ff } ) );
 				const line = new THREE.Line( lineGeometry, new THREE.LineBasicMaterial( { color: 0x5555ff } ) );
 
 
+				// The invisible dummyMesh quads and the guiMesh need to be rendered before the controller lines so that they
+				// leave a hole in the depth buffer that the lines can intersect.
+				line.renderOrder = 1;
+
 				const controllerModelFactory = new XRControllerModelFactory();
 				const controllerModelFactory = new XRControllerModelFactory();
 				const handModelFactory = new XRHandModelFactory().setPath( './models/fbx/' );
 				const handModelFactory = new XRHandModelFactory().setPath( './models/fbx/' );
 
 
@@ -202,7 +206,7 @@
 				// projection layer is rendered.
 				// projection layer is rendered.
 				const dummyMeshLeft = new THREE.Mesh(
 				const dummyMeshLeft = new THREE.Mesh(
 					new THREE.PlaneGeometry( snellenConfig.widthMeters, snellenConfig.heightMeters ),
 					new THREE.PlaneGeometry( snellenConfig.widthMeters, snellenConfig.heightMeters ),
-					new THREE.MeshBasicMaterial( { opacity: 0 } ) );
+					new THREE.MeshBasicMaterial( { colorWrite: false } ) );
 				dummyMeshLeft.position.x = snellenConfig.x - snellenConfig.widthMeters;
 				dummyMeshLeft.position.x = snellenConfig.x - snellenConfig.widthMeters;
 				dummyMeshLeft.position.y = snellenConfig.y + snellenConfig.heightMeters;
 				dummyMeshLeft.position.y = snellenConfig.y + snellenConfig.heightMeters;
 				eyeCharts.add( dummyMeshLeft );
 				eyeCharts.add( dummyMeshLeft );
@@ -255,7 +259,8 @@
 				guiMesh.position.set( 1.0, 1.5, - 1.0 );
 				guiMesh.position.set( 1.0, 1.5, - 1.0 );
 				guiMesh.rotation.y = - Math.PI / 4;
 				guiMesh.rotation.y = - Math.PI / 4;
 				guiMesh.scale.setScalar( 2 );
 				guiMesh.scale.setScalar( 2 );
-				guiMesh.material.opacity = 0;
+				guiMesh.material.colorWrite = false;
+				guiMesh.material.transparent = false;
 				group.add( guiMesh );
 				group.add( guiMesh );
 
 
 				// Error message if layer initialization fails.
 				// Error message if layer initialization fails.