If you're interested, consider exploring the stencil buffer:
webgl.stencilFunc()
webgl.stencilOp()
Whether using threejs or not, the concept remains consistent.
- Turn off depth writing
- Disable depth testing
- Turn off color writing
- Enable stencil operation (write a value to the stencil buffer)
- Create an invisible shape that writes to the stencil buffer (consider using a screen space quad)
- Enable steps 1,2,3
- Modify stencil operation (only draw where stencil buffer is set to 1 for instance)
- Render your group
- Adjust stencil op if needed
- Proceed to render the remaining scene outside of the defined shape in step 5 where buffer is 0
As of now, Three.js lacks stencil abstractions unless they've been recently incorporated. This implies that there isn't a "magical" property like transparent which handles various webgl state operations automatically; instead, manual management is required. You will need to access the webgl context and perform webgl operations on it directly.
There are multiple ways to achieve this.
var myScreenSpaceQuad = new THREE.Mesh( new THREE.PlaneBufferGeometry(2,2,1,1), myQuadShaderMaterial )
var scene1 = new THREE.Scene()
var scene2 = new THREE.Scene()
var sceneMask = new THREE.Scene()
sceneMask.add(myScreenSpaceQuad)
//...
myRenderFunction(){
//gl stencil op
//...
myRenderer.render(myCamera, sceneMask)
//more stencil
//...
myRenderer.render(myCamera, scene1)
//some more stencil...
myRenderer.render(myCamera, scene2)
}
I plan to provide a functional example. For guidance on creating a screen space quad, refer to this.