WebGl“错误：不支持的着色器版本”答案

【问题标题】：WebGl "ERROR: unsupported shader version"WebGl“错误：不支持的着色器版本”
【发布时间】：2020-01-17 04:29:27
【问题描述】：

我刚开始使用 webgl 并关注此 tutorial，但我遇到了一个奇怪的错误消息。 ERROR: unsupported shader version。 VertexShader 看起来像这样：

 var vertexShaderSource = `#version 300 es

  // an attribute is an input (in) to a vertex shader.
  // It will receive data from a buffer
  in vec4 a_position;

  // all shaders have a main function
  void main() {

    // gl_Position is a special variable a vertex shader
    // is responsible for setting
    gl_Position = a_position;
  }
  `;

片段着色器如下所示：

 var fragmentShaderSource = `#version 300 es

  // fragment shaders don't have a default precision so we need
  // to pick one. mediump is a good default. It means "medium precision"
  precision mediump float;

  // we need to declare an output for the fragment shader
  out vec4 outColor;

  void main() {
    // Just set the output to a constant reddish-purple
    outColor = vec4(1, 0, 0.5, 1);
  }
  `;

然后将它们转换为具有以下功能的着色器，然后记录上述错误：

function createShader(gl,type,source) {
  var shader = gl.createShader(type);
  gl.shaderSource(shader,source);
  gl.compileShader(shader);
  var success = gl.getShaderParameter(shader,gl.COMPILE_STATUS);
  if(success) {
    return shader;
  }
  console.log(gl.getShaderInfoLog(shader));
  gl.deleteShader(shader);
}

我真的希望你能帮我解决这个问题，并提前感谢。

【问题讨论】：

如果你想使用 GLSL ES 3.00，那么你必须创建一个WebGL 2.0 上下文。例如canvas.getContext( "webgl2" )

标签： javascript glsl webgl shader

【解决方案1】：

如果你想使用GLSL ES 3.00 着色器，那么你必须创建一个WebGL 2.0 上下文。

见HTMLCanvasElement.getContext()。例如：

var ctx = canvas.getContext("webgl2");

见WebGL 2.0 Specification - 4.3 GLSL ES 3.00 support:

除了支持 OpenGL ES 着色语言 1.00 版外，WebGL 2.0 API 还接受使用 OpenGL ES 着色语言 3.00 版编写的着色器，但有一些限制。 [...]

【讨论】：