WebGL2学习(2): GLSL ES 3.0

更多精彩内容尽在 dt.sim3d.cn ，关注公众号【sky的数孪技术】，技术交流、源码下载请添加VX：digital_twin123

WebGL 2.0 给 GLSL 带来了重大变化。WebGL 1.0 中使用的 GLSL 版本是 GLSL ES 1.0。 WebGL 2.0 中仍然可用。但是，通过编写描述符来启用它，可以使用 WebGL 2.0 中的 GLSL ES 3.0。由于GLSL本身的版本已经升级，所以会采用完全不同的编写方式。

这次，我们重点关注因 GLSL ES 3.0 而发生变化的部分。

启用 GLSL ES 3.0

即使使用 WebGL 2.0，我们仍然可以使用以前版本的着色器。也就是说，除非显式启用，否则着色器将使用 GLSL ES 1.0 的旧版本。

为了启用3.0，我们需要编写一个版本指令，并且此版本指令必须是 GLSL ES 3.0 着色器代码的第一行。

#version 300 es

精度修饰符

自 GLSL ES 1.0 起，顶点着色器就保证了 highp 的默认精度。然而，对于片段着色器，mediump 只能保证最低精度。

GLSL ES 3.0 默认支持高精度，使得在片段着色器中处理高精度浮点数比以前更容易。

attribute 和 varying

在 GLSL ES 3.0 中，attribute 和 varying 被彻底废除，如果这样写将会是个语法错误，要转为使用 in 和 out 代替。

以前，顶点属性是使用带有 attribute 修饰符的变量输入的，但现在改成使用带有 in 修饰符的变量，这可以理解为是从外部进入着色器的数据。

同样，对于具有 varing 修饰符的变量，当从顶点着色器输出到片段着色器时使用 out，而当接收作为片段着色器的输入时使用 in。

但是，带有uniform修饰符的变量将像以前一样写入。

gl_FragColor 和 gl_FragData 弃用

gl_FragColor 和 gl_FragData 也不能在 GLSL ES 3.0 中使用，这个gl_FragData 之前用于同时输出到多个称为MRT的缓冲区，并且可以像数组一样接收多个输出值。

layout修饰符

在 GLSL ES 3.0 中，attribute 等已经消失，取而代之的是 in，但同时，现在可以在 GLSL 内输入显式指定位置布局。

自 WebGL 1.0 起就存在一些 API 方法，例如 gl.getAttribLocation，但现在我们可以指定 GLSL 中出现的任何位置编号。

#version 300 es
layout (location = 0) in vec3 position;
layout (location = 1) in vec3 normal;
layout (location = 2) in vec4 color;

texture的变化

内置函数和纹理格式的类型增添了很多种。特别要注意的是，texture2D函数已经停止使用了。

以前，2D 和立方体贴图系统的纹理参考函数是分开的。 GLSL ES 3.0 将这些结合在一起。现在，无论是2D纹理还是立方体纹理，都可以使用通用函数 texture 来引用。此功能可以根据给定的采样器类型自动更改参考方法。