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

How to send multiple parameters to the vertex shader on WebGL?

本文关键字：WebGL 顶点 参数      更新时间：2023-09-26

我正在学习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上不起作用。有什么替代品？

如果你打算在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）的官方规范。至少，看看介绍部分，因为它包含了很多有用的信息。

相关文章：