Skip to content

WebGPURenderer: Optimize WebXR render path. #31134

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: dev
Choose a base branch
from
Open

WebGPURenderer: Optimize WebXR render path. #31134

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5e9e053
optimize WebXR render path
cabanier May 19, 2025
415bbef
address review comments
cabanier May 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions examples/files.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -461,6 +461,7 @@
"webgpu_volume_lighting_rectarea",
"webgpu_volume_perlin",
"webgpu_water",
"webgpu_xr_rollercoaster",
"webgpu_xr_cubes",
"webgpu_xr_native_layers"
],
Expand Down
Binary file added examples/screenshots/webgpu_xr_rollercoaster.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 3 additions & 3 deletions examples/webgpu_xr_native_layers.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -305,7 +305,7 @@
window.addEventListener( 'resize', onWindowResize );

// set up rollercoaster
rollercoasterLayer = renderer.xr.createCylinderLayer( 1, Math.PI / 2, 2, new THREE.Vector3( 0, 1.5, - 0.5 ), new THREE.Quaternion(), 1024, 1024, renderRollercoaster );
rollercoasterLayer = renderer.xr.createCylinderLayer( 1, Math.PI / 2, 2, new THREE.Vector3( 0, 1.5, - 0.5 ), new THREE.Quaternion(), 1500, 1000, renderRollercoaster );
scene.add( rollercoasterLayer );

rcscene = new THREE.Scene();
Expand Down Expand Up @@ -410,7 +410,7 @@
funfairs.push( rcmesh );

// set up horse animation
horseLayer = renderer.xr.createQuadLayer( 1, 1, new THREE.Vector3( - 1.5, 1.5, - 1.5 ), new THREE.Quaternion(), 1024, 1024, renderQuad );
horseLayer = renderer.xr.createQuadLayer( 1, 1, new THREE.Vector3( - 1.5, 1.5, - 1.5 ), new THREE.Quaternion(), 800, 800, renderQuad );
scene.add( horseLayer );

horseLayer.geometry = new THREE.CircleGeometry( .5, 64 );
Expand Down Expand Up @@ -473,7 +473,7 @@

const bbox = new THREE.Box3().setFromObject( guiScene );

guiLayer = renderer.xr.createQuadLayer( 1.2, .8, new THREE.Vector3( 1.5, 1.5, - 1.5 ), new THREE.Quaternion(), 1024, 1024, renderGui );
guiLayer = renderer.xr.createQuadLayer( 1.2, .8, new THREE.Vector3( 1.5, 1.5, - 1.5 ), new THREE.Quaternion(), 1280, 800, renderGui );
scene.add( guiLayer );

guiCamera.left = bbox.min.x;
Expand Down
251 changes: 251 additions & 0 deletions examples/webgpu_xr_rollercoaster.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,251 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js vr - roller coaster</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link type="text/css" rel="stylesheet" href="main.css">
</head>
<body>
<script type="importmap">
{
"imports": {
"three": "../build/three.webgpu.js",
"three/webgpu": "../build/three.webgpu.js",
"three/addons/": "./jsm/"
}
}
</script>

<script type="module">

import * as THREE from 'three';

import {
RollerCoasterGeometry,
RollerCoasterShadowGeometry,
RollerCoasterLiftersGeometry,
TreesGeometry,
SkyGeometry
} from 'three/addons/misc/RollerCoaster.js';
import { VRButton } from 'three/addons/webxr/VRButton.js';

let mesh, material, geometry;

const renderer = new THREE.WebGPURenderer( { antialias: true, forceWebGL: true, colorBufferType: THREE.UnsignedByteType, multiview: false } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( animate );
renderer.xr.enabled = true;
renderer.xr.setReferenceSpaceType( 'local' );
document.body.appendChild( renderer.domElement );

document.body.appendChild( VRButton.createButton( renderer ) );

//

const scene = new THREE.Scene();
scene.background = new THREE.Color( 0xf0f0ff );

const light = new THREE.HemisphereLight( 0xfff0f0, 0x60606, 3 );
light.position.set( 1, 1, 1 );
scene.add( light );

const train = new THREE.Object3D();
scene.add( train );

const camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 500 );
train.add( camera );

// environment

geometry = new THREE.PlaneGeometry( 500, 500, 15, 15 );
geometry.rotateX( - Math.PI / 2 );

const positions = geometry.attributes.position.array;
const vertex = new THREE.Vector3();

for ( let i = 0; i < positions.length; i += 3 ) {

vertex.fromArray( positions, i );

vertex.x += Math.random() * 10 - 5;
vertex.z += Math.random() * 10 - 5;

const distance = ( vertex.distanceTo( scene.position ) / 5 ) - 25;
vertex.y = Math.random() * Math.max( 0, distance );

vertex.toArray( positions, i );

}

geometry.computeVertexNormals();

material = new THREE.MeshLambertMaterial( {
color: 0x407000
} );

mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

geometry = new TreesGeometry( mesh );
material = new THREE.MeshBasicMaterial( {
side: THREE.DoubleSide, vertexColors: true
} );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

geometry = new SkyGeometry();
material = new THREE.MeshBasicMaterial( { color: 0xffffff } );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

//

const PI2 = Math.PI * 2;

const curve = ( function () {

const vector = new THREE.Vector3();
const vector2 = new THREE.Vector3();

return {

getPointAt: function ( t ) {

t = t * PI2;

const x = Math.sin( t * 3 ) * Math.cos( t * 4 ) * 50;
const y = Math.sin( t * 10 ) * 2 + Math.cos( t * 17 ) * 2 + 5;
const z = Math.sin( t ) * Math.sin( t * 4 ) * 50;

return vector.set( x, y, z ).multiplyScalar( 2 );

},

getTangentAt: function ( t ) {

const delta = 0.0001;
const t1 = Math.max( 0, t - delta );
const t2 = Math.min( 1, t + delta );

return vector2.copy( this.getPointAt( t2 ) )
.sub( this.getPointAt( t1 ) ).normalize();

}

};

} )();

geometry = new RollerCoasterGeometry( curve, 1500 );
material = new THREE.MeshPhongMaterial( {
vertexColors: true
} );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

geometry = new RollerCoasterLiftersGeometry( curve, 100 );
material = new THREE.MeshPhongMaterial();
mesh = new THREE.Mesh( geometry, material );
mesh.position.y = 0.1;
scene.add( mesh );

geometry = new RollerCoasterShadowGeometry( curve, 500 );
material = new THREE.MeshBasicMaterial( {
color: 0x305000, depthWrite: false, transparent: true
} );
mesh = new THREE.Mesh( geometry, material );
mesh.position.y = 0.1;
scene.add( mesh );

const funfairs = [];

//

geometry = new THREE.CylinderGeometry( 10, 10, 5, 15 );
material = new THREE.MeshLambertMaterial( {
color: 0xff8080
} );
mesh = new THREE.Mesh( geometry, material );
mesh.position.set( - 80, 10, - 70 );
mesh.rotation.x = Math.PI / 2;
scene.add( mesh );

funfairs.push( mesh );

geometry = new THREE.CylinderGeometry( 5, 6, 4, 10 );
material = new THREE.MeshLambertMaterial( {
color: 0x8080ff
} );
mesh = new THREE.Mesh( geometry, material );
mesh.position.set( 50, 2, 30 );
scene.add( mesh );

funfairs.push( mesh );

//

window.addEventListener( 'resize', onWindowResize );

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );

}

//

const position = new THREE.Vector3();
const tangent = new THREE.Vector3();

const lookAt = new THREE.Vector3();

let velocity = 0;
let progress = 0;

let prevTime = performance.now();

function animate() {

const time = performance.now();
const delta = time - prevTime;

for ( let i = 0; i < funfairs.length; i ++ ) {

funfairs[ i ].rotation.y = time * 0.0004;

}

//

progress += velocity;
progress = progress % 1;

position.copy( curve.getPointAt( progress ) );
position.y += 0.3;

train.position.copy( position );

tangent.copy( curve.getTangentAt( progress ) );

velocity -= tangent.y * 0.0000001 * delta;
velocity = Math.max( 0.00004, Math.min( 0.0002, velocity ) );

train.lookAt( lookAt.copy( position ).sub( tangent ) );

//

renderer.render( scene, camera );

prevTime = time;

}

</script>

</body>
</html>
19 changes: 18 additions & 1 deletion src/renderers/common/Renderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -314,6 +314,8 @@ class Renderer {
*/
this._scissor = new Vector4( 0, 0, this._width, this._height );

this._forceViewport = false;

/**
* Whether the scissor test should be enabled or not.
*
Expand Down Expand Up @@ -1250,6 +1252,7 @@ class Renderer {
frameBufferTarget.scissor.multiplyScalar( this._pixelRatio );
frameBufferTarget.scissorTest = this._scissorTest;
frameBufferTarget.multiview = outputRenderTarget !== null ? outputRenderTarget.multiview : false;
frameBufferTarget.resolveDepthBuffer = outputRenderTarget !== null ? outputRenderTarget.resolveDepthBuffer : true;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this indicates if we need to resolve the depth buffer. I think this needs to be updated for devices that prefer to get depth (ie AVP) but I have no way to test this.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What does AVP stand for?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Apple Vision Pro.
It works without a depth buffer but it has better reprojection if one is provided.


return frameBufferTarget;

Expand Down Expand Up @@ -1380,7 +1383,7 @@ class Renderer {
renderContext.viewportValue.height >>= activeMipmapLevel;
renderContext.viewportValue.minDepth = minDepth;
renderContext.viewportValue.maxDepth = maxDepth;
renderContext.viewport = renderContext.viewportValue.equals( _screen ) === false;
renderContext.viewport = renderContext.viewportValue.equals( _screen ) === false || this._forceViewport;

renderContext.scissorValue.copy( scissor ).multiplyScalar( pixelRatio ).floor();
renderContext.scissor = this._scissorTest && renderContext.scissorValue.equals( _screen ) === false;
Expand Down Expand Up @@ -1505,6 +1508,17 @@ class Renderer {

}

_setXRLayerSize( width, height ) {

this._width = width;
this._height = height;

this._forceViewport = true;

this.setViewport( 0, 0, width, height );

}

/**
* The output pass performs tone mapping and color space conversion.
*
Expand Down Expand Up @@ -1688,6 +1702,7 @@ class Renderer {

this.domElement.width = Math.floor( width * pixelRatio );
this.domElement.height = Math.floor( height * pixelRatio );
this._forceViewport = false;

this.setViewport( 0, 0, width, height );

Expand All @@ -1713,6 +1728,8 @@ class Renderer {
this.domElement.width = Math.floor( width * this._pixelRatio );
this.domElement.height = Math.floor( height * this._pixelRatio );

this._forceViewport = false;

if ( updateStyle === true ) {

this.domElement.style.width = width + 'px';
Expand Down
Loading