WebGL：如何使对象的一部分透明？

Question

我的浏览器中有一个3D球，现在我想在其上挖一个洞以查看其背面。

我如何使其成为可能？

例如，我希望立方体的白色三角形部分可以是透明的（我的意思是我们可以看到立方体后面的背景）。

我试图在片段着色器中更改Alpha（代码中的区域是正方形而不是三角形，没关系）：

<script id="shader-fs-alpha" type="x-shader/x-fragment">
    precision mediump float;

    varying vec4 vColor;

    uniform float uAlpha;

    void main(void) {
      if( gl_FragCoord.x < 350.0 && gl_FragCoord.x > 300.0
        && gl_FragCoord.y < 300.0 && gl_FragCoord.y > 230.0
        ) {
        gl_FragColor = vec4(0, 0 ,0, 0.0);
      } else {
        gl_FragColor = vec4(vColor.rgb, 1.0);
      }
    }
</script>

这实际上有效，但是该区域变为白色（不透明），因此我尝试启用混合，但这使整个立方体透明。

所以现在我想如果有一种bleanding在片段着色器中启用的方法，可以在else块中禁用它。

这是我的整个项目https://gist.github.com/royguo/5873503：

• index.html：此处的着色器脚本。
• buffers.js：这里的所有对象。
• shaders.js：初始化着色器。

Answer 1

您应该使用模板缓冲区。2个步骤：一，在模板上绘制三角形。二，用模板测试绘制立方体。

// you can use this code multiple time without clearing stencil
// just increment mask_id
mask_id = 1;

// allow to draw inside or outside mask
invert_mask = false;

1）激活模板缓冲区。对其进行配置：无需测试并写入mask_id值

glEnable(GL_STENCIL_TEST);
glStencilOp(GL_KEEP, GL_KEEP, GL_REPLACE);
glStencilFunc(GL_ALWAYS, mask_id, 0);

2）删除颜色和深度书写

glDepthMask(GL_FALSE);
glColorMask(GL_FALSE, GL_FALSE, GL_FALSE, GL_FALSE);

3）在这里画你的三角形:)

4）为立方体启用深度和颜色写入

glColorMask(GL_TRUE, GL_TRUE, GL_TRUE, GL_TRUE);
glDepthMask(GL_TRUE);

5）为多维数据集配置模板：无写入和测试模板值

glStencilOp(GL_KEEP, GL_KEEP, GL_KEEP);
glStencilFunc(invert_mask ? GL_NOTEQUAL : GL_EQUAL, mask_id, 0xff);

6）在这里画你的立方体：）

7）清理：删除模板测试

glDisable(GL_STENCIL_TEST);

创建opengl上下文时，请不要忘记请求模具（请参阅WebGLContextAttributes，getContext的第二个参数）

该代码在Ios平台上的Opengl ES 2上运行良好。它不依赖任何扩展。WebGL使用相同的API。

唯一的小缺陷：三角形边框上没有msaa。天下没有免费的午餐 ：）

Answer 2

或者从球网格中删除一些三角形，或者对其应用具有透明部分的纹理，打开混合并关闭任何类型的剔除，这样您就不会丢失后向三角形。

编辑：

这里有一个关于 webGL 混合的教程：http://learningwebgl.com/blog/?p =859 您有多种模式可供选择如何混合两个像素，并且通过调整 alpha 值，您可以得到任何您想要的。

最终，您在所有地方应用 alpha 设置为 1.0 的纹理，除了那些应该是“空心”的部分，然后启用混合。我希望我说清楚了。

提示：不要阅读文档（有时可能比帮助更令人困惑），而是尝试这个http://www.nihilogic.dk/labs/webgl_cheat_sheet/WebGL_Cheat_Sheet.htm。它以非常好的方式列出了所有功能。