Je passe actuellement par this WebGL tutorial et la section sur laquelle je suis est censée vous apprendre à dessiner un carré blanc sur une toile noire. Pas très excitant, et surtout pas excitant car tout ce que je reçois est une toile noire.Qu'est-ce que WebGL2RenderingContext.attachShader?
La console firefox indique "Argument 2 de WebGL2RenderingContext.attachShader n'est pas un objet." This doc pour WebGL2RenderingContext ne dit rien sur attachShader (qui est appelé sur les lignes 4 et 5 de initShaders). Je trouve également étrange que la fonction getShader ne passe pas un 3ème argument même si elle est définie avec 3.
Un autre problème possible, sans rapport avec ce que firefox dit, pourrait avoir à faire avec le fait que lorsque j'ai essayé de garder les scripts de shader et le script principal dans des fichiers séparés rien n'était affiché sur la page quand je l'ai ouvert. Cela pourrait poser un problème car le tutoriel utilise 2 scripts que j'ai dû télécharger depuis github: here.
Voici index.html, tout mon code est presque exactement le même que le tutoriel, mais je l'ai fait légèrement plus concis car ils redéfinissaient essentiellement des fonctions qui font déjà partie de l'API.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
//the two scripts from github
<script src="sylvester.js" type="text/javascript"/>
<script src="glUtils.js" type="text/javascript"/>
<script type="x-shader/x-vertex" id="shader-vs">
//vertex shader goes here
</script>
<script type="x-shader/x-fragment" id="shader-fs">
//frag shader goes here
</script>
<script type="text/javascript">
//main javascript goes here
</script>
</head>
<body onload="start()">
<canvas id="glCanvas" width="640" height="480">
Your browser doesn't appear to support the
<code><canvas></code> element.
</canvas>
</body>
principal javascript:
var canvas;
var gl;
var squareVerticesBuffer;
var mvMatrix;
var shaderProgram;
var vertexPositionAttribute;
var perspectiveMatrix;
var horizAspect = 480.0/640.0;
function setMatrixUniforms(){
var pUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
gl.uniformMatrix4fv(pUniform, false, new Float32Array(perspectiveMatrix.flatten()));
var mvUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
gl.uniformMatrix4fv(mvUniform, false, new Float32Array(mvMatrix.flatten()));
}
function getShader(gl, id, type){
var shaderScript , theSource, currentChild, shader;
shaderScript = document.getElementById(id);
if(!shaderScript){
console.log("Couldn't find shader script");
return null;
}
theSource = shaderScript.text;
if(!type){
if(shaderScript.type == 'x-shader/x-fragment'){
type = gl.FRAGMENT_SHADER;
}
else if (shaderScript.type == 'x-shader/x-vertex'){
type = gl.VERTEX_SHADER;
}
else {
console.log("Shader is not of a valid type");
return null;
}
}
shader = gl.createShader(type);
gl.shaderSource(shader, theSource);
gl.compileShader(shader);
if(!gl.getShaderParameter(shader, gl.COMPILE_STATUS)){
console.log("An error occured compiling the shaders:"
+ gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
return null;
}
return shader;
}
function initShaders() {
var fragmentShader = getShader(gl, 'shader-fs');
var vertexShader = getShader(gl, 'shader-vs');
shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
if(!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
console.log('Unable to initialize the shader program: '
+ gl.getProgramInfoLog(shaderProgram));
}
gl.useProgram(shaderProgram);
vertexPositionAttribute = gl.getAttribLocation(shaderProgram, 'aVertexPosition');
gl.enableVertexAttribArray(vertexPositionAttribute);
}
function initBuffers(){
squareVerticesBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);
var vertices = [1.0, 1.0, 0.0,
-1.0, 1.0, 0.0,
1.0, 1.0, 0.0,
-1.0, -1.0, 0.0];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
}
function drawScene(){
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
perspectiveMatrix = makePerspective(45, 4.0/3.0, 0.1, 100.0);
//perspectiveMatrix = makePerspective(45, 640.0/480.0, 0.1, 100.0);
mvMatrix = Matrix.I(4);
mvMatrix.x(Matrix.Translation($V([-0.0, 0.0, -6.0])).ensure4x4())
gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);
gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);
setMatrixUniforms();
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
}
function start() {
var canvas = document.getElementById('glCanvas');
// Initialize the GL context
var opts = { };
gl = canvas.getContext("webgl2", opts);
if(!gl) gl = canvas.getContext("experimental-webgl2", opts);
if(!gl) gl = canvas.getContext("webgl", opts);
if(!gl) gl = canvas.getContext("experimental-webgl", opts);
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.LEQUAL);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.viewport(0, 0, canvas.width, canvas.height);
initShaders();
initBuffers();
setInterval(drawScene, 15);
}
vertex shader:
attribute vec3 aVertexPosition;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
void main(void) {
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
}
shader frag:
void main(void) {
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}
La méthode [ 'WebGLRenderingContext.attachShader()'] (https://developer.mozilla.org/de/docs/Web/API/WebGLRenderingContext/attachShader) de l'API WebGL attache un fragment ou un sommet WebGLShader à un WebGLProgram. – Rabbid76
J'avais suggéré [ces tutoriels] (https://webgl2fundamentals.org). – gman
Hey, le doc que vous suivez est basé sur 'webgl', mais dans votre code, le contexte de votre get est' webgl2' :) –