解决WebGl问题
解决WebGl问题
提问于 2019-11-17 22:44:52
我开始学习WebGL，并在互联网上找到一些如何创建第一个项目的教程。本教程对我来说很容易编译，因为我会绘制代码进行编译。在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);你可以对这个主题说些什么，因为在教程中它是正确工作的。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-11-17 23:19:08
首先，让我推荐一些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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58901629
复制相关文章
相似问题
腾讯云开发者
