关于Three.js中着色器(顶点和碎片着色器)的一些基本问题

时间:2017-07-09 21:10:22

标签: three.js glsl webgl fragment-shader vertex-shader

我问自己一些关于片段和顶点着色器的一般性理解问题。

我们在讲座中得知,在Tree.js的自定义着色器中计算和使用透明度是不可能的。

这是一个问题:任何人都可以向我解释为什么会出现这种情况以及如何使用着色器透明化(例如Material中的“普通”透明度参数,您可以这样说:transpareny:true)。< / p>

1 个答案:

答案 0 :(得分:0)

这取决于你和讲师的意思和透明度。&#34;为清楚起见,以下内容非常简化。

透明对象的第一部分是深度排序。创建three.js材质时,material.transparent = true;启用深度排序,根据相机的深度将场景对象置于渲染顺序,而不是添加顺序。这可确保透明对象正确混合其颜色。这可能是讲师想要在着色器中难以理解的,因为着色器专注于绘制当前片段,并且没有关于周围场景的大量信息。

透明度的第二部分 - 您可能更熟悉的部分 - 是为材质设置不透明度值。如果查看任何片段着色器,它最后要做的就是设置片段的颜色,即vec4

gl_FragColor = something;

vec4的第四个值是alpha(不透明度)值。您可以手动将片段设置为半透明红色,如下所示:

gl_FragColor = vec4(1.0, 0.0, 0.0, 0.5);

但同样,如果您的对象没有正确深度排序,透明度可能无法达到预期效果。

关于如何将值传递给着色器的问题,我同意上述评论:您的第二个问题应该分成一个单独的帖子。

也就是说,uniform s,attributevarying是着色器中的常规和基本类型限定符。每个都有非常具体的用途,听起来你不太了解差异(这很好,你还在学习)。我建议你做一些关于如何恰当地使用它们的更多内容(当然,StackOverflow是一个很好的答案like this one)。

相关问题