我正在关注 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
绑定(bind)属性位置(在链接着色器之前 - 请参阅 glBindAttribLocation (...)
)。如果您难以找到 WebGL/ESSL 的教程,您可以重复使用许多为 GLSL 120 或更早版本编写的 OpenGL 教程。
您可以阅读 OpenGL ES 2.0 的 GLSL (ESSL) 的官方规范 here .至少,请看一下介绍部分,因为它包含很多有用的信息。
关于javascript - 如何将多个参数发送到 WebGL 上的顶点着色器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18797339/