opengl - WebGL 与 openGL 中的着色器？

Question

关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。












想改进这个问题？将问题更新为 on-topic对于堆栈溢出。

6年前关闭。




Improve this question




我想使用着色器在 WebGL 中使用，特别是在 three.js 中。 WebGL 和three.js 是否有特定版本的GLSL？

Answer 1

WebGL 着色器遵循 GLSL ES 1.017 规范

https://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf

这在几个方面与桌面 OpenGL 不同。一个是 GLSL ES 的 1.0 版本，其中作为 GLSL 4.2 版本的桌面 GL(不是 ES)

WebGL GLSL 与互联网上许多关于着色器的文章之间的一大区别是 OpenGL ES 2.0 中没有固定功能管道，因此 WebGL 中没有固定功能管道。

固定功能管道是 OpenGL 1.0 遗留下来的，您可以在其中使用 glLight 之类的命令和 glVertex和 glNormal .然后你的着色器需要一种方法来引用这些数据。在 OpenGL ES 和 WebGL 中，这一切都消失了，因为着色器所做的一切都是 100% 取决于用户。 WebGL 所做的只是让您定义自己的输入(属性、制服)并根据需要命名它们。

WebGL2 着色器遵循 GLSL ES 3.00 规范

https://www.khronos.org/registry/OpenGL/specs/es/3.0/es_spec_3.0.pdf

对于three.js，three.js 是一个3d 引擎，并在生成着色器时提供自己的一组标准输入、名称和其他功能。 See the docs对于一些细节。 The uniforms and attributes provided by default are documented here .您也可以look at the source或 check out an example .

Three.js 还提供了一个叫做 RawShaderMaterial 的东西。这显然不会添加任何预定义的东西，在这种情况下，您只需编写标准的 WebGL GLSL。

可以找到three.js的标准属性和制服here .

至于学习 GLSL 的地方，我真的没有什么建议。这实际上取决于您的总体编程经验水平以及您喜欢学习的方式。我通过看例子而不是阅读手册来学习。也许其他人可以添加一些链接。

Shaders as a concept are pretty simple .您创建一对着色器，使用输入设置它们，调用 gl.drawArrays 或 gl.drawElements 并传入一个计数。你的顶点着色器会被调用 count 次，需要设置 gl_Position .每 1 到 3 次它被称为 WebGL 就会绘制一个点、线或三角形。为此，它会调用您的片段着色器，询问将要绘制什么颜色来制作该像素的每个像素。片段着色器需要设置gl_FragColor .着色器从 attributes 获取数据, uniforms , textures和 varyings . attributes是每个顶点的数据。他们从缓冲区中提取数据，每次顶点着色器迭代每个属性一个数据。 Uniforms就像在着色器运行之前设置全局变量一样。您可以使用 varying 将数据从顶点着色器传递到片段着色器.当调用片段着色器为每个像素提供颜色时，该数据将在为基元(三角形)的每个顶点设置的值之间进行插值或变化；)。

您可以创造性地向着色器提供数据并创造性地使用该数据来设置 gl_Position和 gl_FragColor .我从看例子中得到了大多数想法。

GLSL 本身非常简单。有几种类型int , float , vec2 , vec3 , vec4 , mat2 , mat3 , mat4 .他们回应运营商+ , - , * , /等有一些内置的功能。

您可以在 WebGL Reference Card 的最后 2 页找到所有 GLSL 信息的简洁版本。 .

这对我来说已经足够了。那和看着working programs .

对我来说，与大多数语言相比，一件有趣的事情是 vec 字段和 swizzling 的同义词。以 vec4 为例

vec4 v = vec4(1.0, 2.0, 3.0, 4.0);

可以引用 v的各个组件使用 x,y,z,w或 s,t,u,v或 r,g,b,a或数组样式。所以例如

float red = v.r;  // OR
float red = v.x;  // same thing OR
float red = v.s;  // same thing OR
float red = v[0]; // same thing

你可以做的另一件事是调酒

vec4 color = v.bgra;   // swap red and blue
vec4 bw    = v.ggga;   // make a monotone color just green & keep alpha

你也可以得到子组件

vec2 just_xy = v.xy;