仅在WebGL中绘制网格的一部分

Question

我有一个旋转和移动的网格.我想只画一部分.

例如:

在我的WebGL游戏中,我有一个轨迹图网格,我只想显示红色圆圈中的部分(在左上角),其余的我不想绘制.

我应该考虑使用片段着色器吗？或者我可以以某种方式告诉轨迹图网格只绘制圆圈​​中的部分？

谢谢!

PS:如果我可以在圆圈周围淡出轨道地图而不是仅仅将其切掉,那将会很棒.:-)

Answer 1

有几种方法可以实现这一点,对于简单的矩形切口,您可以使用这样的剪刀测试:

gl.enable(gl.SCISSOR_TEST);
gl.scissor(0,gl.canvas.clientHeight-256,256,256);
// draw track here
gl.disable(gl.SCISSOR_TEST);

对于圆形缺口,你可以使用一个模板缓存,绘制一个磁盘模板缓存,使制版和绘制你的轨迹,然而,这需要你设置使用帧缓冲带连接模板缓冲区的渲染管线,其可能有点喧宾夺主,只给出一个尖锐的镂空.

使用自定义片段着色器并与前面提到的剪刀矩形混合似乎是最合理的解决方案,如前所述设置剪刀,然后在片段着色器中:

void main(void) {
    // do what you need to do to get the final color
    gl_FragColor.rgb = finalColor;
    gl_FragColor.a = smoothstep(128.,100.,length(min(vec2(gl_FragCoord.x,resolution.y-gl_FragCoord.y),256.)-128.));
}

我们在这里做的是计算当前像素到剪刀区域中心的距离(假设在屏幕的左上角是256x256)然后在100到128之间进行线性淡出.结果是一个掩码看起来像这样:

请注意,从技术上讲,我们不再需要剪刀测试,因为片段着色器中的蒙版会遮盖圆形区域之外的所有内容.然而,保持剪刀测试确保我们只在我们需要的地方进行片段着色器工作.