Databases
StackOverflow2013
Postsdbo
POWebGL - Invalid Operation useProgram
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWebGL - Invalid Operation useProgram
    primarykey
    data
    text
    <p>I'm learning WebGL and am on <a href="http://learningwebgl.com/blog/?p=684" rel="noreferrer">this</a> tutorial that has to do with lighting. I'm new to JavaScript so I'm not so good at debugging it yet. I keep getting these errors, anyone know why I'm getting them and how to fix it?</p> <pre><code>WebGL: INVALID_OPERATION: useProgram: program not valid http://insanergamer.zxq.net/:1 WebGL: INVALID_OPERATION: getAttribLocation: program not linked http://insanergamer.zxq.net/:1 WebGL: INVALID_OPERATION: getUniformLocation: program not linked http://insanergamer.zxq.net/:1 WebGL: too many errors, no more errors will be reported to the console for this context. </code></pre> <p><strong>index.html</strong></p> <pre><code>&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf 8" /&gt; &lt;link rel="stylesheet" href="main.css"&gt; &lt;script type="text/javascript" language="javascript" src="gl-matrix.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" language="javascript" src="webgl-utils.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" language="javascript" src="first.js"&gt;&lt;/script&gt; &lt;script id="shader-fs" type="x-shader/x-fragment"&gt; precision mediump float; varying vec2 vTextureCoord; varying vec3 vLightWeighting; uniform sampler2D uSampler; void main(void) { vec4 textureColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t)); gl_FragColor = vec4(textureColor.rgb * vLightWeighting, textureColor.a); } &lt;/script&gt; &lt;script id="shader-vs" type="x-shader/x-vertex"&gt; attribute vec3 aVertexPosition; attribute vec3 aVertexNormal; attribute vec2 aTextureCoord; uniform mat4 uMVMatrix; uniform mat4 uPMatrix; uniform mat3 uNMatrix; uniform vec3 uAmbientColor; uniform vec3 uLightingDirection; uniform vec3 uDirectionalColor; uniform bool uUseLighting; varying vec2 vTextureCoord; varying vec3 vLightWeighting; void main(void) { gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0); vTextureCoord = aTextureCoord; if (!uUseLighting) { vLightWeighting = vec3(1.0, 1.0, 1.0); } else { vec3 transformedNormal = uNMatrix * aVertexNormal; float directionalLightWeighting = max(dot(transformedNormal, uLightingDirection), 0.0); vLightWeighting = uAmbientColor + uDirectionalColor * directionalLightWeighting; } &lt;/script&gt; &lt;/head&gt; &lt;body onLoad="webGLStart()"&gt; &lt;header&gt; &lt;/header&gt; &lt;nav&gt; &lt;/nav&gt; &lt;section&gt; &lt;h3&gt;&lt;a href="todo.html"&gt;Link to the TODO page.&lt;/a&gt;&lt;/h3&gt; &lt;form&gt; &lt;input type="checkbox" id="lighting"&gt;&lt;/input&gt;Lighting On/Off&lt;br /&gt; Ambient Lighting Color: Red:&lt;input type="text" id="ambientR"&gt;&lt;/input&gt; Green:&lt;input type="text" id="ambientG"&gt;&lt;/input&gt; Blue:&lt;input type="text" id="ambientB"&gt;&lt;/input&gt; &lt;br /&gt; Light Direction: X:&lt;input type="text" id="lightDirectionX"&gt;&lt;/input&gt; Y:&lt;input type="text" id="lightDirectionY"&gt;&lt;/input&gt; Z:&lt;input type="text" id="lightDirectionZ"&gt;&lt;/input&gt; &lt;br /&gt; Direction Lighting Color: Red:&lt;input type="text" id="directionalR"&gt;&lt;/input&gt; Green:&lt;input type="text" id="directionalG"&gt;&lt;/input&gt; Blue:&lt;input type="text" id="directionalB"&gt;&lt;/input&gt; &lt;br /&gt; &lt;/form&gt; &lt;p&gt;Press 'F' to change Texture quality.&lt;/p&gt; &lt;p&gt;Use Arrow Keys to rotate cube.&lt;/p&gt; &lt;p&gt;Page Up and Page down to zoom in and out.&lt;/p&gt; &lt;canvas canvasProperties="prop" id="canvas1" style="border: none;" width="1280" height="720"&gt;&lt;/canvas&gt; &lt;article&gt; &lt;header&gt; &lt;/header&gt; &lt;footer&gt; &lt;/footer&gt; &lt;/article&gt; &lt;/section&gt; &lt;aside&gt; &lt;/aside&gt; &lt;footer&gt; &lt;/footer&gt; &lt;/body&gt; </code></pre> <p></p> <p><strong>first.js</strong></p> <pre><code> 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; } var str = ""; var k = shaderScript.firstChild; while (k) { if (k.nodeType == 3) { str += k.textContent; } k = k.nextSibling; } 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); shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition"); gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute); shaderProgram.textureCoordAttribute = gl.getAttribLocation(shaderProgram, "aTextureCoord"); gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute); shaderProgram.vertexNormalAttribute = gl.getAttribLocation(shaderProgram, "aVertexNormal"); gl.enableVertexAttribArray(shaderProgram.vertexNormalAttribute); shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix"); shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix"); shaderProgram.nMatrixUniform = gl.getUniformLocation(shaderProgram, "uNMatrix"); shaderProgram.samplerUniform = gl.getUniformLocation(shaderProgram, "uSampler"); shaderProgram.useLightingUniform = gl.getUniformLocation(shaderProgram, "uUseLighting"); shaderProgram.ambientColorUniform = gl.getUniformLocation(shaderProgram, "uAmbientColor"); shaderProgram.lightingDirectionUniform = gl.getUniformLocation(shaderProgram, "uLightingDirection"); shaderProgram.directionalColorUniform = gl.getUniformLocation(shaderProgram, "uDirectionalColor"); } var cubeTextures = Array(); function initTexture() { var cubeImage = new Image(); for(var i=0;i &lt; 3; i++) { var texture = gl.createTexture(); texture.image = cubeImage; cubeTextures.push(texture); } cubeImage.onload = function() { handleLoadedTexture(cubeTextures); } cubeImage.src = "cube.png"; } function handleLoadedTexture(texture) { gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true); gl.bindTexture(gl.TEXTURE_2D,texture[0]); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture[0].image); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); gl.bindTexture(gl.TEXTURE_2D, texture[1]); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture[1].image); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.bindTexture(gl.TEXTURE_2D, texture[2]); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture[2].image); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST); gl.generateMipmap(gl.TEXTURE_2D); gl.bindTexture(gl.TEXTURE_2D, null); } var mvMatrix = mat4.create(); var mvMatrixStack = [] var pMatrix = mat4.create(); function mvPushMatrix() { var copy = mat4.create(); mat4.set(mvMatrix, copy); mvMatrixStack.push(copy); } function mvPopMatrix() { if(mvMatrixStack.length == 0) { throw "No Matrix to Pop!"; } mvMatrix = mvMatrixStack.pop(); } function degToRad(degrees) { return degrees * Math.PI / 180; } function setMatrixUniforms() { gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix); gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix); var normalMatrix = mat3.create(); mat4.toInverseMat3(mvMatrix, normalMatrix); mat3.transpose(normalMatrix); gl.uniformMatrix3fv(shaderProgram.nMatrixUniform, false, normalMatrix); } var cubeVertexPositionBuffer; var cubeVertexTextureCoordBuffer; var cubeVertexIndexBuffer; function initBuffers() { cubeVertexPositionBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer); vertices = [ // Front face -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 1.0, // Back face -1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0, 1.0, -1.0, -1.0, // Top face -1.0, 1.0, -1.0, -1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, -1.0, // Bottom face -1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, -1.0, 1.0, -1.0, -1.0, 1.0, // Right face 1.0, -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0, // Left face -1.0, -1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0, 1.0, -1.0, ]; gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); cubeVertexPositionBuffer.itemSize = 3; cubeVertexPositionBuffer.numItems = 24; cubeVertexNormalBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexNormalBuffer); var vertexNormals = [ // Front face 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, // Back face 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, // Top face 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, // Bottom face 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, // Right face 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, // Left face -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0 ]; gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexNormals), gl.STATIC_DRAW); cubeVertexNormalBuffer.itemSize = 3; cubeVertexNormalBuffer.numItems = 24; cubeVertexTextureCoordBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexTextureCoordBuffer); var textureCoords = [ // Front face 0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, // Back face 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, 0.0, 0.0, // Top face 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 1.0, 1.0, // Bottom face 1.0, 1.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, // Right face 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, 0.0, 0.0, // Left face 0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, ]; gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoords), gl.STATIC_DRAW); cubeVertexTextureCoordBuffer.itemSize = 2; cubeVertexTextureCoordBuffer.numItems = 24; cubeVertexIndexBuffer = gl.createBuffer(); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer); var cubeVertexIndices = [ 0, 1, 2, 0, 2, 3, // Front face 4, 5, 6, 4, 6, 7, // Back face 8, 9, 10, 8, 10, 11, // Top face 12, 13, 14, 12, 14, 15, // Bottom face 16, 17, 18, 16, 18, 19, // Right face 20, 21, 22, 20, 22, 23 // Left face ] gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(cubeVertexIndices), gl.STATIC_DRAW); cubeVertexIndexBuffer.itemSize = 1; cubeVertexIndexBuffer.numItems = 36; } var rCubeX = 0; var SpeedX = 0; var rCubeY = 0; var SpeedY = 0; var z = -5.0; var filter = 0; function drawScene() { gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix); mat4.identity(mvMatrix); mat4.translate(mvMatrix, [0.0, 0.0, z]); mvPushMatrix(); mat4.rotate(mvMatrix, degToRad(rCubeX), [1, 0, 0]); mat4.rotate(mvMatrix, degToRad(rCubeY), [0, 1, 0]); gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer); gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, cubeVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0); gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexNormalBuffer); gl.vertexAttribPointer(shaderProgram.vertexNormalAttribute, cubeVertexNormalBuffer.itemSize, gl.FLOAT, false, 0, 0); gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexTextureCoordBuffer); gl.vertexAttribPointer(shaderProgram.textureCoordAttribute, cubeVertexTextureCoordBuffer.itemSize, gl.FLOAT, false, 0, 0); gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, cubeTextures[filter]); gl.uniform1i(shaderProgram.samplerUniform, 0); var lighting = document.getElementById("lighting").checked; gl.uniform1i(shaderProgram.useLightingUniform, lighting); if(lighting) { gl.uniform3f( shaderProgram.ambientColorUniform, parseFloat(document.getElementById("ambientR").value), parseFloat(document.getElementById("ambientG").value), parseFloat(document.getElementById("ambientB").value) ); } var lightingDirection = [ parseFloat(document.getElementById("lightDirectionX").value), parseFloat(document.getElementById("lightDirectionY").value), parseFloat(document.getElementById("lightDirectionZ").value) ]; var adjustedLD = vec3.create(); vec3.normalize(lightingDirection, adjustedLD); vec3.scale(adjustedLD, -1); gl.uniform3fv(shaderProgram.lightingDirectionUniform, adjustedLD); gl.uniform3f( shaderProgram.directionalColorUniform, parseFloat(document.getElementById("directionalR").value), parseFloat(document.getElementById("directionalG").value), parseFloat(document.getElementById("directionalB").value) ); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer); setMatrixUniforms(); gl.drawElements(gl.TRIANGLES, cubeVertexIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0); mvPopMatrix(); } var lastTime = 0; function animate() { var timeNow = new Date().getTime(); if(lastTime != 0) { var elapsed = timeNow - lastTime; rCubeX += (SpeedX * elapsed) / 1000.0; rCubeY += (SpeedY * elapsed) / 1000.0; } lastTime = timeNow; } var currentlyPressedKeys = {}; function handleKeyDown(event){ currentlyPressedKeys[event.keyCode] = true; if(String.fromCharCode(event.keyCode) == "F"){ filter += 1; if(filter == 3){ filter = 0; } } } function handleKeyUp(event){ currentlyPressedKeys[event.keyCode] = false; } function handleKeys() { if(currentlyPressedKeys[33]) { z -= 0.05; } if(currentlyPressedKeys[34]) { z += 0.05; } if(currentlyPressedKeys[37]) { SpeedY --; } else if (SpeedY &lt; 0){ SpeedY ++; } if(currentlyPressedKeys[39]) { SpeedY ++; }else if(SpeedY &gt; 0){ SpeedY --; } if (currentlyPressedKeys[38]) { SpeedX --; } else if(SpeedX &lt; 0){ SpeedX ++; } if (currentlyPressedKeys[40]) { SpeedX ++; } else if(SpeedX &gt; 0){ SpeedX--; } } function update() { requestAnimFrame(update); handleKeys(); drawScene(); animate(); } function webGLStart() { var canvas = document.getElementById("canvas1"); initGL(canvas); initShaders(); initBuffers(); initTexture(); gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.enable(gl.DEPTH_TEST); document.onkeydown = handleKeyDown; document.onkeyup = handleKeyUp; update(); } </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. UScgasser
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POWebGL - Invalid Operation useProgram
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POWebGL - Invalid Operation useProgram
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload