解决 WebGl 问题

Question

我开始学习 WebGL 并在 Internet 上找到一些教程如何创建第一个项目。这个教程对我来说很容易编译，因为我画了代码来编译。在 Edge 中编译项目时出现此错误：

WEBGL11163: getAttribLocation: Program not linked.
index.html (61,1)
WEBGL11163: enableVertexAttribArray: Index exceeds MAX_VERTEX_ATTRIBS.
index.html (62,1)
WEBGL11059: INVALID_VALUE: vertexAttribPointer: vertex attribute size must be 1, 2, 3 or 4
index.html (63.1)
WEBGL11042: INVALID_OPERATION: useProgram: program is not connected
index.html (65.1)
WEBGL11163: drawArrays: A program must be bound.
index.html (66,1)

来自这段代码：

const canvas = document.getElementById('object');
const gl = canvas.getContext('webgl');

if (!gl) {
    throw new Error('WebGL not supported');
}

const vertexData = [
    0, 1, 0,
    1, -1, 0,
    -1, -1, 0
];

const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData), gl.STATIC_DRAW);

const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, `
attribute vec3 position;
    void main() {
        gl_Position = vec4(position, 1);
    }
`);
gl.compileShader(vertexShader);

const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, `
    void main() {
        gl.fragColor = vec4(1, 0, 0, 1);
    }
`);
gl.compileShader(fragmentShader);

const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
const positionLocation = gl.getAttribLocation(program, `position`);
gl.enableVertexAttribArray(positionLocation);
gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, true, 0, 0);
gl.useProgram(program);
gl.drawArrays(gl.TRIANGLES, 0, 3);

关于这个主题你能说些什么，因为在教程中它工作正常。

Answer 1

首先让我推荐一些different tutorials

其次，你的着色器很糟糕或者你的片段着色器很糟糕。

编译和 linking 着色器程序时，您应该通过调用 gl.getShaderParameter(someShader, gl.COMPILE_STATUS) 和 gl.getProgramParameter(someProgram, gl.LINK_STATUS) 检查错误。如果 return false 那么你的着色器有错误。您可以使用 gl.getShaderInfoLog(someShader) 获得编译错误，使用 gl.getProgramInfoLog(someProgram) 获得 link 错误。事实上，这些不在您的示例中表明您使用的教程存在一些问题。

至于你输入的着色器 gl.fragColor 而不是 gl_FragColor

const canvas = document.getElementById('object');
const gl = canvas.getContext('webgl');

if (!gl) {
    throw new Error('WebGL not supported');
}

const vertexData = [
    0, 1, 0,
    1, -1, 0,
    -1, -1, 0
];

const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData), gl.STATIC_DRAW);

function createShader(gl, type, src) {
  const shader = gl.createShader(type);
  gl.shaderSource(shader, src);
  gl.compileShader(shader);
  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    console.error(gl.getShaderInfoLog(shader));
    throw new Error('could not compile shader');
  }
  return shader;
}

const vertexShader = createShader(gl, gl.VERTEX_SHADER, `
attribute vec3 position;
    void main() {
        gl_Position = vec4(position, 1);
    }
`);

const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, `
    void main() {
        gl_FragColor = vec4(1, 0, 0, 1);
    }
`);

const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
  console.log(gl.getProgramInfoLog(program));
  throw new Error('could not link shaders');
}
const positionLocation = gl.getAttribLocation(program, `position`);
gl.enableVertexAttribArray(positionLocation);
gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, true, 0, 0);
gl.useProgram(program);
gl.drawArrays(gl.TRIANGLES, 0, 3);

canvas { border: 1px solid black; }

<canvas id="object"></canvas>

解决 WebGl 问题

Slove WebGl problems

webgl