Hi, so I’m trying to learn how to setup a custom render pipeline in 8th wall using three.js
Maybe start from the basic where we have 2 Null Parent with their own scene, and we want to render them independently from each other first, then in the end, we compose them back together. Like this:
here is the Spark project file
multiple scenes with each dedicated occulder.arexport (1.0 MB)
How to do this in 8th Wall using three.js renderer?
My initial thought was to do something like this in three.js:
//pseudo-code setup blend 2 occlusion scene
renderer.autoClear = false; // to set manual clear render buffer
var sceneObjectA = new THREE.Scene(); //create scene for ObjectA occluder and ObjectA
var sceneObjectB = new THREE.Scene(); //create scene for ObjectB occluder and ObjectB
// ----------- sceneObjectA ---------- //
// OccluderA
// load model dan material
// var OccluderA= (The_3dOccluderModel)
// OccluderA.material = (Material with 0 Alpha)
// OccluderA.material.colorWrite = false;
// OccluderA.renderOrder = 2;
// OccluderA.position = (left side)
// OccluderA.scale = (bigger than the objectA to occlude)
sceneObjectA.add( OccluderA ); // add the occluder to the sceneObjectA
// ObjectA
// load model dan material
// var ObjectA = (The_3dModel)
// ObjectA.renderOrder = 1;
// ObjectA.position = (right side as initial position, but then later moves to the left onUpdate)
// ObjectA scale = (smaller than the OccluderA to be occluded)
sceneObjectA.add( ObjectA ); // add ObjectA to the sceneObjectA
// ----------- sceneObjectB ---------- //
// OccluderB
// load model dan material
// var OccluderB= (The_3dOccluderModel)
// OccluderB.material = (Material with 0 Alpha)
// OccluderB.material.colorWrite = false;
// OccluderB.renderOrder = 2;
// OccluderB.position = (left side)
// OccluderB.scale = (bigger than the objectB to occlude)
sceneObjectB.add( OccluderB ); // add the occluder to the sceneObjectB
// ObjectB
// load model dan material
// var ObjectB = (The_3dModel)
// ObjectB.renderOrder = 1;
// ObjectB.position = (right side as initial position, but then later moves to the left onUpdate)
// ObjectB.scale = (smaller than the OccluderA to be occluded)
sceneObjectB.add( ObjectB ); // add ObjectB to the sceneObjectB
// ----------- Render ---------- //
renderer.clear(); // set clear render buffer
renderer.render( sceneObjectA, camera ); // render the first scene
renderer.clearDepth(); // set cleardepth renderer so the first scene can be seen in the next render
renderer.render( sceneObjectB , camera ); //render the second scene on top of the first scene
but I have no idea how to implement that in 8th wall renderer and stuffs like that.
I can’t find any information about multiple scene render passes method in 8th wall or other forums.
Can someone help me figure this out? Thanks