diff --git a/examples/screenshots/webgpu_loader_materialx.jpg b/examples/screenshots/webgpu_loader_materialx.jpg
index 32253cb1bb5f52..0be4f775e78110 100644
Binary files a/examples/screenshots/webgpu_loader_materialx.jpg and b/examples/screenshots/webgpu_loader_materialx.jpg differ
diff --git a/examples/webgpu_loader_materialx.html b/examples/webgpu_loader_materialx.html
index 8b935efa2c7051..6d349caaf4df20 100644
--- a/examples/webgpu_loader_materialx.html
+++ b/examples/webgpu_loader_materialx.html
@@ -40,7 +40,7 @@
 
 			import * as THREE from 'three/webgpu';
 
-			import { Fn, length, fract, vec4, positionWorld, smoothstep, max, abs, float, fwidth } from 'three/tsl';
+			import { Fn, abs, fract, fwidth, length, max, saturate, smoothstep, vec4, positionWorld, float } from 'three/tsl';
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
@@ -130,41 +130,37 @@
 
 				const material = new THREE.MeshBasicNodeMaterial();
 
-				const gridXZ = Fn( ( [ gridSize = float( 1.0 ), dotWidth = float( 0.1 ), lineWidth = float( 0.02 ) ] ) => {
+				const grid = Fn( ( [ coord, lineWidth = float( 0.01 ), dotSize = float( 0.03 ) ] ) => {
 
-					const coord = positionWorld.xz.div( gridSize );
-					const grid = fract( coord );
+					// https://bgolus.medium.com/the-best-darn-grid-shader-yet-727f9278b9d8
 
-					// Screen-space derivative for automatic antialiasing
+					const g = fract( coord );
 					const fw = fwidth( coord );
-					const smoothing = max( fw.x, fw.y ).mul( 0.5 );
+					const gx = abs( g.x.sub( 0.5 ) );
+					const gy = abs( g.y.sub( 0.5 ) );
 
-					// Create squares at cell centers
-					const squareDist = max( abs( grid.x.sub( 0.5 ) ), abs( grid.y.sub( 0.5 ) ) );
-					const dots = smoothstep( dotWidth.add( smoothing ), dotWidth.sub( smoothing ), squareDist );
+					const lineX = saturate( lineWidth.sub( gx ).div( fw.x ).add( 0.5 ) );
+					const lineY = saturate( lineWidth.sub( gy ).div( fw.y ).add( 0.5 ) );
+					const lines = max( lineX, lineY );
 
-					// Create grid lines
-					const lineX = smoothstep( lineWidth.add( smoothing ), lineWidth.sub( smoothing ), abs( grid.x.sub( 0.5 ) ) );
-					const lineZ = smoothstep( lineWidth.add( smoothing ), lineWidth.sub( smoothing ), abs( grid.y.sub( 0.5 ) ) );
-					const lines = max( lineX, lineZ );
+					const squareDist = max( gx, gy );
+					const aa = max( fw.x, fw.y );
+					const dots = smoothstep( dotSize.add( aa ), dotSize.sub( aa ), squareDist );
 
 					return max( dots, lines );
 
 				} );
 
-				const radialGradient = Fn( ( [ radius = float( 10.0 ), falloff = float( 1.0 ) ] ) => {
+				const fade = Fn( ( [ radius = float( 10.0 ), falloff = float( 1.0 ) ] ) => {
 
 					return smoothstep( radius, radius.sub( falloff ), length( positionWorld ) );
 
 				} );
 
-				// Create grid pattern
-				const gridPattern = gridXZ( 1.0, 0.03, 0.005 );
-				const baseColor = vec4( 1.0, 1.0, 1.0, 0.0 );
 				const gridColor = vec4( 0.5, 0.5, 0.5, 1.0 );
+				const baseColor = vec4( 1.0, 1.0, 1.0, 0.0 );
 
-				// Mix base color with grid lines
-				material.colorNode = gridPattern.mix( baseColor, gridColor ).mul( radialGradient( 30.0, 20.0 ) );
+				material.colorNode = grid( positionWorld.xz, 0.007, 0.03 ).mix( baseColor, gridColor ).mul( fade( 30.0, 20.0 ) );
 				material.transparent = true;
 
 				const plane = new THREE.Mesh( new THREE.CircleGeometry( 40 ), material );
diff --git a/src/renderers/common/XRManager.js b/src/renderers/common/XRManager.js
index 23bb15b1708845..a31d2f70f9d922 100644
--- a/src/renderers/common/XRManager.js
+++ b/src/renderers/common/XRManager.js
@@ -1131,8 +1131,8 @@ class XRManager extends EventDispatcher {
 
 		// inherit camera layers and enable eye layers (1 = left, 2 = right)
 		cameraXR.layers.mask = camera.layers.mask | 0b110;
-		cameraL.layers.mask = cameraXR.layers.mask & 0b011;
-		cameraR.layers.mask = cameraXR.layers.mask & 0b101;
+		cameraL.layers.mask = cameraXR.layers.mask & ~ 0b100;
+		cameraR.layers.mask = cameraXR.layers.mask & ~ 0b010;
 
 
 		const parent = camera.parent;
diff --git a/src/renderers/webxr/WebXRManager.js b/src/renderers/webxr/WebXRManager.js
index 7d9b999db7339a..03ed5ab7e7426b 100644
--- a/src/renderers/webxr/WebXRManager.js
+++ b/src/renderers/webxr/WebXRManager.js
@@ -749,8 +749,8 @@ class WebXRManager extends EventDispatcher {
 
 			// inherit camera layers and enable eye layers (1 = left, 2 = right)
 			cameraXR.layers.mask = camera.layers.mask | 0b110;
-			cameraL.layers.mask = cameraXR.layers.mask & 0b011;
-			cameraR.layers.mask = cameraXR.layers.mask & 0b101;
+			cameraL.layers.mask = cameraXR.layers.mask & ~ 0b100;
+			cameraR.layers.mask = cameraXR.layers.mask & ~ 0b010;
 
 			const parent = camera.parent;
 			const cameras = cameraXR.cameras;