title: Clipping a volume in Three.Js giving Black area instead of Inner Material
body: <p>I am trying to clip a volume from all three planes in ThreeJS to look into the inner structure. </p>
  
  <p>Clipping is done inspired and implemented in fragment shader by discarding the drawing of the pixel if it is beyond your clipping limit:</p>
  
  <pre><code>gl_FragColor  = accumulatedColor;
  
  if(worldSpaceCoords.x &lt; xClippingPlaneMin) discard;
  if(worldSpaceCoords.x &lt; xClippingPlaneMin) discard;
  if(worldSpaceCoords.z &lt; zClippingPlaneMin) discard;
  if(worldSpaceCoords.z &gt; zClippingPlaneMax) discard;
  if(worldSpaceCoords.y &lt; yClippingPlaneMin) discard;
  if(worldSpaceCoords.y &gt; yClippingPlaneMax) discard;
  </code></pre>
  
  <p>And have circulated the above information by passing through the shader material (Two pass Volume Rendering) as shown in below code.</p>
  
  <pre><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 );
  </code></pre>
  
  <p>It looks something of this sort black boundary which I want to be the rendered surface.<a href="https://i.stack.imgur.com/qiiX9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qiiX9.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/77lKq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/77lKq.png" alt="enter image description here"></a></p>
  
  <p><strong>Update</strong> : 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.</p>
  
  <p>I looked into these examples <a href="https://threejs.org/examples/webgl_clipping.html" rel="nofollow noreferrer">Clipping</a>, <a href="https://threejs.org/examples/webgl_clipping_advanced.html" rel="nofollow noreferrer">Advance Clipping </a> and <a href="https://threejs.org/examples/webgl_clipping_intersection.html" rel="nofollow noreferrer">Intersection Clipping </a> , but these were not of much use so used the coordinate based discarding and clipping way to achieve my goal.</p>