Empiezo a aprender WebGL y encuentro algunos tutoriales en Internet sobre cómo crear un primer proyecto. El tutorial es muy fácil de compilar porque dibujo código para compilar. Tenga estos errores en el proyecto de compilación en 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)

De este código:

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);

Lo que puedes decir sobre este tema porque en el tutorial está funcionando correctamente.

0
Programista 17 nov. 2019 a las 17:44

1 respuesta

La mejor respuesta

En primer lugar, permítame recomendar algunos diferentes tutoriales.

En segundo lugar, sus sombreadores son malos o, más bien, su sombreador de fragmentos es malo.

Al compilar y vincular programas de sombreado, debe verificar si hay errores llamando a gl.getShaderParameter(someShader, gl.COMPILE_STATUS) y gl.getProgramParameter(someProgram, gl.LINK_STATUS). Si devuelve false, entonces sus sombreadores tuvieron un error. Puede obtener el error de compilación con gl.getShaderInfoLog(someShader) y el error de enlace con gl.getProgramInfoLog(someProgram). El hecho de que estos no estén en su ejemplo sugiere que el tutorial que está utilizando tiene algunos problemas.

En cuanto a tus sombreadores, escribiste gl.fragColor en lugar de 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>
0
gman 17 nov. 2019 a las 15:19