JavaScript WebGL RGBA array to screen?

问题

I am attempting to render pixels in RGBA format to a WebGL canvas. I have this canvas:

<canvas id="cv" width="100" height="100"></canvas>

With the following initialization code for a red rectangle to render:

var w = 100;
var h = 100;
var img = new Uint8Array(w * h * 4);
for (var i = 0; i < img.length; i += 4) {
    img[i + 0] = 255; // r
    img[i + 1] = 0; // g
    img[i + 2] = 0; // b
    img[i + 3] = 255; // a
}

Now I attempt to render this array to the WebGL canvas with the following code:

var cv = document.getElementById('cv');
var gl = cv.getContext('webgl');
var tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex);
gl.texImage2D(
    gl.TEXTURE_2D, // target
    0, // mip level
    gl.RGBA, // internal format
    w, h, // width and height
    0, // border
    gl.RGBA, //format
    gl.UNSIGNED_BYTE, // type
    img // texture data
);

Nothing will appear. What did I do wrong? A fiddle is available on http://jsfiddle.net/AMHRZ/

回答1:

You just uploaded image to WebGL context and that's all. If you want to display this texture then create shader objects, assign a valid filter to your texture, create vertex buffer with screen coordinates.

Here is modified code: http://jsfiddle.net/XfyX2/

var w = 128;
var h = 128;
var img = new Uint8Array(w * h * 4);
for (var i = 0; i < img.length; i += 4) {
    img[i + 0] = 255; // r
    img[i + 1] = 0; // g
    img[i + 2] = 0; // b
    img[i + 3] = 255; // a
}

var cv = document.getElementById('cv');
var gl = cv.getContext('experimental-webgl');
var tex = gl.createTexture();
var vbo = gl.createBuffer();
var program = gl.createProgram();
gl.bindTexture(gl.TEXTURE_2D, tex);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texImage2D(
    gl.TEXTURE_2D, // target
    0, // mip level
    gl.RGBA, // internal format
    w, h, // width and height
    0, // border
    gl.RGBA, //format
    gl.UNSIGNED_BYTE, // type
    img // texture data
);
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
gl.bufferData(gl.ARRAY_BUFFER, 
              Float32Array([-1, -1,
               1, -1,
               1, 1,               
               1, 1,
               -1, 1,
               -1, -1]), gl.STATIC_DRAW);

program.vs = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(program.vs,
                "attribute vec4 vertex;\n" +
                "varying vec2 tc;\n" +
                "void main(){\n" +
                " gl_Position = vertex;\n" +
                " tc = vertex.xy*0.5+0.5;\n" +
                "}\n");

program.fs = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(program.fs,
                "precision highp float;\n" +
                "uniform sampler2D tex;\n" +
                "varying vec2 tc;\n" +
                "void main(){\n" +
                " gl_FragColor = texture2D(tex, tc);\n" +
                "}\n");

gl.compileShader(program.vs);
gl.compileShader(program.fs);

gl.attachShader(program,program.vs);
gl.attachShader(program,program.fs);

gl.deleteShader(program.vs);
gl.deleteShader(program.fs);
gl.bindAttribLocation(program, 0, "vertex");
gl.linkProgram(program);
gl.useProgram(program);
gl.enableVertexAttribArray(0);
gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 6);

来源：https://stackoverflow.com/questions/18043144/javascript-webgl-rgba-array-to-screen

标签

javascript

WebGL