<h5 dir="auto">Description of the problem</h5>
<p dir="auto">I am trying to render a scene into another scene using  <strong>WebGLRenderTarget</strong> in VR mode. I created two scenes - <code class="notranslate">mainScene</code> and <code class="notranslate">bufferScene</code>. I draw a red cube in <code class="notranslate">bufferScene</code>, then render the <code class="notranslate">bufferScene</code> to the texture <code class="notranslate">bufferTexture</code> using <strong>WebGLRenderTarget</strong> . <code class="notranslate">bufferTexture</code> as the texture of <code class="notranslate">mainScene</code>.<br>
When I enter VR mode and turn the head to observe the entire scene, <code class="notranslate">mainScene</code> is fine, but the cube in <code class="notranslate">bufferScene</code> 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?<br>
I have put the code in <a href="https://codepen.io/zhudongwork/pen/LMwZjv" rel="nofollow">codeopen</a>.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="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();"><pre class="notranslate"><span class="pl-k">var</span> <span class="pl-s1">mainScene</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">Scene</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-s1">mainScene</span><span class="pl-kos">.</span><span class="pl-c1">position</span><span class="pl-kos">.</span><span class="pl-en">set</span><span class="pl-kos">(</span><span class="pl-c1">0</span><span class="pl-kos">,</span><span class="pl-c1">0</span><span class="pl-kos">,</span><span class="pl-c1">0</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">var</span> <span class="pl-s1">width</span> <span class="pl-c1">=</span> <span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-c1">innerWidth</span><span class="pl-kos">;</span>
<span class="pl-k">var</span> <span class="pl-s1">height</span> <span class="pl-c1">=</span> <span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-c1">innerHeight</span><span class="pl-kos">;</span>
<span class="pl-k">var</span> <span class="pl-s1">camera</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">PerspectiveCamera</span><span class="pl-kos">(</span> <span class="pl-c1">70</span><span class="pl-kos">,</span> <span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-c1">innerWidth</span> <span class="pl-c1">/</span> <span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-c1">innerHeight</span><span class="pl-kos">,</span> <span class="pl-c1">1</span><span class="pl-kos">,</span> <span class="pl-c1">1000</span> <span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-s1">camera</span><span class="pl-kos">.</span><span class="pl-c1">position</span><span class="pl-kos">.</span><span class="pl-c1">z</span> <span class="pl-c1">=</span> <span class="pl-c1">10</span><span class="pl-kos">;</span>

<span class="pl-k">var</span> <span class="pl-s1">renderer</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">WebGLRenderer</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-s1">renderer</span><span class="pl-kos">.</span><span class="pl-en">setSize</span><span class="pl-kos">(</span> <span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-c1">innerWidth</span><span class="pl-kos">,</span> <span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-c1">innerHeight</span> <span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-s1">renderer</span><span class="pl-kos">.</span><span class="pl-c1">vr</span><span class="pl-kos">.</span><span class="pl-c1">enabled</span> <span class="pl-c1">=</span> <span class="pl-c1">true</span><span class="pl-kos">;</span>
<span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-c1">body</span><span class="pl-kos">.</span><span class="pl-en">appendChild</span><span class="pl-kos">(</span> <span class="pl-s1">renderer</span><span class="pl-kos">.</span><span class="pl-c1">domElement</span> <span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-c1">body</span><span class="pl-kos">.</span><span class="pl-en">appendChild</span><span class="pl-kos">(</span> <span class="pl-c1">WEBVR</span><span class="pl-kos">.</span><span class="pl-en">createButton</span><span class="pl-kos">(</span> <span class="pl-s1">renderer</span> <span class="pl-kos">)</span> <span class="pl-kos">)</span><span class="pl-kos">;</span>

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

<span class="pl-c">//Let's create a red box</span>
<span class="pl-k">var</span> <span class="pl-s1">redMaterial</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">MeshBasicMaterial</span><span class="pl-kos">(</span><span class="pl-kos">{</span><span class="pl-c1">color</span>:<span class="pl-c1">0xF06565</span><span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">var</span> <span class="pl-s1">boxGeometry</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">BoxGeometry</span><span class="pl-kos">(</span> <span class="pl-c1">5</span><span class="pl-kos">,</span> <span class="pl-c1">5</span><span class="pl-kos">,</span> <span class="pl-c1">5</span> <span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">var</span> <span class="pl-s1">boxObject</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">Mesh</span><span class="pl-kos">(</span> <span class="pl-s1">boxGeometry</span><span class="pl-kos">,</span> <span class="pl-s1">redMaterial</span> <span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-s1">boxObject</span><span class="pl-kos">.</span><span class="pl-c1">position</span><span class="pl-kos">.</span><span class="pl-c1">z</span> <span class="pl-c1">=</span> <span class="pl-c1">-</span><span class="pl-c1">10</span><span class="pl-kos">;</span>
<span class="pl-s1">bufferScene</span><span class="pl-kos">.</span><span class="pl-en">add</span><span class="pl-kos">(</span><span class="pl-s1">boxObject</span><span class="pl-kos">)</span><span class="pl-kos">;</span><span class="pl-c">//We add it to the bufferScene instead of the normal scene!</span>

<span class="pl-c">////////////////////////////Now we use our bufferTexture as a material to render it onto our main scene</span>
<span class="pl-k">var</span> <span class="pl-s1">boxMaterial</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">MeshBasicMaterial</span><span class="pl-kos">(</span><span class="pl-kos">{</span><span class="pl-c1">map</span>:<span class="pl-s1">bufferTexture</span><span class="pl-kos">.</span><span class="pl-c1">texture</span><span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">var</span> <span class="pl-s1">boxGeometry2</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">BoxGeometry</span><span class="pl-kos">(</span> <span class="pl-c1">5</span><span class="pl-kos">,</span> <span class="pl-c1">5</span><span class="pl-kos">,</span> <span class="pl-c1">5</span> <span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">var</span> <span class="pl-s1">mainBoxObject</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">Mesh</span><span class="pl-kos">(</span><span class="pl-s1">boxGeometry2</span><span class="pl-kos">,</span><span class="pl-s1">boxMaterial</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-s1">mainBoxObject</span><span class="pl-kos">.</span><span class="pl-c1">position</span><span class="pl-kos">.</span><span class="pl-en">set</span><span class="pl-kos">(</span><span class="pl-c1">0</span><span class="pl-kos">,</span><span class="pl-c1">0</span><span class="pl-kos">,</span><span class="pl-c1">-</span><span class="pl-c1">10</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-s1">mainScene</span><span class="pl-kos">.</span><span class="pl-en">add</span><span class="pl-kos">(</span><span class="pl-s1">mainBoxObject</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-c">///And a blue plane behind it</span>
<span class="pl-k">var</span> <span class="pl-s1">blueMaterial</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">MeshBasicMaterial</span><span class="pl-kos">(</span><span class="pl-kos">{</span><span class="pl-c1">color</span>:<span class="pl-c1">0x7074FF</span><span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-k">var</span> <span class="pl-s1">plane</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">PlaneBufferGeometry</span><span class="pl-kos">(</span> <span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-c1">innerWidth</span><span class="pl-kos">,</span> <span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-c1">innerHeight</span> <span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">var</span> <span class="pl-s1">planeObject</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">Mesh</span><span class="pl-kos">(</span><span class="pl-s1">plane</span><span class="pl-kos">,</span><span class="pl-s1">blueMaterial</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-s1">planeObject</span><span class="pl-kos">.</span><span class="pl-c1">position</span><span class="pl-kos">.</span><span class="pl-c1">z</span> <span class="pl-c1">=</span> <span class="pl-c1">-</span><span class="pl-c1">15</span><span class="pl-kos">;</span>
<span class="pl-s1">mainScene</span><span class="pl-kos">.</span><span class="pl-en">add</span><span class="pl-kos">(</span><span class="pl-s1">planeObject</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-c">//Render everything!</span>
<span class="pl-k">function</span> <span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-s1">renderer</span><span class="pl-kos">.</span><span class="pl-en">setAnimationLoop</span><span class="pl-kos">(</span> <span class="pl-s1">render</span> <span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-s1">renderer</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-s1">bufferScene</span><span class="pl-kos">,</span><span class="pl-s1">camera</span><span class="pl-kos">,</span><span class="pl-s1">bufferTexture</span><span class="pl-kos">,</span><span class="pl-c1">true</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-s1">renderer</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span> <span class="pl-s1">mainScene</span><span class="pl-kos">,</span> <span class="pl-s1">camera</span> <span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-kos">}</span>
<span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<h5 dir="auto">Three.js version</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Dev</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> r100</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> ...</li>
</ul>
<h5 dir="auto">Browser</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> All of them</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Chrome</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Firefox</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Internet Explorer</li>
</ul>
<h5 dir="auto">OS</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> All of them</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> Windows</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> macOS</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Linux</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Android</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> iOS</li>
</ul>
<h5 dir="auto">Hardware Requirements (graphics card, VR Device, ...)</h5>
<h5 dir="auto">Description of the problem</h5>
<p dir="auto">Similar to the <a href="https://github.com/mrdoob/three.js/pull/14132" data-hovercard-type="pull_request" data-hovercard-url="/mrdoob/three.js/pull/14132/hovercard">addition of renderer.setFramebuffer</a> which fixes this issue specifically for shadow maps, the issue also applies to any WebGLRenderTarget usage.</p>
<p dir="auto">I have some ideas how to fix this, no stripped down test case yet.</p>
<h5 dir="auto">Three.js version</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Dev</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> r99</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> ...</li>
</ul>