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

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

我怎样才能使它成为可能

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

我尝试更改片段着色器中的alpha（代码中的区域是正方形而不是三角形，这无关紧要）：

精密中泵浮子；
可变vec4颜色；
均匀浮动uAlpha；
真空总管（真空）{
如果（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）；
}否则{
gl_FragColor=vec4（vColor.rgb，1.0）；
}
}

这实际上是可行的，但是这个区域变成了白色（不是透明的），所以我试着启用混合，但这使整个立方体透明

所以现在我想如果有办法在片段着色器中启用

bleanding

，我可以在

else

块中禁用它。

以下是我的整个项目：

• index.html：此处为着色器脚本
• buffers.js：所有的obejct都在这里
• shaders.js:Init着色器

---

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

编辑：

以下是关于webGL中混合的教程： 你有多种模式可以选择如何混合两个像素，通过调整alpha值，你可以得到你想要的任何东西

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

---

提示：与其阅读文档（有时会比帮助更让人困惑），不如试试这个，。它以非常好的方式列出了所有函数。

您可以将没有对象（或对象内部）的部分场景渲染到纹理，然后将纹理投影到对象前面的曲面上。只需确保曲面直接面向摄影机（与cam空间中的x-y平面平行），并且纹理以与屏幕相同的中心和透视进行渲染

如果需要帮助，请使用。您还应该检查灯光选项，以确保曲面本身不受对象获得的照明的影响

---

另外：

您应该使用模具缓冲区。第二步：第一步，在模具上画三角形。第二，用模板画立方体测试

// 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） 激活模具缓冲区。配置：不测试和写入掩码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上下文时不要忘记请求模具（请参阅getContext的第二个参数WebGLContextAttributes）

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

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

尝试添加这些行

glEnable (GL_BLEND);                                                              
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

---

OpenGL ES对我很有用。

请提供更多详细信息？我真的需要你的帮助，谢谢！

glEnable (GL_BLEND);                                                              
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);