使用 sampler3D 时在 WebGL 2.0 GLSL 中遇到语法错误答案

【问题标题】：Syntax error encountered in WebGL 2.0 GLSL when using sampler3D使用 sampler3D 时在 WebGL 2.0 GLSL 中遇到语法错误
【发布时间】：2016-09-29 04:06:54
【问题描述】：

我正在尝试使用 WebGL 2.0 在浏览器中呈现 3D 医疗数据。

WebGL 2.0 现在支持 AFAIK 3D 纹理。

texImage3D() 是可识别的函数调用。

我正在编写一个片段着色器并声明一个统一采样器：

uniform sampler3D samp;

当我在 Firefox 上运行它时，我得到一个错误：

未捕获的异常：着色器编译错误：错误：0:19：'sampler3D'：非法使用保留字 ERROR: 0:19: 'sampler3D' : 语法错误

当我使用 sampler2D 时工作得很好（虽然不能解决我的目的）。

谁能指出我在这里做错了什么？

sampler3D 还不支持吗？但在这种情况下，应该如何访问使用 texImage3D() 加载的任何纹理？

【问题讨论】：

标签： javascript firefox glsl webgl webgl2

【解决方案1】：

您是否更改了所有需要更改以使用 WebGL 2.0 功能（如 sampler3D）的内容？

要使用sampler3D，你需要添加

#version 300 es

到着色器的顶部。 它必须是前面没有空格的第一行

请注意，GLSL 3.00 与 GLSL 1.0 相比还有许多其他变化

在这里测试

"use strict";

const vs = `#version 300 es

in vec4 position;

void main() {
  gl_Position = position;
}
`;

const fs = `#version 300 es
precision mediump float;
precision lowp sampler3D;

uniform sampler3D u_someTexture;

out vec4 theColor;

void main() {
  theColor = texture(u_someTexture, vec3(0,0,0));
}
`;

function main() {
  var m4 = twgl.m4;
  var gl = twgl.getContext(document.createElement("canvas"));
  log("using: " + gl.getParameter(gl.VERSION));  
  if (!twgl.isWebGL2(gl)) {
    log("Sorry, this example requires WebGL 2.0");  
    return;
  }

  var programInfo = twgl.createProgramInfo(gl, [vs, fs], (err) => {
    log("could not compile shader: " + err);
  });
  if (programInfo) {
    log("compiled shader with sampler3D");
  }

}
main();

function log() {
  var elem = document.createElement("pre");
  elem.appendChild(document.createTextNode(Array.prototype.join.call(arguments, " ")));
  document.body.appendChild(elem);
}

&lt;script src="https://twgljs.org/dist/twgl-full.min.js"&gt;&lt;/script&gt;

【讨论】：

是的。缺少 GLSL 版本声明行。谢谢。