javascript - 如何将多个参数发送到 WebGL 上的顶点着色器？

Question

我正在关注关于 OpenGL 的教程（因为 WebGL 教程很少见），它对多个参数使用以下语法：

#version 330

layout (location = 0) in vec4 position;
layout (location = 1) in vec4 color;

smooth out vec4 theColor;

void main()
{
    gl_Position = position;
    theColor = color;
}

但是layout (location = #)语法不适用于 WebGL。这个有什么替代品？

Answer 1

如果您打算在 WebGL 中使用此着色器，它会出现许多问题。

对于初学者来说，WebGL 基于 OpenGL ES 2.0，它使用从 120 派生的 GLSL 版本。

您的#version指令对 WebGL 无效；您不能将in, out, 或smooth用于顶点属性或可变变量；没有布局限定符。

这将使您成为修复着色器的一部分：

#version 100

attribute vec4 position;
attribute vec4 color;

varying vec4 theColor;

void main()
{
    gl_Position = position;
    theColor    = color;
}

但是您还需要在代码中绑定属性位置position（color在链接着色器之前 - 请参阅 参考资料glBindAttribLocation (...)）。如果您在查找 WebGL / ESSL 教程时遇到困难，您可以重复使用许多为 GLSL 版本 120 或更早版本编写的 OpenGL 教程。

您可以在此处阅读 OpenGL ES 2.0 的 GLSL (ESSL) 的官方规范。至少，看看介绍部分，因为它包含很多有用的信息。