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