three.js - glClipPlane - webGL 中有等效的吗？

Question

我有一个 3D 网格。是否有可能像 OpenGL 中的 glClipPlane 一样渲染剖面 View (裁剪)？

我使用的是 Three.js r65。

我添加的最新着色器是:
片段着色器:

uniform float time;
uniform vec2 resolution; 
varying vec2 vUv; 
void main( void ) 
{ 
vec2 position = -1.0 + 2.0 * vUv; 
float red = abs( sin( position.x * position.y + time / 2.0 ) ); 
float green = abs( cos( position.x * position.y + time / 3.0 ) ); 
float blue = abs( cos( position.x * position.y + time / 4.0 ) ); 
if(position.x > 0.2  && position.y > 0.2 ) 
{  
discard; 
 } 
gl_FragColor = vec4( red, green, blue, 1.0 ); }

顶点着色器:

varying vec2 vUv;
void main() 
{ 
vUv = uv;
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 ); 
gl_Position = projectionMatrix * mvPosition; 
}

Answer 1

不幸的是，在指定 WebGL 的 OpenGL-ES 规范中，没有裁剪平面，并且顶点着色器阶段缺少 gl_ClipDistance 输出，而平面裁剪是在现代 OpenGL 中实现的。

但是，您可以使用片段着色器来实现逐片段裁剪。在片段着色器中，根据您的剪辑平面集测试传入片段的位置，如果片段未通过测试，则丢弃它。

更新

让我们看看OpenGL固定功能管线中如何定义裁剪平面:

void ClipPlane( enum p, double eqn[4] );

The value of the first argument, p, is a symbolic constant,CLIP PLANEi, where i is an integer between 0 and n − 1, indicating one of n client-defined clip planes. eqn is an array of four double-precision floating-point values. These are the coefficients of a plane equation in object coordinates: p1, p2, p3, and p4 (in that order). The inverse of the current model-view matrix is applied to these coefficients, at the time they are specified, yielding

p' = (p'1, p'2, p'3, p'4) = (p1, p2, p3, p4) inv(M)

(where M is the current model-view matrix; the resulting plane equation is unde- fined if M is singular and may be inaccurate if M is poorly-conditioned) to obtain the plane equation coefficients in eye coordinates. All points with eye coordinates transpose( (x_e, y_e,z_e, w_e) ) that satisfy

(p'1, p'2, p'3, p'4)   x_e  ≥ 0
                      y_e 
                      z_e 
                      w_e 

lie in the half-space defined by the plane; points that do not satisfy this condition do not lie in the half-space.

所以你要做的是，添加制服来传递剪辑平面参数 p' 并在顶点和片段着色器之间添加另一个出/入变量对以传递顶点眼空间位置。然后在片段着色器中，您要做的第一件事是执行剪辑平面方程测试，如果未通过，则丢弃该片段。

在顶点着色器中

in  vec3 vertex_position;
out vec4 eyespace_pos;

uniform mat4 modelview;

void main()
{
    /* ... */
    eyespace_pos = modelview * vec4(vertex_position, 1);
    /* ... */
}

在片段着色器中

in vec4 eyespace_pos;

uniform vec4 clipplane;

void main()
{
    if( dot( eyespace_pos, clipplane) < 0 ) {
        discard;
    }
    /* ... */
}