Stencil buffer in Studio

Technical Support
1

Would like to check if stencil buffer is possible in Studio?

I wanted to achieve a look through glass effect(occlusion/mask) where meshes appear when you look through another mesh(inverse of the build-in hider material) and was doing some test but could not even achieve a basic stencil test → always fail op that will hide the mesh.

// remove existing material
ecs.Material.remove(world, eid)
// stencil has to be set to true for the webgl renderer
world.three.renderer.stencil = true

const threeObj = world.three.entityToObject.get(eid)
threeObj.renderOrder = 1  // set render order after the mesh that will write to stencil buffer

// hidden object
const hiddenMat = new THREE.MeshBasicMaterial({color: 0xff0000})
hiddenMat.stencilTest = true
hiddenMat.stencilFunc = THREE.NeverStencilFunc

// show if stencil buffer is set to 8
// hiddenMat.stencilRef = 8
// hiddenMat.stencilFunc = THREE.EqualStencilFunc

threeObj.traverse((n:any) => {
  if (n.isMesh) n.material = hiddenMat
})

The above is in a state of the state machine. I’m still seeing a red object(seems like the color is set correctly) being rendered. I’m not that proficient with graphics but my understanding is that if the stencil function is NeverStencilFunc then nothing should be drawn??

I have looked though the older sample project( three.js: Stencil Materials | 8th Wall Playground | 8th Wall ) that uses XR8.run to set some configs but I’m not sure what is the equivalent in Studio.

2

You might consider moving it into a Camera Pipeline Module which unlike an ECS Component runs through the engine, XR8. You would create the module above your Custom Component and then use the Custom Component to actually register it with XR8 from the window.

You’ll notice that this entire file is a Camera Pipeline Module: three.js: Stencil Materials | 8th Wall Playground | 8th Wall

1 Like
3

I’m encountering this on my own project as well. It seems like we’re actually out of luck unless we can target the Three.js renderer before it’s creation and add the { stencil: true } param to it’s constructor.

I can’t see anywhere where this might be possible using the studio and it’s API unless you know of any other way? Perhaps I’ll have to rebuild in the legacy editor?

4

I don’t think it’s possible to do this, your best bet would be to re-create the project in the legacy editor until this is possible.

1 Like
5

I am using a hack at the moment, using depth instead of stencil to get a similar effect

// material for the mask, render order 0
const maskMat = new THREE.MeshBasicMaterial({color: 0x00FF00})
maskMat.colorWrite = false
maskMat.depthWrite = true

// material for the object, render order 1
const hiddenMat = new THREE.MeshBasicMaterial({color: 0xff0000})
hiddenMat.depthWrite = false
hiddenMat.depthFunc = THREE.GreaterEqualDepth

The mask object will be invisible but still writes to depth, the hidden object needs another mesh to be in front of it to be visible, and it doesn’t block other objects as it doesn’t write to depth.

As you can see, any 3D object, not just the mask material object, that writes to depth will reveal the hidden object.

6

Thanks for the tip! I don’t think it’d work in my case, I had a lot of overlapping stencils with parallax effects (basically a comic book) so I was relying on the separate stencil refs.

Ended up using the legacy editor. I know this isn’t the place for feedback but man this ECS system is a hastle to deal with. Raw three.js is my happy place I guess haha

1 Like