Skip to content
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

Post-processing with WebXR #18846

Closed
wants to merge 25 commits into from
Closed

Post-processing with WebXR #18846

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
a0d70d5
Hack EffectComposer for VR
takahirox Feb 22, 2019
9dfda1a
Add WebVR PostProcessing example
takahirox Feb 22, 2019
f658f87
Update examples/files.hs for WebVR PostProcessing example
takahirox Feb 22, 2019
4fed06d
Fix animation loop of WebVR PostProcessing example
takahirox Feb 22, 2019
c87ce06
Resize renderer drawingBufferSize when entering/leaving VR mode in We…
takahirox Feb 25, 2019
2481cda
User renderer.getDrawingBufferSize() instead of renderer.getDrawingBu…
takahirox Feb 25, 2019
9af198e
Merge branch 'dev' into EffectComposerVRHack
takahirox Feb 28, 2019
8e4818c
Merge branch 'dev' into EffectComposerVRHack. Fix the conflicts.
takahirox Mar 5, 2019
c3e8b57
Move setRenderTarget() from render() to init() in WebVR PostProcessin…
takahirox Apr 16, 2019
31cfc5e
Efficient EffectComposer size change in .render()
takahirox Apr 17, 2019
55d1b2c
Remove deprecated WebXR API token
takahirox Apr 17, 2019
f0fdd62
Merge branch 'dev' into EffectComposerVRHack
takahirox Jun 1, 2019
fcbbb6e
Merge branch 'dev' into EffectComposerVRHack
takahirox Jun 4, 2019
236142b
Simplified EffectComposer renderer size update for VR
takahirox Jun 4, 2019
4d6e7e4
Merge remote-tracking branch 'upstream/dev' into EffectComposerVRHack
takahirox Oct 11, 2019
470e6ab
Use module in webvr_postprocessing example
takahirox Oct 11, 2019
f1f24d8
Update WebXRManager to follow the newest WebXR API
takahirox Oct 11, 2019
f3143e0
Update jsm
takahirox Oct 11, 2019
17c5a0b
Minor clean up webvr_postprocessing example
takahirox Oct 11, 2019
d83c5cd
Merge branch 'EffectComposerVRHack' of https://github.com/takahirox/t…
Neptilo Mar 6, 2020
1bec375
Rename webvr folder to webxr
Neptilo Mar 6, 2020
bfb2a20
Merge https://github.com/mrdoob/three.js into dev
Neptilo Mar 6, 2020
4614e87
Update EffectComposer to use WebXR
Neptilo Mar 9, 2020
3aa99d2
Undo changes in build files
Neptilo Mar 9, 2020
4347741
Change setDrawingBufferSize to setSize in EffectComposer
Neptilo Mar 10, 2020
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.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -331,6 +331,7 @@ var files = {
"webxr_vr_panorama",
"webxr_vr_panorama_depth",
"webxr_vr_paint",
"webxr_vr_postprocessing",
"webxr_vr_rollercoaster",
"webxr_vr_sandbox",
"webxr_vr_sculpt",
Expand Down
33 changes: 29 additions & 4 deletions examples/js/postprocessing/EffectComposer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,22 @@ THREE.EffectComposer = function ( renderer, renderTarget ) {

this.clock = new THREE.Clock();

// for VR

var rendererSize = new THREE.Vector2();
var scope = this;

function onSessionStateChange() {

renderer.getBufferSize( rendererSize );
scope.setPixelRatio( renderer.getPixelRatio() );
scope.setSize( rendererSize.x, rendererSize.y );
Copy link
Collaborator

@WestLangley WestLangley Mar 9, 2020 •
edited
Loading

Choose a reason for hiding this comment

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

It appears you are scaling by pixel ratio twice here.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

The addition of setPixelRatio after getDrawingBufferSize was made in the previous PR (commit f0fdd62) and I didn't change it. But it seems you're right. I'll change getDrawingBufferSize to getBufferSize.

Copy link
Collaborator

Choose a reason for hiding this comment

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

@Mugen87 Does this code block now look OK to you?

Copy link
Collaborator

Choose a reason for hiding this comment

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

I don't think getBufferSize() exists...

Apart from that, you are right. The code should use WebGLRenderer.getSize() otherwise the render targets of the composer will be too big.


}

renderer.xr.addEventListener( 'sessionstart', onSessionStateChange );
renderer.xr.addEventListener( 'sessionend', onSessionStateChange );

};

Object.assign( THREE.EffectComposer.prototype, {
Expand Down Expand Up @@ -115,8 +131,17 @@ Object.assign( THREE.EffectComposer.prototype, {

var maskActive = false;

var currentVREnabled = this.renderer.xr.enabled;

if ( this.renderer.xr.enabled === true ) {

this.renderer.xr.enabled = false;

}

var pass, i, il = this.passes.length;

var swapped = false;
for ( i = 0; i < il; i ++ ) {

pass = this.passes[ i ];
Expand All @@ -133,17 +158,14 @@ Object.assign( THREE.EffectComposer.prototype, {
var context = this.renderer.getContext();
var stencil = this.renderer.state.buffers.stencil;

//context.stencilFunc( context.NOTEQUAL, 1, 0xffffffff );
stencil.setFunc( context.NOTEQUAL, 1, 0xffffffff );

this.copyPass.render( this.renderer, this.writeBuffer, this.readBuffer, deltaTime );

//context.stencilFunc( context.EQUAL, 1, 0xffffffff );
stencil.setFunc( context.EQUAL, 1, 0xffffffff );

}

this.swapBuffers();
swapped = !swapped;

}

Expand All @@ -163,8 +185,11 @@ Object.assign( THREE.EffectComposer.prototype, {

}

if (swapped) this.swapBuffers();
this.renderer.setRenderTarget( currentRenderTarget );

this.renderer.xr.enabled = currentVREnabled;

},

reset: function ( renderTarget ) {
Expand Down
33 changes: 29 additions & 4 deletions examples/jsm/postprocessing/EffectComposer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,22 @@ var EffectComposer = function ( renderer, renderTarget ) {

this.clock = new Clock();

// for VR

var rendererSize = new Vector2();
var scope = this;

function onSessionStateChange() {

renderer.getBufferSize( rendererSize );
scope.setPixelRatio( renderer.getPixelRatio() );
scope.setSize( rendererSize.x, rendererSize.y );

}

renderer.xr.addEventListener( 'sessionstart', onSessionStateChange );
renderer.xr.addEventListener( 'sessionend', onSessionStateChange );

};

Object.assign( EffectComposer.prototype, {
Expand Down Expand Up @@ -130,8 +146,17 @@ Object.assign( EffectComposer.prototype, {

var maskActive = false;

var currentVREnabled = this.renderer.xr.enabled;

if ( this.renderer.xr.enabled === true ) {

this.renderer.xr.enabled = false;

}

var pass, i, il = this.passes.length;

var swapped = false;
for ( i = 0; i < il; i ++ ) {

pass = this.passes[ i ];
Expand All @@ -148,17 +173,14 @@ Object.assign( EffectComposer.prototype, {
var context = this.renderer.getContext();
var stencil = this.renderer.state.buffers.stencil;

//context.stencilFunc( context.NOTEQUAL, 1, 0xffffffff );
stencil.setFunc( context.NOTEQUAL, 1, 0xffffffff );

this.copyPass.render( this.renderer, this.writeBuffer, this.readBuffer, deltaTime );

//context.stencilFunc( context.EQUAL, 1, 0xffffffff );
stencil.setFunc( context.EQUAL, 1, 0xffffffff );

}

this.swapBuffers();
swapped = !swapped;

}

Expand All @@ -178,8 +200,11 @@ Object.assign( EffectComposer.prototype, {

}

if (swapped) this.swapBuffers();
this.renderer.setRenderTarget( currentRenderTarget );

this.renderer.xr.enabled = currentVREnabled;

},

reset: function ( renderTarget ) {
Expand Down
124 changes: 124 additions & 0 deletions examples/webxr_vr_postprocessing.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js vr - postprocessing</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="module">

import * as THREE from '../build/three.module.js';

import { CopyShader } from './jsm/shaders/CopyShader.js';
import { DotScreenShader } from './jsm/shaders/DotScreenShader.js';
import { RGBShiftShader } from './jsm/shaders/RGBShiftShader.js';

import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
import { ShaderPass } from './jsm/postprocessing/ShaderPass.js';

import { VRButton } from './jsm/webxr/VRButton.js';

var camera, scene, renderer, composer;
var object, light;

init();
animate();

function init() {

renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.xr.enabled = true;
document.body.appendChild( renderer.domElement );

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

//

camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );

scene = new THREE.Scene();
scene.fog = new THREE.Fog( 0x000000, 1, 1000 );

object = new THREE.Object3D();
object.position.z = - 500;
scene.add( object );

var geometry = new THREE.SphereBufferGeometry( 1, 4, 4 );
var material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } );

for ( var i = 0; i < 100; i ++ ) {

var mesh = new THREE.Mesh( geometry, material );
mesh.position.set( Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5 ).normalize();
mesh.position.multiplyScalar( Math.random() * 400 );
mesh.rotation.set( Math.random() * 2, Math.random() * 2, Math.random() * 2 );
mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 50;
object.add( mesh );

}

scene.add( new THREE.AmbientLight( 0x222222 ) );

light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 1, 1, 1 );
scene.add( light );

// postprocessing

composer = new EffectComposer( renderer );

renderer.setRenderTarget( composer.readBuffer );

var effect = new ShaderPass( DotScreenShader );
effect.uniforms[ 'scale' ].value = 4;
composer.addPass( effect );

effect = new ShaderPass( RGBShiftShader );
effect.uniforms[ 'amount' ].value = 0.0015;
composer.addPass( effect );

scene.onAfterRender = function () {

composer.render();

};

//

window.addEventListener( 'resize', onWindowResize, false );

}

function onWindowResize() {

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

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

}

function animate() {

renderer.setAnimationLoop( render );

}

function render() {

object.rotation.x += 0.005;
object.rotation.y += 0.01;

renderer.render( scene, camera );

}

</script>
</body>
</html>
10 changes: 10 additions & 0 deletions src/renderers/webxr/WebXRManager.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { ArrayCamera } from '../../cameras/ArrayCamera.js';
import { EventDispatcher } from '../../core/EventDispatcher.js';
import { Group } from '../../objects/Group.js';
import { PerspectiveCamera } from '../../cameras/PerspectiveCamera.js';
import { Vector2 } from '../../math/Vector2.js';
import { Vector3 } from '../../math/Vector3.js';
import { Vector4 } from '../../math/Vector4.js';
import { WebGLAnimation } from '../webgl/WebGLAnimation.js';
Expand All @@ -26,6 +27,8 @@ function WebXRManager( renderer, gl ) {
var controllers = [];
var inputSourcesMap = new Map();

var currentSize = new Vector2(), currentPixelRatio;

//

var cameraL = new PerspectiveCamera();
Expand Down Expand Up @@ -143,6 +146,7 @@ function WebXRManager( renderer, gl ) {

//

renderer.setDrawingBufferSize( currentSize.width, currentSize.height, currentPixelRatio );
renderer.setFramebuffer( null );
renderer.setRenderTarget( renderer.getRenderTarget() ); // Hack #15830
animation.stop();
Expand All @@ -157,6 +161,9 @@ function WebXRManager( renderer, gl ) {

referenceSpace = value;

currentPixelRatio = renderer.getPixelRatio();
renderer.getSize( currentSize );

animation.setContext( session );
animation.start();

Expand Down Expand Up @@ -224,7 +231,10 @@ function WebXRManager( renderer, gl ) {
// eslint-disable-next-line no-undef
var baseLayer = new XRWebGLLayer( session, gl, layerInit );

// baseLayer will only be applied to the session
// when the next XRFrame's callbacks are processed.
session.updateRenderState( { baseLayer: baseLayer } );
renderer.setDrawingBufferSize( baseLayer.framebufferWidth, baseLayer.framebufferHeight, 1 );

session.requestReferenceSpace( referenceSpaceType ).then( onRequestReferenceSpace );

Expand Down