Clipping plane for InstancedBufferGeometry

Questions
,
1

Is there a way to clip an InstancedBufferGeometry? Below are the vertex and the fragment shaders i use.

// vertex shader
attribute vec3 instancePosition;
varying vec3 vColor;
varying vec3 vOriginalPos;

void main() {
  vOriginalPos = position;
  vColor = color;
  vec3 transformedPos = position + instancePosition;
  gl_Position = projectionMatrix * modelViewMatrix * vec4( transformedPos, 1.0 );
}

// fragment shader
varying vec3 vColor;
varying vec3 vOriginalPos;

void main() {
  gl_FragColor = vec4( vColor, 1.0 );
}
2

Solving this is a bit tricky since you need to do a few things. Here is a live example demonstrating the following steps: https://jsfiddle.net/ce2g6an8/4/

  • You have to configure your (raw) shader material to support clipping:
var plane = new THREE.Plane( new THREE.Vector3( 1, 0, 0 ), 0 );

var material = new THREE.RawShaderMaterial( {
	vertexShader: document.getElementById( 'vertexShader' ).textContent,
	fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
	clipping: true,
	clippingPlanes: [ plane ]
} );
  • You have to enable local clipping
renderer.localClippingEnabled = true;
  • The most complex part is to enhance your shader with the respective clipping shader chunks. You need the code from clipping_planes_pars_vertex, clipping_planes_vertex, clipping_planes_pars_fragment and clipping_planes_fragment. Depending on your code, you can’t include all chunks but have to copy the code into your project and customize it.
3

I have already prepared this configuration. Actually i use THREE.ShaderMaterial, but when i include the shader chunks i get an exception. So i try to figure out how can i apply the clipping without the shader chunks…

4

Can you please share your code as a live example?

5

It’s a bit difficult to show a live example. The application has a lot of dependencies. I will try to adapt to the jsfiddle example. Hopefully it will work. But thanks!

6

Great it’s working, thanks.

1 Like