Perspective Camera Clipping giving rest of the region black

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;

Hello Ayush,

The camera clipping happens when the object comes closer to the camera and the camera’s near plane frustum is greater than the distance between the camera and the object.

In the below code, you have defined the near plane as 1.0. So what I could suspect is the your object is closer to your camera than this distance.

You can either reduce the near plane defined in your PerspectiveCamera definition or move your camera back a little.

Hi, Thanks but I know why this clipping is happening.
Actually I want this clipping to happen that’s why have the camera variables like this.
But instead of black clipped surface, I want the clipped surface to be rendered so that I can see inside the volume as I go inside from any direction.

Hope my question is clear now…

The camera clipping will prevent rendering of the material, so you need another solution.

If you could clamp the initial position of the marching ray depending on the camera distance… It think that should be possible, but WebGL 1.0 has a lot of restrictions on loops, that you may avoid by using WebGL 2.0, if you don’t already.

Edit: Actually, I don’t think the loop restrictions have to be a problem, as long as you are able to offset the start (and end) position.

I know how to adjust camera distance, but not sure how to clamp the initial position of ray marching, which sounds convincing to me, that rendering will start from that point only so will show that as surface. In this way I can look inside the volume.

Can you help me with which parameters to tweak in order to clamp the initial position of ray marching?
Sorry, I am not very familiar with the whole Volume Rendering stuff. Trying to catch up with this project.


I am not familiar with it either. But judging from your code above:

I would guess you find some clues in the first // ... part, regarding where the samples are collected from, as function of loop iteration (and camera position etc.).

I am trying to transfer the camera coordinates whenever I am changing the orientation of the volume with my mouse. Passing that value for the clipping. Let’s see how that works. Will update the result, in case of success.