解决WebGl问题

我开始学习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);

---

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

首先让我推荐一些

其次，着色器不好，或者更确切地说，片段着色器不好

编译和链接着色器程序时，应通过调用

gl.getShaderParameter（someShader，gl.COMPILE\u状态）

和

gl.getProgramParameter（someProgram，gl.LINK\u状态）

检查错误。如果返回

false

，则着色器出错。您可以通过

gl.getshaderingfolog（someShader）

获得编译错误，并通过

gl.getProgramInfoLog（someProgram）

获得链接错误。事实上，这些都不在您的示例中，这表明您正在使用的教程存在一些问题

至于着色器，您键入的是

gl.fragColor

，而不是

gl\u fragColor

const canvas=document.getElementById（'object'）；
const gl=canvas.getContext（'webgl'）；
如果（！gl）{
抛出新错误（“不支持WebGL”）；
}
常量顶点数据=[
0, 1, 0,
1, -1, 0,
-1, -1, 0
];
const buffer=gl.createBuffer（）；
gl.bindBuffer（gl.ARRAY\u BUFFER，BUFFER）；
gl.bufferData（gl.ARRAY\u BUFFER，新Float32Array（vertexData），gl.STATIC\u DRAW）；
函数createShader（gl、类型、src）{
常量着色器=gl.createShader（类型）；
gl.shaderSource（着色器，src）；
gl.compileShader（着色器）；
if（！gl.getShaderParameter（着色器，gl.COMPILE_状态））{
console.error（gl.getShaderInfoLog（着色器））；
抛出新错误（'无法编译着色器'）；
}
返回着色器；
}
const vertexShader=createShader（gl，gl.VERTEX_着色器`
属性向量3位置；
void main（）{
gl_位置=vec4（位置1）；
}
`);
const fragmentShader=createShader（gl，gl.FRAGMENT\u着色器`
void main（）{
gl_FragColor=vec4（1,0,0,1）；
}
`);
const program=gl.createProgram（）；
gl.attachShader（程序，顶点着色器）；
gl.attachShader（程序、碎片着色器）；
总账链接程序（程序）；
if（！gl.getProgramParameter（程序、总账链接状态））{
console.log（gl.getProgramInfoLog（程序））；
抛出新错误（'无法链接着色器'）；
}
const positionLocation=gl.getAttriblLocation（程序，`position`）；
gl.EnableVertexAttributeArray（位置位置）；
gl.VertexAttribute指针（位置位置，3，gl.FLOAT，真，0，0）；
gl.useProgram（程序）；
总图数组（总图三角形，0,3）
canvas{边框：1px纯黑；}