WebGL与openGL中的着色器？

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

WebGL着色器遵循GLSL ES 1.017规范

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

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

固定函数管道是OpenGL 1.0留下的，在OpenGL 1.0中，您可以使用像

glLight

和

glVertex

和

glNormal

这样的命令。然后着色器需要一种引用该数据的方法。在OpenGL ES和WebGL中，所有这些都消失了，因为着色器所做的一切都完全取决于用户。WebGL所做的只是让您定义自己的输入（属性、制服），并根据需要命名它们

WebGL2着色器遵循GLSL ES 3.00规范

至于three.js，three.js是一个3d引擎，在生成着色器时提供自己的一组标准输入、名称和其他功能。了解一些细节。你也可以或

js还提供了一个名为a的东西，它没有添加任何预定义的东西，在这种情况下，您只需编写标准的WebGL GLSL

您可以找到三个.js的标准属性和制服

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

。创建一对着色器，使用输入设置它们，调用gl.DrawArray或gl.drawElements并传入计数。顶点着色器将被称为计数时间，需要设置

gl\u位置

。每隔1到3次，WebGL将绘制一个点、线或三角形。要做到这一点，它将调用你的片段着色器，询问它要绘制的每个像素的颜色。片段着色器需要设置

gl\u FragColor

。着色器从

属性

、

制服

、

纹理

和

变量

获取数据<代码>属性是逐顶点数据。它们从缓冲区中提取数据，每个顶点着色器每次迭代每个属性都有一条数据<代码>制服类似于在着色器运行之前设置全局变量。可以使用

变量

将数据从顶点着色器传递到片段着色器。该数据将被插值或更改；）在为基本体（三角形）的每个顶点设置的值之间，调用片段着色器为每个像素提供颜色

由您创造性地向着色器提供数据，并创造性地使用该数据设置

gl\u位置

和

gl\u颜色

。我从看例子中得到了很多想法

GLSL本身非常直截了当。有几种类型

int

，

float

，

vec2

，

vec3

，

vec4

，

mat2

，

mat3

，

mat4

。它们响应操作符

+

，

-

，

*

，

/

等。有一些内置函数

您可以在本手册的最后两页上找到所有GLSL信息的简洁版本

这对我来说已经足够了。然后看着我

与大多数语言相比，我最感兴趣的是vec字段和swizzling的同义词。例如，vec4

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

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

您可以使用

x、y、z、w

或

s、t、u、v

或

r、g、b、a

或数组样式来引用

v

的各个组件。比如说

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

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;

---

稍微澄清一下。你说它是GLSL的1.0版本，但是你说，OpenGLES2.0中没有固定的函数管道，因此WebGL中没有。我以为你说是v。1.0？所以基本上，为了能够最好地使用webGL，并在Three.js中使用它们，我应该关注GLSL ES 1.0.17，而不是任何更新/不同版本的GLSL？另外，你知道我可以去哪里学习这个版本吗，这样我就不会意外地开始学习固定功能管道或其他东西了？规范似乎有点密集。更新的答案。至于WebGL 1.0版本，则基于OpenGL ES 2.0，后者使用GLSL ES 1.0。17@gmanswizzle是什么意思？它意味着交换频道。示例x->y，y->z，r->g，a->b。如上所述，bgra将

oldColor

分配给

newColor

，但将红色和蓝色交换。与执行

vec4 newColor=vec4（oldColor.b、oldColor.g、colorColor.r、oldColor.a）时相同。看到和