erstellen WebGL Textur aus RGBA-Werten

Question

Ich habe versucht, dies ausgehend von this Antwort zu tun. Das ist mein Code:

<canvas id='canvas' width='500' height='500' style='border: solid 1px black'></canvas> 

<script> 
     var canvas = document.getElementById("canvas"); 
     var gl = canvas.getContext("webgl"); 
     var texture = gl.createTexture(); 
     var data = new Uint8Array([128, 128, 0, 1]); 
     var texture = gl.createTexture(); 
     gl.bindTexture(gl.TEXTURE_2D, texture); 
     gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, data); 
     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); 
</script> 

Aber alles, was ich sehen kann, ist eine weiße Box mit einem schwarzen Umriss. Was mache ich falsch?

Vielen Dank!

Answer 1

Der Code, den Sie dort haben, erstellt nur eine Textur und lädt sie in den GPU-Speicher. Du machst also nichts auf die Leinwand.

Um diese Textur auf dem Bildschirm zu bekommen, brauchen Sie noch einiges mehr. Hier ist der Code mit dem Rest hinzugefügt:

// helper function for loading shader sources 
 
function loadShaderSource(gl, id) { 
 
    var script = document.getElementById(id); 
 
    var source = ""; 
 

 
    var child = script.firstChild; 
 
    while (child) { 
 
    if (child.nodeType == child.TEXT_NODE) { 
 
     source += child.textContent; 
 
    } 
 

 
    child = child.nextSibling; 
 
    } 
 

 
    return source; 
 
} 
 

 
// setup an OpenGL context 
 
var canvas = document.getElementById("canvas"); 
 
var gl = canvas.getContext("webgl"); 
 

 
// build the vertex shader 
 
var vertexShaderSource = loadShaderSource(gl, "shader-vertex"); 
 
var vertexShader = gl.createShader(gl.VERTEX_SHADER); 
 
gl.shaderSource(vertexShader, vertexShaderSource); 
 
gl.compileShader(vertexShader); 
 

 
// build the fragment shader 
 
var fragmentShaderSource = loadShaderSource(gl, "shader-fragment"); 
 
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); 
 
gl.shaderSource(fragmentShader, fragmentShaderSource); 
 
gl.compileShader(fragmentShader); 
 

 
// build a shader program from the vertex and fragment shader 
 
var shaderProgram = gl.createProgram(); 
 
gl.attachShader(shaderProgram, vertexShader); 
 
gl.attachShader(shaderProgram, fragmentShader); 
 
gl.linkProgram(shaderProgram); 
 
gl.useProgram(shaderProgram); 
 

 
// define vertex positions 
 
var vertexPositions = new Float32Array([ 
 
    1.0, 1.0, 0, // a 
 
    -1.0, 1.0, 0, // b b----a 
 
    1.0, -1.0, 0, // c | | 
 
    -1.0, 1.0, 0, // b | | 
 
    -1.0, -1.0, 0, // d d----c 
 
    1.0, -1.0, 0 // c 
 
]); 
 

 
// send the vertex positions to the GPU 
 
var vertexBuffer = gl.createBuffer(); 
 
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); 
 
gl.bufferData(gl.ARRAY_BUFFER, vertexPositions, gl.STATIC_DRAW); 
 

 

 
// define vertex texcoords 
 
var vertexTexcoords = new Float32Array([ 
 
    1.0, 0.0, // a 
 
    0.0, 0.0, // b 
 
    1.0, 1.0, // c 
 
    0.0, 0.0, // b 
 
    0.0, 1.0, // d 
 
    1.0, 1.0 // c 
 
]); 
 

 
// send the vertex texcoords to the GPU 
 
var texcoordBuffer = gl.createBuffer(); 
 
gl.bindBuffer(gl.ARRAY_BUFFER, texcoordBuffer); 
 
gl.bufferData(gl.ARRAY_BUFFER, vertexTexcoords, gl.STATIC_DRAW); 
 

 
// wire up the shader program to the vertex position data 
 
var positionAttribute = gl.getAttribLocation(shaderProgram, "position"); 
 
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); 
 
gl.enableVertexAttribArray(positionAttribute); 
 
gl.vertexAttribPointer(positionAttribute, 3, gl.FLOAT, false, 0, 0); 
 

 
// wire up the shader program to the vertex texcoord data 
 
var texcoordAttribute = gl.getAttribLocation(shaderProgram, "texcoord"); 
 
gl.bindBuffer(gl.ARRAY_BUFFER, texcoordBuffer); 
 
gl.enableVertexAttribArray(texcoordAttribute); 
 
gl.vertexAttribPointer(texcoordAttribute, 2, gl.FLOAT, false, 0, 0); 
 

 
// generate and send texture data to the GPU 
 
var textureData = new Uint8Array([128, 128, 0, 255]); 
 
var texture = gl.createTexture(); 
 
gl.bindTexture(gl.TEXTURE_2D, texture); 
 
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, textureData); 
 
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); 
 
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); 
 

 
// wire up the shader program to the texture data 
 
var imageUniform = gl.getUniformLocation(shaderProgram, "image") 
 
gl.uniform1i(imageUniform, 0); 
 

 
// tell the GPU to draw 
 
gl.drawArrays(gl.TRIANGLES, 0, 6);

<canvas id='canvas' width='300' height='200' style='border: solid 1px black'></canvas> 
 

 
    <script id="shader-vertex" type="x-shader/x-vertex"> 
 
     attribute vec3 position; 
 
     attribute vec2 texcoord; 
 
     varying highp vec2 uv; 
 

 
     void main() { 
 
     gl_Position = vec4(position, 1); 
 
     uv = texcoord; 
 
     } 
 
    </script> 
 

 
    <script id="shader-fragment" type="x-shader/x-fragment"> 
 
     varying highp vec2 uv; 
 
     uniform sampler2D image; 
 

 
     void main() { 
 
     gl_FragColor = texture2D(image, uv); 
 
     } 
 
    </script>

Ich weiß, dass eine Tonne von Informationen ist grok so empfehle ich durch einige Führer zu lesen. Ein guter Anfang könnte MDN: Getting started with WebGL sein.