CODEWITHSUNDEEP
three.jsglsl
Luis E. Fraguada
Luis E. Fraguada

Reputation: 529

Add clipping to THREE.ShaderMaterial

I'm trying to create a shader that takes into account the clipping planes I'm defining in the scene. These clipping planes work fine for all of the 'vanilla' materials I'm using: THREE.MeshLambertMaterial, THREE.MeshPhongMaterial, and THREE.MeshPhysicalMaterial, but THREE.ShaderMaterial is missing this implementation. This is an example of what I mean: https://jsfiddle.net/fraguada/27LrLsv5/

In this example there are two cubes, one with a THREE.MeshStandardMaterial and one with a material defined by THREE.ShaderMaterial. The cube with a THREE.MeshStandardMaterial clips ok. The cube with THREE.ShaderMaterial does not clip.

(I'm not typically defining the vertex/fragment shader in script tags as I show in the jsfiddle, instead I'm defining them in a similar manner to this: https://github.com/mrdoob/three.js/blob/dev/examples/js/shaders/BasicShader.js.)

So, a few questions:

  1. Should THREE.ShaderMaterial include Clipping Planes out of the box? (there is a clipping property, but not sure what it enables)
  2. If not, how could I modify this shader to include the necessary params and shader chunks to enable clipping?

Upvotes: 5

Views: 2960

Answers (1)

neeh
neeh

Reputation: 3025

Actually, clipping is done inside the Three.js shaders.

To make it work, you have to handle it inside your shader, by adding those 4 "shader chunks" :

You can access those chunks by simply adding #include <(chunk name)> to your shaders.

Then, set material.clipping = true; and it should work.

Check this fiddle.

Note

To make your shader work, I also added begin_vertex.glsl and project_vertex.glsl.

I checked the current phong shader implementation to understand where to put those chunks.

Note 2

This code should work with a shader implemented with an array of strings but note that you can also reference shader chunks with THREE.ShaderChunk[(chunk name)].
This should be more suitable in your case.

Upvotes: 15

Related Questions