如何在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）的官方规范。 至少，请看一下介绍部分，因为它包含许多有用的信息。