javascript - WebGl "ERROR: unsupported shader version" - Stack Overflow

admin管理员组

文章数量:1333668

I just started using webgl and am following this tutorial, but I'm running into a strange error message. ERROR: unsupported shader version. The VertexShader looks like this:

 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;
  }
  `;

and the fragment shader looks like this:

 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);
  }
  `;

They are then converted to shaders with the following function, with then logs the error mentioned above:

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

I really hope you can help me with this, and thanks in advance.

I just started using webgl and am following this tutorial, but I'm running into a strange error message. ERROR: unsupported shader version. The VertexShader looks like this:

 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;
  }
  `;

and the fragment shader looks like this:

 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);
  }
  `;

They are then converted to shaders with the following function, with then logs the error mentioned above:

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

I really hope you can help me with this, and thanks in advance.

• javascript
• glsl
• webgl
• shader

Share Follow asked Jan 16, 2020 at 20:13 Mr. SoUndsoMr. SoUndso 9322 silver badges88 bronze badges 1

• 1 If you want to use GLSL ES 3.00, then you have to create a WebGL 2.0 context. e.g. canvas.getContext( "webgl2" ) – Rabbid76 Commented Jan 16, 2020 at 20:17

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

If you want to use GLSL ES 3.00 shaders, then you have to create a WebGL 2.0 context.

See HTMLCanvasElement.getContext(). e.g.:

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

---

See WebGL 2.0 Specification - 4.3 GLSL ES 3.00 support:

In addition to supporting The OpenGL ES Shading Language, Version 1.00, the WebGL 2.0 API also accepts shaders written in The OpenGL ES Shading Language, Version 3.00 , with some restrictions. [...]

本文标签： javascriptWebGl quotERROR unsupported shader versionquotStack Overflow