Closed ghost closed 5 months ago
Hello,
I would suggest you to simplify things and not rely on three.js built-in clipping planes functionality. First, it is 2D, so you can use clipping lines instead. I am not sure if NUM_PLANES
preprocessor macro is properly defined when this shader is compiled (and you have hard-coded size 4
anyway, so it seems suspicious). Define you clip lines uniforms when material is created, and update them dynamically if needed.
return {
vertex: `
precision highp float;
precision highp int;
in vec2 position;
${fullInstanceAttr}
${pointInstanceAttr}
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
${pointSizeUniform}
out out vec2 vPosition; // <<<< use 2D position
void main() {
vec4 pos = vec4(position, 0.0, 1.0);
${fullInstanceTransform}
${pointInstanceTransform}
vPosition = pos.xy; // <<<< take it after instance transform is applied if any
gl_Position = projectionMatrix * modelViewMatrix * pos;
${pointSizeAssigment}
}
`,
fragment: `
precision highp float;
precision highp int;
uniform vec3 color;
out vec4 fragColor;
uniform vec3 clipLines[4]; // <<< clip line is defined by normal vector in xy and distance in z
void main() {
bool clipped = true;
#pragma unroll_loop_start
for (int i = 0; i < 4; i++) {
vec3 line = clippingLines[i];
clipped = (dot(vPosition, line.xy) > line.z) && clipped;
}
#pragma unroll_loop_end
if (clipped) discard;
fragColor = vec4(color, 1.0);
}
`
}
_CreateSimpleColorMaterial(instanceType = InstanceType.NONE) {
const shaders = this._GenerateShaders(instanceType, false)
return new three.RawShaderMaterial({
uniforms: {
color: {
value: new three.Color(0xff00ff)
},
clipLines: {
// put your clip lines here
value: [new three.Vector3(1,2,3), new three.Vector3(1,2,3), three.Vector3(1,2,3), three.Vector3(1,2,3)]
}
},
vertexShader: shaders.vertex,
fragmentShader: shaders.fragment,
depthTest: false,
depthWrite: false,
glslVersion: three.GLSL3,
side: three.DoubleSide
})
}
and similarly in _CreateSimplePointMaterial()
.
in scene, I see all geometries use RawShaderMaterial. but I want use clipPlanes to cut geometry. but the implementation of this shader is not very clear.
file path: DxFViewer.js / _GenerateShaders function example:
but is not work。 I see three source code in path(
src/renderers/shaders/ShaderChunk/clipping_planes_fragment.glsl
).Can you help me?