I already have a plane based clipping which is working fine, but I also want to have camera-based clipping where right now I have a black region which is basically clipped.
This looks like this.
I have made changes in the PerspectiveCamera in the code so that zooming in and out is controlled clipping happens.
Is there a way, I can do the rendering of the remaining area which is currently black in color. I want to see the region behind the clipped surface, basically surface rendering…
I am using the code from Lebarba’s Implementation
Sample Code:
container = document.getElementById( 'container' );
camera = new THREE.PerspectiveCamera( 100, window.innerWidth / window.innerHeight, 1.0, 3000.0 );
camera.position.z = 2.0;
var materialFirstPass = new THREE.ShaderMaterial( {
vertexShader: document.getElementById( 'vertexShaderFirstPass' ).textContent,
fragmentShader: document.getElementById( 'fragmentShaderFirstPass' ).textContent,
side: THREE.BackSide,
} );
materialSecondPass = new THREE.ShaderMaterial( {
vertexShader: document.getElementById( 'vertexShaderSecondPass' ).textContent,
fragmentShader: document.getElementById( 'fragmentShaderSecondPass' ).textContent,
side: THREE.FrontSide,
depthWrite: false,
uniforms: { tex: { type: "t", value: rtTexture },
cubeTex: { type: "t", value: cubeTextures['bonsai'] },
transferTex: { type: "t", value: transferTexture },
steps : {type: "1f" , value: guiControls.steps },
alphaCorrection : {type: "1f" , value: guiControls.alphaCorrection },
xClippingPlaneMin : {type: "1f" , value: guiControls.xClippingPlaneMin },
xClippingPlaneMax : {type: "1f" , value: guiControls.xClippingPlaneMax },
yClippingPlaneMin : {type: "1f" , value: guiControls.yClippingPlaneMin },
yClippingPlaneMax : {type: "1f" , value: guiControls.yClippingPlaneMax },
zClippingPlaneMin : {type: "1f" , value: guiControls.zClippingPlaneMin },
zClippingPlaneMax : {type: "1f" , value: guiControls.zClippingPlaneMax }
},
});
sceneFirstPass = new THREE.Scene();
sceneSecondPass = new THREE.Scene();
var boxGeometry = new THREE.BoxGeometry(1.0, 1.0, 1.0);
boxGeometry.doubleSided = true;
var meshFirstPass = new THREE.Mesh( boxGeometry, materialFirstPass );
var meshSecondPass = new THREE.Mesh( boxGeometry, materialSecondPass );
sceneFirstPass.add( meshFirstPass );
sceneSecondPass.add( meshSecondPass );
-----------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------
//Perform the ray marching iterations
for( int i = 0; i < MAX_STEPS; i++) {
// ...
if ( withinBoundaries( currentPosition ) ) {
//Perform the composition.
accumulatedColor += colorSample * alphaSample;
//Store the alpha accumulated so far.
accumulatedAlpha += alphaSample;
}
// ...
}
bool withinBoundaries( vec3 pos ) {
if (
pos.x < xClippingPlaneMin ||
pos.y < yClippingPlaneMin ||
pos.z < zClippingPlaneMin ||
pos.x > xClippingPlaneMax ||
pos.y > yClippingPlaneMax ||
pos.z > zClippingPlaneMax
) return false;
return true;
}