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 绑定(bind)属性位置(在链接着色器之前 - 请参阅 glBindAttribLocation (...))。如果您难以找到 WebGL/ESSL 的教程，您可以重复使用许多为 GLSL 120 或更早版本编写的 OpenGL 教程。

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