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

这在几个方面与Desktop 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并传入计数。您的顶点着色器将被称为计数时间，需要设置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，{ {1}}。他们回复了运营商mat4，+，-，*等。其中包含一些内置功能。

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

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

对我来说，与大多数语言相比，有趣的事情是vec字段和调配的同义词。例如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

WebGL中的着色器与openGL相比？

1 个答案: