Slove 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

其次，你的着色器不好，或者你的片段着色器不好。

编译和链接着色器程序时，您应该调用gl.getShaderParameter(someShader, gl.COMPILE_STATUS) 和gl.getProgramParameter(someProgram, gl.LINK_STATUS) 检查错误。如果任一返回 false，则您的着色器有错误。您可以使用gl.getShaderInfoLog(someShader) 获取编译错误，使用gl.getProgramInfoLog(someProgram) 获取链接错误。这些不在您的示例中的事实表明您正在使用的教程存在一些问题。

至于您的着色器，您输入的是 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>