자바 스크립트 WebGL RGBA 배열을 화면에 표시 하시겠습니까?

Question

RGBA 형식의 픽셀을 WebGL 캔버스로 렌더링하려고합니다. 렌더링하는 빨간색 사각형에 대해 다음 초기화 코드와

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

:

:

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 
} 

지금 나는 다음과 같은 코드가 WebGL 캔버스에이 배열을 렌더링하려고 나는이 캔버스가

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 
); 

아무것도 표시되지 않습니다. 나는 무엇을 잘못 했는가? 바이올린을 사용할 수 있습니다 http://jsfiddle.net/AMHRZ/

Answer 1

방금 ​​WebGL 컨텍스트에 이미지를 업로드했습니다. 그게 전부입니다. 이 텍스처를 표시 한 다음 셰이더 개체를 만들고 텍스처에 유효한 필터를 할당하고 화면 좌표가있는 정점 버퍼를 만들려는 경우

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);