我正在尝试使用WebGL2纹理在浏览器中将Uint16Array
渲染成图像。我有一个工作正常的例子,使用Uint8Array
,但是升级到16位时遇到了困难,因为WebGL具有陡峭的学习曲线。
工作正常的8位示例(与下面的代码片段相同):Uint8Array
http://jsfiddle.net/njxvftc9/2/
不工作的16位尝试:Uint16Array
http://jsfiddle.net/njxvftc9/3/
// image data
var w = 128;
var h = 128;
var size = w * h * 4;
var img = new Uint8Array(size); // need Uint16Array
for (var i = 0; i < img.length; i += 4) {
img[i + 0] = 255; // r
img[i + 1] = i/64; // g
img[i + 2] = 0; // b
img[i + 3] = 255; // a
}
// program
var canvas = document.getElementById('cv');
var gl = canvas.getContext('webgl2');
var program = gl.createProgram();
//var color_buffer_float_16ui = gl.getExtension('EXT_color_buffer_float'); // add for 16-bit
// texture
var tex = gl.createTexture(); // create empty texture
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 -> gl.RGBA16UI
w, h, // width and height
0, // border
gl.RGBA, //format -> gm.RGBA_INTEGER
gl.UNSIGNED_BYTE, // type -> gl.UNSIGNED_SHORT
img // texture data
);
// buffer
var buffer = gl.createBuffer();
var bufferData = new Float32Array([
-1, -1,
1, -1,
1, 1,
1, 1,
-1, 1,
-1, -1
]);
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, bufferData, gl.STATIC_DRAW);
// shaders
program.vs = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(program.vs,
"attribute vec4 vertex;\n" + // incoming pixel input?
"varying vec2 pixelCoordinate;\n" + // variable used to pass position to fragment shader
"void main(){\n" +
" gl_Position = vertex;\n" + // set pixel output position to incoming position (pass through)
" pixelCoordinate = vertex.xy*0.5+0.5;\n" + // set coordinate for fragment shader
"}\n");
program.fs = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(program.fs,
"precision highp float;\n" + // ?
"uniform sampler2D tex;\n" + // ?
"varying vec2 pixelCoordinate;\n" + // receive pixel position from vertex shader
"void main(){\n" +
" gl_FragColor = texture2D(tex, pixelCoordinate);\n" + // lookup color in texture image at coordinate position and set color to
"}\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);
// program
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); // execute program
<canvas id="cv" width="100" height="100"></canvas>
我尝试过许多其他技术,参考了规范,在着色器中尝试将其转换为浮点数,并尝试组合在此处看到的方法:Render to 16bits unsigned integer 2D texture in WebGL2,但没有成功。
我更喜欢原生js,但愿意使用twgl或three.js等库,只要输入是Uint16Array
,则着色器可以输出任何格式(如float等)。
有没有更多webgl2经验的人可以指引我方向或提供一个有效的例子?我的代码里是否有简单的错误,我是否缺少更大的概念,这是否可能?非常感谢任何帮助!