webGL2统一缓冲区对象和布局的用法（std140）

Question

我正在研究一个webgl布料模拟项目，试图使用转换反馈。 仿真将在顶点着色器中完成。 我需要访问顶点的相邻顶点以计算力。 我正在考虑使用统一的缓冲区对象来存储所有顶点的位置。

我定义了一个统一的块，如下所示：

layout(std140) uniform u_testBlock
{
    vec4 v0;
    vec4 v1;
    ...
};

但是，我遇到了“布局：语法错误”。 这是在webGL2中使用UBO的正确方法吗？ webGL2规范说统一块仅支持std140布局，为什么会有这样的语法错误？

非常感谢！

Answer 1

您是否为着色器添加了#version 300 es前缀？ 必须是第一行（之前没有空行）才能使用glsl es 3.0功能

您的精度也必须匹配。

您的示例适用于Firefox。 从54.0.2824.0版开始的Chrome Canary似乎已损坏（它曾经可以工作）。 我敢肯定它将很快修复。

 var vs = `#version 300 es // NOTE: We need to mark these as mediump to match // the fragment shader (or of course we could mark // the fragment shader's uniform block to highp) // layout(std140) uniform u_testBlock { mediump vec4 v0; mediump vec4 v1; }; void main() { gl_Position = v0; } `; var fs = `#version 300 es precision mediump float; layout(std140) uniform u_testBlock { vec4 v0; vec4 v1; }; out vec4 theColor; void main() { theColor = v1; } `; var gl = document.createElement("canvas").getContext("webgl2"); if (!gl) { log ("ERROR: need WebGL 2 support"); } var prg = createProgram(gl, [vs, fs]); log("there should be no errors above"); function log() { var pre = document.createElement("pre"); pre.appendChild(document.createTextNode(Array.prototype.join.call(arguments, " "))); document.body.appendChild(pre); } function createShader(gl, type, src) { var s = gl.createShader(type); gl.shaderSource(s, src); gl.compileShader(s); if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) { log("ERROR:", gl.getShaderInfoLog(s)); } return s; } function createProgram(gl, shaders) { var prg = gl.createProgram(); gl.attachShader(prg, createShader(gl, gl.VERTEX_SHADER, shaders[0])); gl.attachShader(prg, createShader(gl, gl.FRAGMENT_SHADER, shaders[1])); gl.linkProgram(prg); if (!gl.getProgramParameter(prg, gl.LINK_STATUS)) { log("ERROR:", gl.getProgramInfoLog(prg)); } return prg; }