1

I'm looking into making kind of a portal effect using Three.js.

The main idea is to be able to see through multiple windows another Scene.

Exactly like in this example : https://www.ronja-tutorials.com/post/022-stencil-buffers/ (See gif in article, too big to upload here)

I found an exact example of what i'm trying to do using three.js.

Here is the link : https://sites.google.com/site/cgwith3js/home/masking-with-stencil

The fiddle was not working but I changed it to make it work : http://jsfiddle.net/yzhreu6p/23/

  scene = new THREE.Scene();
  sceneStencil = new THREE.Scene();
...
  scene.add(box); // red one
...
  function animate() {

  requestAnimationFrame(animate);
  renderer.clear();
    
  // animate the box
  box.position.x = Math.cos(clock.getElapsedTime()) * 10;

  var gl = renderer.getContext();

  // enable stencil test
  gl.enable(gl.STENCIL_TEST);
  //renderer.state.setStencilTest( true );

  // config the stencil buffer to collect data for testing
  gl.stencilFunc(gl.ALWAYS, 1, 0xff);
  gl.stencilOp(gl.REPLACE, gl.REPLACE, gl.REPLACE);

    // render shape for stencil test
  renderer.render(sceneStencil, camera);
  
  // set stencil buffer for testing
  gl.stencilFunc(gl.EQUAL, 1, 0xff);
  gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP);

  // render actual scene
  renderer.render(scene, camera);

  // disable stencil test
  gl.disable(gl.STENCIL_TEST);
  }

Then I reuse the code in my project where I have kind of a town with buildings, and the hidden scene has a nyan cat textured box.

The problem I'm having is that the planes are disappearing when a building is behind and more serious problem, when there are buildings back the nyan cat texture, we see the texture in the building.

To better explain here is an image

I'm looking for a solution where the images are not visible inside the building, I found people that are talking about stencilMask but it's new for me.

Do I need to create another scene to make it work independently ?

If someone can help me, thank you for reading.

Rabbid76
  • 202,892
  • 27
  • 131
  • 174
Anat
  • 11
  • 2
  • Do not include the WebGL tag with the three.js tag. – Rojo Mar 18 '21 at 17:47
  • @Rojo in this case I believe the `webgl` tag is warranted, since Anat is performing raw WebGLContext API calls on top of Three.js when making stencil tests, such as `gl.stencilFunc(gl.ALWAYS, 1, 0xff);` – M - Mar 19 '21 at 02:23

0 Answers0