代码之家 › 专栏 › 技术社区 › Ice_Queen1996

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

vertex-shader fragment-shader webgl glsl three.js

0

Ice_Queen1996 · 技术社区 · 9 年前

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

这里有一个问题:有人能向我解释一下为什么会这样,以及如何使用着色器使某些东西透明(例如材质中的“正常”透明度参数,您可以说:transparency:true)。

1 回复 | 直到 9 年前

1

0

TheJim01 9 年前

透明对象的第一部分是深度排序。当你创建一个三。js材料, material.transparent = true; 启用深度排序,根据相机的深度而不是添加顺序,将场景对象放置到渲染顺序中。这可以确保透明对象正确混合其颜色。这可能是讲师打算说的在着色器中很难做到的,因为着色器专注于绘制当前片段,并且没有关于周围场景的太多信息。

透明度的第二部分——这可能是您更熟悉的部分——是为材质设置不透明度值。如果查看任何片段着色器,它所做的最后一件事是设置片段的颜色,这是一个 vec4

gl_FragColor = something;

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

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

关于你关于如何将值传递给着色器的问题,我同意上面的评论:你的第二个问题应该放在单独的帖子中。

也就是说, uniform attribute s、和 varying s是着色器中的通用和基本类型限定符。每一种都有非常具体的用途,听起来你好像不太明白其中的区别(很好,你还在学习)。我建议大家多读一些关于如何正确使用它们的书(当然,StackOverflow是一个很好的答案) like this one