Posted in Uncategorized

WebGLRenderTarget has some problems in VR mode

   January 6, 2021  1 Comment on WebGLRenderTarget has some problems in VR mode
Description of the problem

I am trying to render a scene into another scene using WebGLRenderTarget in VR mode. I created two scenes – mainScene and bufferScene. I draw a red cube in bufferScene, then render the bufferScene to the texture bufferTexture using WebGLRenderTarget . bufferTexture as the texture of mainScene.
When I enter VR mode and turn the head to observe the entire scene, mainScene is fine, but the cube in bufferScene is rendered by split screen, and it will follow my head movement. Generally speaking, in the vr scene, the object should not follow the head movement. What caused this situation?
I have put the code in codeopen.

var mainScene = new THREE.Scene();
mainScene.position.set(0,0,0);
var width = window.innerWidth;
var height = window.innerHeight;
var camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 10;

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.vr.enabled = true;
document.body.appendChild( renderer.domElement );
document.body.appendChild( WEBVR.createButton( renderer ) );

//This is where we create our off-screen render target
//Create a different scene to hold our buffer objects
var bufferScene = new THREE.Scene();
//Create the texture that will store our result
var bufferTexture = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight,
                                { minFilter: THREE.LinearFilter,
                                    magFilter: THREE.NearestFilter});

//Let's create a red box
var redMaterial = new THREE.MeshBasicMaterial({color:0xF06565});
var boxGeometry = new THREE.BoxGeometry( 5, 5, 5 );
var boxObject = new THREE.Mesh( boxGeometry, redMaterial );
boxObject.position.z = -10;
bufferScene.add(boxObject);//We add it to the bufferScene instead of the normal scene!

////////////////////////////Now we use our bufferTexture as a material to render it onto our main scene
var boxMaterial = new THREE.MeshBasicMaterial({map:bufferTexture.texture});
var boxGeometry2 = new THREE.BoxGeometry( 5, 5, 5 );
var mainBoxObject = new THREE.Mesh(boxGeometry2,boxMaterial);
mainBoxObject.position.set(0,0,-10);
mainScene.add(mainBoxObject);

///And a blue plane behind it
var blueMaterial = new THREE.MeshBasicMaterial({color:0x7074FF})
var plane = new THREE.PlaneBufferGeometry( window.innerWidth, window.innerHeight );
var planeObject = new THREE.Mesh(plane,blueMaterial);
planeObject.position.z = -15;
mainScene.add(planeObject);

//Render everything!
function render() {
  renderer.setAnimationLoop( render );
  renderer.render(bufferScene,camera,bufferTexture,true);
  renderer.render( mainScene, camera );

}
render();
Three.js version
  • Dev
  • r100
  • …
Browser
  • All of them
  • Chrome
  • Firefox
  • Internet Explorer
OS
  • All of them
  • Windows
  • macOS
  • Linux
  • Android
  • iOS
Hardware Requirements (graphics card, VR Device, …)

Author: Fantashit

1 thought on “WebGLRenderTarget has some problems in VR mode”

  1. I misread before. The render target is getting stereoscopic rendering because VR is enabled, which synthesizes the stereo camera. Try disabling and re-enabling VR when rendering the buffer scene:

         function render() {
          renderer.setAnimationLoop( render );
          renderer.vr.enabled = false;
          renderer.render(bufferScene,camera,bufferTexture,true);
          renderer.vr.enabled = true;
          renderer.render( mainScene, camera );
        }

Comments are closed.