GLTF & layering- moved objects up a layer are clipped/hidden

Question

I’m attempting to move children of a glft scene up a layer, and apply a render pass. Moving the children up a level I’m able to render them differently, but while they are positioned correctly, they are now clipped/cut off from the scene they are still a part of. How can they appear in place?

glft scene as imported, all default layer

glft scene objects moves layers(1), hidden

Working Fiddle: https://jsfiddle.net/3quhb1k8/30/

    const gLoader = new THREE.GLTFLoader();
const scene = new THREE.Scene();
const renderer = new THREE.WebGLRenderer();
gLoader.load('https://s3.amazonaws.com/headless.frol.us-uploads/demo.glb', (gltf) => {
  const objScene = gltf.scene;
  objScene.children.forEach((child) => {
    const lowerName = child.name.toLowerCase();
      if (lowerName.includes('romancolor')) {

        child.layers.set(1);
      }
  });
  gltf.scene.position.z += 120;
  gltf.scene.position.x = 110;
  window.gg = gltf.scene;
  scene.add(gltf.scene);
}, undefined, (error) => {
  throw new Error(error);
});

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var camera = new THREE.PerspectiveCamera(60, window.innerWidth/ window.innerHeight, 1, 10000);
camera.position.set(-10, 10, -5);
camera.layers.enable(1);


var controls = new THREE.OrbitControls(camera, renderer.domElement);
const light = new THREE.AmbientLight(0xffffff, 1);
light.layers.enableAll();
scene.add(light);

/// ///////////////////////////////////////////////////////////////////
// Effects
/// ///////////////////////////////////////////////////////////////////
const filmPass = new THREE.FilmPass(
  0.35, // noise intensity
  0.025, // scanline intensity
  648, // scanline count
  true, // grayscale
);
filmPass.renderToScreen = true;
const composer = new THREE.EffectComposer(renderer);
composer.addPass(new THREE.RenderPass(scene, camera));
composer.addPass(filmPass);

render();
function render(){
  requestAnimationFrame(render);

  renderer.autoClear = false;
  renderer.clear();

  camera.layers.set(1);
  composer.render();
  renderer.render(scene, camera);

  renderer.clearDepth();
  camera.layers.set(0);
  renderer.render(scene, camera);
  
}```

user_5250847 · Answer

The problem is the order of your renderings. You first render the group of trees and then the floor. So clearing the depth buffer after the first render pass has no effect. The floor will cover the trees and produce the mentioned clipping.

If you switch the render order, things will look better. Notice however that post-processing was removed from the demo since you can't use this approach to selectively post-process parts of the scene.

const gLoader = new THREE.GLTFLoader();
const scene = new THREE.Scene();
const renderer = new THREE.WebGLRenderer();

gLoader.load('https://s3.amazonaws.com/headless.frol.us-uploads/demo.glb', (gltf) => {
  const objScene = gltf.scene;
  objScene.children.forEach((child) => {
    const lowerName = child.name.toLowerCase();
      if (lowerName.includes('romancolor')) {
        child.layers.set(1);
      }
  });
  gltf.scene.position.z += 120;
  gltf.scene.position.x = 110;
  scene.add(gltf.scene);
}, undefined, (error) => {
  throw new Error(error);
});

renderer.autoClear = false;
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var camera = new THREE.PerspectiveCamera(60, window.innerWidth/ window.innerHeight, 1, 10000);
camera.position.set(-10, 10, -5);

var controls = new THREE.OrbitControls(camera, renderer.domElement);
const light = new THREE.AmbientLight(0xffffff, 1);
light.layers.enableAll();
scene.add(light);


render();
function render(){
  requestAnimationFrame(render);

  renderer.clear();

  camera.layers.set(0);
  renderer.render(scene, camera);

  camera.layers.set(1);
  renderer.render(scene, camera);
  
}

body{
  overflow: hidden;
  margin: 0;
}

GLTF & layering- moved objects up a layer are clipped/hidden

1 Answers