2012-08-17 12 views
7

Ben WebGL'yi öğrenme ve aydınlatma ile ilgisi var this öğretici üstündeyim ediyorum. JavaScript’te yeniyim, bu yüzden henüz hata ayıklama konusunda o kadar iyi değilim. Bu hataları almaya devam ediyorum, neden bunları alıp nasıl tamir edeceğimi bilen var mı?WebGL - Geçersiz Operasyon useProgram

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. 

index.html

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf 8" /> 
    <link rel="stylesheet" href="main.css"> 
    <script type="text/javascript" language="javascript" src="gl-matrix.js"></script> 
    <script type="text/javascript" language="javascript" src="webgl-utils.js"></script> 
    <script type="text/javascript" language="javascript" src="first.js"></script> 

     <script id="shader-fs" type="x-shader/x-fragment"> 
       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); 
       } 

     </script> 

     <script id="shader-vs" type="x-shader/x-vertex"> 
      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; 
       } 
     </script> 
</head> 
<body onLoad="webGLStart()"> 
    <header> 
    </header> 
    <nav> 
    </nav> 
    <section> 
     <h3><a href="todo.html">Link to the TODO page.</a></h3> 

     <form> 
      <input type="checkbox" id="lighting"></input>Lighting On/Off<br /> 
      Ambient Lighting Color: Red:<input type="text" id="ambientR"></input> Green:<input type="text" id="ambientG"></input> Blue:<input type="text" id="ambientB"></input> <br /> 
      Light Direction: X:<input type="text" id="lightDirectionX"></input> Y:<input type="text" id="lightDirectionY"></input> Z:<input type="text" id="lightDirectionZ"></input> <br /> 
      Direction Lighting Color: Red:<input type="text" id="directionalR"></input> Green:<input type="text" id="directionalG"></input> Blue:<input type="text" id="directionalB"></input> <br /> 
     </form> 

     <p>Press 'F' to change Texture quality.</p> 
     <p>Use Arrow Keys to rotate cube.</p> 
     <p>Page Up and Page down to zoom in and out.</p> 
     <canvas canvasProperties="prop" id="canvas1" style="border: none;" width="1280" height="720"></canvas> 
     <article> 
      <header> 
      </header> 
      <footer> 
      </footer> 
     </article> 
    </section> 
    <aside> 
    </aside> 
    <footer> 
    </footer> 
</body> 

first.js

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 < 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 < 0){ 
     SpeedY ++; 
    } 

    if(currentlyPressedKeys[39]) 
    { 
     SpeedY ++; 
    }else if(SpeedY > 0){ 
     SpeedY --; 
    } 

    if (currentlyPressedKeys[38]) { 
     SpeedX --; 
    } else if(SpeedX < 0){ 
     SpeedX ++; 
    } 

    if (currentlyPressedKeys[40]) { 
     SpeedX ++; 
    } else if(SpeedX > 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(); 
} 

cevap

7

Bu özel durumun sebebi, vertex shader'ınızın sonunda bir kapanış eksikliğinizdir, ancak bu, neden gölgelendiricinizin neden derlenemediğine dair bir ileti görmediğinizin yanıtını vermez.

getShader numaralı hata denetim kodunuz aslında düzgün çalışıyor gibi görünüyor ve aslında derleme ve bağlantı başarısız olduğunda belirtilen hata günlüklerini kontrol edin ve hata günlüklerini uyarın. Ben kodunuzu kopyalanan ve harfi harfine ran

, doğru belki javascript uyarıları kapatmış, bana bir hata ("beklenmeyen EOF") verdi? Uyarlamak ve favori tarayıcınızdaki Javascript konsolunu tanımak yerine console.log kullanmayı düşünebilirsiniz.

+0

Teşekkürler, aslında bunu nasıl yapacağımı merak ediyordum. – cgasser

+1

Bu sorunun şüphe ediyorum ama sadece FYI, geçersiz programlar için bağlantı başarısız olduğu sürece GL derlemede başarısızlık dönmek için gerekli değildir. :-( – gman

4
WebGL konsol günlük mesajları ile size büyük ipucu veriyor

:

WebGL: INVALID_OPERATION: useProgram: program değil geçerlidir WebGL: INVALID_OPERATION: getAttribLocation: Program

bağlantılı değildir programı

bağlantılı değildir ve bu nedenle kullanılamaz veya devlet sorgulanan bu.

Programınız gölgelendiriciler doğru derlenmiş olduğu ve program bağlantılı olduğunu kontrol edilecek gibi görünüyor, ama bu böyle değil. Hata kontrolü kodunuzda bir sorun var, gerçek sorunu gizliyorsunuz.

getShaderInfoLog

getProgramInfoLog

Her ikisi de dönüş dizeleri ve kök neden almak yardımcı olacaktır: Hep bu iki taze derlenmiş shader fonksiyonlar ve son zamanlarda bağlantılı programlar diyoruz.

+0

Teşekkürler, bunu deneyip tamir edip edemeyeceğimi göreceğim. – cgasser

3

Ben de ateş bu garip hatalar, fakat sadece Chrome'da değil başlamıştı:

WebGL: INVALID_OPERATION: getAttribLocation: program not linked 
WebGL: INVALID_OPERATION: getUniformLocation: program not linked 
WebGL: INVALID_OPERATION: useProgram: program not valid 
WebGL: INVALID_OPERATION: getAttribLocation: program not linked 
WebGL: INVALID_OPERATION: getUniformLocation: program not linked 

Ben de buna http://threejs.org/ atmak hataları hakkında örneklerin çoğunda (sadece krom olarak) fark ettim. Kaynağı yeniden indirerek, hatalardan kurtulmayı başardım.

İlgili konular