# Clipping a volume in Three.Js giving Black area instead of Inner Material
**URL:** https://discourse.threejs.org/t/clipping-a-volume-in-three-js-giving-black-area-instead-of-inner-material/7572
**Category:** Questions
**Tags:** clipping, textures
**Created:** [May 16, 2019, 12:06am UTC](https://discourse.threejs.org/t/clipping-a-volume-in-three-js-giving-black-area-instead-of-inner-material/7572 "2019-05-16T00:06:38Z")
**Posts on this page:** 3
**Page:** 1
### Author:  [@ayushGHub](https://discourse.threejs.org/u/ayushGHub)
#### Post date: [May 16, 2019, 12:06am UTC](https://discourse.threejs.org/t/clipping-a-volume-in-three-js-giving-black-area-instead-of-inner-material/7572/1 "2019-05-16T00:06:38Z")
##### Description of the problem
I am trying to clip a volume from all three planes in ThreeJS to look into the inner structure.
Clipping is done inspired and implemented in fragment shader by discarding the drawing of the pixel if it is beyond your clipping limit:
```
gl_FragColor = accumulatedColor;
if(worldSpaceCoords.x < xClippingPlaneMin) discard;
if(worldSpaceCoords.x < xClippingPlaneMin) discard;
if(worldSpaceCoords.z < zClippingPlaneMin) discard;
if(worldSpaceCoords.z > zClippingPlaneMax) discard;
if(worldSpaceCoords.y < yClippingPlaneMin) discard;
if(worldSpaceCoords.y > yClippingPlaneMax) discard;
```
And have circulated the above information by passing through the shader material (Two pass Volume Rendering) as shown in below code.
```
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 );
```
It looks something of this sort black boundary which I want to be the rendered surface.
This code is an extension of [lebarba’s code](http://www.lebarba.com/)
I am new to THREE.jS and WebGL. Any help would be appreciated. My motive is to look inside the Volume clipping from all 3 direction plane X, Y and Z respectively. You can think of slicing too like I want to look into the volume at some slice.
I looked into these examples [Clipping](https://threejs.org/examples/webgl_clipping.html), [Advance Clipping](https://threejs.org/examples/webgl_clipping_advanced.html) and [Intersection Clipping](https://threejs.org/examples/webgl_clipping_intersection.html) , but these were not of much use so used the coordinate based discarding and clipping way to achieve my goal.
##### Three.js version
- [] Dev
- [] r104
- [x] r68
##### Browser
- [x] All of them
- [] Chrome
- [] Firefox
- [] Internet Explorer
##### OS
- [x] All of them
- [] Windows
- [] macOS
- [] Linux
- [] Android
- [] iOS
##### Hardware Requirements (graphics card, VR Device, …)
---
### Author:  [@sciecode](https://discourse.threejs.org/u/sciecode)
#### Post date: [May 16, 2019, 1:20am UTC](https://discourse.threejs.org/t/clipping-a-volume-in-three-js-giving-black-area-instead-of-inner-material/7572/2 "2019-05-16T01:20:49Z")
This is happening because you are preventing the pixel from rendering, by discarding it in the fragment shader.
What you should do, instead, is to only allow the ray march to accumulate color and alpha if it’s within the clip boundaries, like this:
```
//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;
}
// ...
}
```
Then you can create `withinBoundaries()` outside your main function:
```
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;
}
```
With these changes, you should see the results you expect. It’s important to note that the clipping coordinates must be within [0,1], otherwise you won’t see any changes.
 
---
### Author:  [@ayushGHub](https://discourse.threejs.org/u/ayushGHub)
#### Post date: [May 16, 2019, 2:15am UTC](https://discourse.threejs.org/t/clipping-a-volume-in-three-js-giving-black-area-instead-of-inner-material/7572/3 "2019-05-16T02:15:23Z")
Thanks, yes my slider to fix the x,y and z are within the 0-1 range. It saved don’t know how many days. I tried changing the worldSpace coordinate too, where rendering was starting(changing start point basically), but that was hack. But this completed it.