webGL Textur nicht in Rechteck

Ich habe Probleme bei der Texturierung meines Rechtecks, wo schwarze Leinwand anstelle von strukturierten Leinwand mit Bild angezeigt wird.webGL Textur nicht in Rechteck

Zuerst erstelle ich WebGL-Programm, Anhängen von Shadern und Verknüpfen von WebGL-Programm wie gewohnt.

Ich schaffe Dann Textur, wenn Bild wie folgt geladen:

var texture = gl.createTexture(); 
var image = document.createElement("img"); 
image.src = "https://upload.wikimedia.org/wikipedia/commons/3/3a/Saint-Gervais-les-Bains_-_Mt-Blanc_JPG01.jpg"; 
image.onload = function() { 
    gl.bindTexture(gl.TEXTURE_2D, texture); 
    // Set the parameters so we can render any size image. 
    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); 
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); 
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); 
    // Upload the image into the texture. 
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image); 
    }

Danach gebe ich die Informationen über Rechteck verticies in den Vertex-Shader:

var pos = gl.getAttribLocation(program, "pos"); 
gl.enableVertexAttribArray(pos); 
var pos_Buffer = gl.createBuffer(); 
gl.bindBuffer(gl.ARRAY_BUFFER, pos_Buffer); 
var vertices = [-1.0, -1.0, // "left-down" 
    -1.0, 1.0, // "left-top" 
    1.0, -1.0, // "right-down" 
    1.0, 1.0, // "right-top" 
]; 
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); 
gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);

Und am Ende habe ich zeichnen Sie mein Rechteck, indem Sie Indizes von Vertices in die Funktion drawElements überführen:

There ist ein Problem mit meinem Problem.
Bitte, haben Sie keine Ahnung, wie Sie es lösen können?

Quelle

2016-04-09 Petr Bečka

Haben Sie das lokal oder auf einem Server (lokaler Server geht auch)? Wenn es lokal ist, haben Sie dann in Ihrem Browser "allow-cross-origin" als "true"? –

Ich sehe keine Fehlerbehandlung. Gibt glGetError am Ende Ihres Programms etwas anderes als GL_NO_ERROR zurück? – Andreas

Haben Sie versucht, die Konsole zu öffnen? Es hat normalerweise gute Fehlerinformationen in ihm. –

image.onload ist eine asynchrone Funktion und Sie zeichnen einen Aufruf, bevor die Funktion ausgeführt wird (das Bild wird nicht geladen, wenn Sie im Zeichenbereich zeichnen).

Sie gl.drawElements nach innen setzen müssen:

image.onload = function() { // image.onload STARTS 
    gl.bindTexture(gl.TEXTURE_2D, texture); 
    // Set the parameters so we can render any size image. 
    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); 
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); 
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); 
    // Upload the image into the texture. 
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image); 

    // anything you want, blehblahbleh ... 

    // draw on canvas 
    gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_BYTE, 0); 

} // image.onload ENDS

Auch ja, es gab ein Problem mit Quer Ursprung Ressource Anruf, aber ich denke, man es mit der Erweiterung gelöst (oder für jsfiddle Tests könnten Sie Base64-Format verwenden).

leicht aktualisiert Beispiel: http://jsfiddle.net/windkiller/6cLo3890/

Quelle

2016-04-09 22:23:39

webGL Textur nicht in Rechteck

Antwort

Verwandte Themen