Have you even tried to debug this? The code you pasted above does not run and receives JavaScript errors. in Chrome, open the JavaScript console (Key-> Tools-> JavaScript Console). In Firefox (Firefox-> Web Developer-> Web Console)
Wrong things
Many global variables are used, but are not really global.
vertBuffer and IndexBuffer and CoordBuffer as local variables in initBuffers , but then used them in drawScene .
This caused him to at least not get JavaScript errors.
Did not set texture coordinates.
The coordinator made the code, but never used it in the attribute. This caused GL Errors ("incorrect settings attributes" in Chrome)
Fixed this to stop receiving GL errors. At this point, I set the background color to green, and I saw a rotating black cube, which suggested that the next problem was the texture.
Do not configure textures to process textures without mips and non-power-of 2.
If your textures do not matter 2 in each dimension, you need to set the texture to wrap in a clip.
gl.texParameteri (gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri (gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
Here the working version uses random color canvases instead of images.
var gl; function initGL(canvas) { try { gl = canvas.getContext("experimental-webgl"); gl.viewportWidth = canvas.width; gl.viewportHeight = canvas.height; } catch (e) { } if (!gl) { alert("Could not initialise WebGL, sorry :-("); } } function getShader(gl, id) { var shaderScript = document.getElementById(id); if (!shaderScript) { return null; } str = shaderScript.text; var shader; if (shaderScript.type == "x-shader/x-fragment") { shader = gl.createShader(gl.FRAGMENT_SHADER); } else if (shaderScript.type == "x-shader/x-vertex") { shader = gl.createShader(gl.VERTEX_SHADER); } else { return null; } gl.shaderSource(shader, str); gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { alert(gl.getShaderInfoLog(shader)); return null; } return shader; } var shaderProgram; 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)) { alert("Could not initialise shaders"); } gl.useProgram(shaderProgram);
<script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.3.2/gl-matrix-min.js"></script> <script id="shader-fs" type="x-shader/x-fragment"> precision mediump float; varying vec2 vTextureCoord; uniform sampler2D uSampler; void main(void) { gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t)); } </script> <script id="shader-vs" type="x-shader/x-vertex"> attribute vec3 aVertexPosition; attribute vec2 aTextureCoord; uniform mat4 uMVMatrix; uniform mat4 uPMatrix; varying vec2 vTextureCoord; void main(void) { gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0); vTextureCoord = aTextureCoord; } </script> <canvas id="lesson05-canvas" style="border: none;" width="500" height="500"> </canvas>
Other issues: There are several places in the code where properties are assigned to WebGL objects. Examples
shaderProgram = gl.createProgram(); shaderProgram.textureCoordAttribute = gl.getAttribLocation(shaderProgram, "aTextureCoord");
...
texturen[anz] = gl.createTexture(); texturen[anz].image = new Image(); texturen[anz].image.onload = function()
...
vertBuffer = gl.createBuffer(); vertBuffer.itemSize = 3;
All of them should be reorganized if you ever decide to handle events ignored in the context, since gl.create??? functions gl.create??? return null and attaching the property to null will throw an exception.
It’s better to do something more like this.
shaderProgram = {}; shaderProgram.program = gl.createProgram(); shaderProgram.textureCoordAttribute = gl.getAttribLocation(shaderProgram, "aTextureCoord");
...
texturen[anz] = {}; texturen[anz].texture = gl.createTexture(); texturen[anz].image = new Image(); texturen[anz].image.onload = function()
...
vertBuffer = {}; vertBuffer.buffer = gl.createBuffer(); vertBuffer.itemSize = 3;