Slove WebGl problems - webgl

Question

I'm start learning WebGL and find some tutorials in Internet how to create first project. The tutorial is so easy for me to compile because i draw code to compile .
Have this errors on compile project in 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)
From this code:
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);
What you can say about this subject because in tutorial it's working correctly.

Answer 1

First off let me recommend some different tutorials
Second off, your shaders are bad or rather your fragment shader is bad.
When compiling and linking shader programs you should check for errors by calling gl.getShaderParameter(someShader, gl.COMPILE_STATUS) and gl.getProgramParameter(someProgram, gl.LINK_STATUS). If either return false then your shaders had an error. You can get the compile error with gl.getShaderInfoLog(someShader) and the link error with gl.getProgramInfoLog(someProgram). The fact that these are not in your example suggest the tutorial you're using has so some issues.
As for your shaders you typed gl.fragColor instead of 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>