WebGL-Code „Objekt existiert nicht oder wird gelöscht“

Ich halte die folgende Fehlermeldung erhalten, wenn ich meinen Code ausführen: „INVALID_VALUE: getAttribLocation: kein Objekt oder ein Objekt gelöscht“WebGL-Code „Objekt existiert nicht oder wird gelöscht“

I Marke ist neu in WebGL und jedem Hilfe wird sehr geschätzt! Tut mir leid, wenn diese Frage zu weit gefasst ist.

HTML

<html> 
<head> 
    <script type="text/javascript" src = "prog1.js"></script> 
    <script type="text/javascript" src = "webgl-utils.js"></script> 
    <script type="text/javascript" src = "webgl-debug.js"></script> 
    <script type="text/javascript" src = "cuon-utils.js"></script> 
    <script type="text/javascript" src = "cuon-matrix.js"></script> 

</head> 
<body onload="init()"> 
    <script id ="vertexShader" type="x-shader/x-vertex"> 
     precision mediump float; 
     attribute vec4 vertexPosition; 
     void main(){ 
      gl_position = vertexPosition; 
     } 

    </script> 

    <script id ="fragmentShader" type ="x-shader/x-fragment"> 
     void main(){ 
      gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0); 
     } 
    </script> 
    <canvas id = "webgl" width = "300" height = "300"></canvas> 
</body> 
</html>

JAVASCRIPT

function flatten(a) { 
    return a.reduce(function(b, v) { 
     b.push.apply(b, v); 
     return b 
    }, []) 
} 

function init() { 

    var positions = [ 
     [-0.25, 0.5, 0], 
     [-0.5, 0.0, 0], 
     [0.0, 0.0, 0.0] 
    ]; 
    var triangles = [ 
     [0, 1, 2] 
    ]; 

    // initialize the GL context 

    canvas = document.getElementById("webgl"); 
    gl = getWebGLContext(canvas, false); 

    // initialize the program object 

    var vertexSource = document.getElementById("vertexShader").text; 
    var fragmentSource = document.getElementById("fragmentShader").text; 
    program = createProgram(gl, vertexSource, fragmentSource); 
    gl.useProgram(program); 

    // initialize the buffer objects 

    positionBuffer = gl.createBuffer(); 
    triangleBuffer = gl.createBuffer(); 

    // copy vertex data to the gpu 

    positionArray = new Float32Array(flatten(positions)); 
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); 
    gl.bufferData(gl.ARRAY_BUFFER, positionArray, gl.STATIC_DRAW); 

    // copy triangle data to the gpu 

    triangleArray = new Uint16Array(flatten(triangles)); 
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, triangleBuffer); 
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, triangleArray, gl.STATIC_DRAW); 

    requestAnimationFrame(draw); 
} 

function draw() { 
    var vertexSource = document.getElementById("vertexShader").text; 
    var fragmentSource = document.getElementById("fragmentShader").text; 

    gl.clearColor(0.0, 0.8, 0.0, 1.0); 
    gl.clear(gl.COLOR_BUFFER_BIT); 
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); 

    var vertexPositionLocation = gl.getAttribLocation(program, "vertexPosition"); 
    gl.vertexAttribPointer(vertexPositionLocation, 3, gl.FLOAT, false, 0, 0); 
    gl.enableVertexAttribArray(vertexPositionLocation); 
    gl.drawElements(gl.TRIANGLES, triangleArray.length, gl.UNSIGNED_SHORT, 0); 
}

Quelle

2016-09-06 JanVanLeiden

Ihr Shader-Programm wahrscheinlich nicht kompilieren/link und Ihre createProgram Funktion zurück null. Der Fehler erklärt es direkt

INVALID_VALUE: getAttribLocation:.. Kein Objekt oder ein Objekt gelöscht“

Da getAttribLocation dauert nur 2 Werte Die erste ist eine WebGLProgram und die zweite eine Zeichenfolge erhalten Da die Zeichenfolge ist eine Konstante, dann es muss etwas falsch mit Ihrem Programm Argumente sein. wahrscheinlich „kein Objekt“ bedeutet „null“ oder „undefined“

Wenn ich Ihren Code mit meiner Substitution laufe für createProgram I

*** Error compiling shader: ERROR: 0:4: 'gl_position' : undeclared identifier 
ERROR: 0:4: 'assign' : cannot convert from 'attribute mediump 4-component vector of float' to 'float'

01 erhalten

function flatten(a) { 
 
    return a.reduce(function(b, v) { 
 
    b.push.apply(b, v); 
 
    return b 
 
    }, []) 
 
} 
 

 
function init() { 
 

 
    var positions = [ 
 
    [-0.25, 0.5, 0], 
 
    [-0.5, 0.0, 0], 
 
    [0.0, 0.0, 0.0] 
 
    ]; 
 
    var triangles = [ 
 
    [0, 1, 2] 
 
    ]; 
 

 
    // initialize the GL context 
 

 
    canvas = document.getElementById("webgl"); 
 
    gl = canvas.getContext("webgl"); 
 

 
    // initialize the program object 
 

 
    var vertexSource = document.getElementById("vertexShader").text; 
 
    var fragmentSource = document.getElementById("fragmentShader").text; 
 
    program = createProgram(gl, vertexSource, fragmentSource); 
 
    gl.useProgram(program); 
 

 
    // initialize the buffer objects 
 

 
    positionBuffer = gl.createBuffer(); 
 
    triangleBuffer = gl.createBuffer(); 
 

 

 
    // copy vertex data to the gpu 
 

 
    positionArray = new Float32Array(flatten(positions)); 
 
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); 
 
    gl.bufferData(gl.ARRAY_BUFFER, positionArray, gl.STATIC_DRAW); 
 

 
    // copy triangle data to the gpu 
 

 
    triangleArray = new Uint16Array(flatten(triangles)); 
 
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, triangleBuffer); 
 
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, triangleArray, gl.STATIC_DRAW); 
 

 
    requestAnimationFrame(draw); 
 
} 
 

 
function draw() { 
 

 
    var vertexSource = document.getElementById("vertexShader").text; 
 
    var fragmentSource = document.getElementById("fragmentShader").text; 
 

 
    gl.clearColor(0.0, 0.8, 0.0, 1.0); 
 
    gl.clear(gl.COLOR_BUFFER_BIT); 
 
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); 
 

 
    var vertexPositionLocation = gl.getAttribLocation(program, "vertexPosition"); 
 
    gl.vertexAttribPointer(vertexPositionLocation, 3, gl.FLOAT, false, 0, 0); 
 
    gl.enableVertexAttribArray(vertexPositionLocation); 
 
    gl.drawElements(gl.TRIANGLES, triangleArray.length, gl.UNSIGNED_SHORT, 0); 
 

 

 
} 
 

 
function createProgram(gl, vs, fs) { 
 
    return twgl.createProgramFromSources(gl, [vs, fs]); 
 
} 
 

 
init();

<script id ="vertexShader" type="x-shader/x-vertex"> 
 
precision mediump float; 
 
attribute vec4 vertexPosition; 
 
void main(){ 
 
    gl_position = vertexPosition; 
 
} 
 
</script> 
 

 
<script id ="fragmentShader" type ="x-shader/x-fragment"> 
 
void main(){ 
 
    gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0); 
 
} 
 
</script> 
 

 
<canvas id = "webgl" width = "300" height = "300"></canvas> 
 
<script src="https://twgljs.org/dist/twgl.min.js"></script>

Der Fehler ist es gl_Position nicht gl_position. Es ist Groß- und Kleinschreibung.

Sie sollten wahrscheinlich Ihre Shader-Kompilierungs- und Verknüpfungsfehler mit standard boilerplate WebGL code drucken und sicherstellen, dass die JavaScript-Konsole nach Fehlermeldungen überprüft wird oder eine Warnung verwendet wird oder eine Ausnahme ausgelöst wird, wenn sie nicht kompiliert werden können.

PS: Bitte verwenden Sie laufende Schnipsel, wenn Sie können. Es ist weniger Arbeit für den Rest von uns.

Quelle

2016-09-06 17:31:04 gman

Vielen Dank für die Hilfe! Ich werde sicher sein, Snippets von hier aus zu verwenden! – JanVanLeiden

WebGL-Code „Objekt existiert nicht oder wird gelöscht“

Antwort

Verwandte Themen