WebGL:非方形 alpha 纹理的数据

Posted

技术标签:

【中文标题】WebGL:非方形 alpha 纹理的数据【英文标题】:WebGL : data to non square alpha texture 【发布时间】:2013-03-03 20:13:01 【问题描述】:

我对 webGL 有一个奇怪的问题。

我正在使用动态生成的纹理,其中只有 Alpha 通道很重要。 代码如下:

var texture  = new Uint8Array(ar); // ar is my array
gl.bindTexture(gl.TEXTURE_2D, this.transparencyTexture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.ALPHA, array.length, array[0].length, 0, gl.ALPHA, gl.UNSIGNED_BYTE, texture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
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);   

我总是使用 POT 数组的“宽度”和“高度”,但只要“宽度”“高度”它就不起作用。所以它目前只适用于正方形。

可以做什么?

编辑:

http://jsfiddle.net/SergeJcqmn/EAmjU/9/

【问题讨论】:

看起来像是一个浏览器错误,但如果没有更多细节就很难知道。例如,你的纹理坐标是什么?你从gl.getError() 得到什么?它的视觉效果如何? 只是好奇但array.length, array[0].length?所以你在 javascript 中有一个二维数组?这与ar 有什么关系? 我提供了正确的坐标(也用于其他纹理)。 gl.getError() 返回 0。它仅显示为 vec4(0, 0, 0, 0) 像素/片段。 我正确地从二维数组生成 ar。我检查了 ar 长度,它等于 array.length * array[0].length。即使我生成错误(我没有),它也会导致 100% vec4(0, 0, 0, 0) 纹理之外的东西。另外,当我使用“方形”纹理时,效果还不错。 这是一个演示:serge.snakeman.be/Demo/Portail.html 上条(某种能量条)应该每帧用随机数量的蓝色填充(然而,由于我遇到的问题,它是纯黑色的) . 【参考方案1】:

在jsfiddle中,js的第76行不正确:

ar.push(array[x][(array.length - 1) - y] ?  128 : 0);

我认为应该是这样的:

ar.push(array[x][(array[0].length - 1) - y] ?  128 : 0);

【讨论】:

你完全正确。我很惊讶没有报告“超出索引”错误(因为那是错误)。谢谢。

以上是关于WebGL:非方形 alpha 纹理的数据的主要内容,如果未能解决你的问题,请参考以下文章

WebGL和OpenGL的差异 - UNPACK_PREMULTIPLY_ALPHA_WEBGL

将矩形图像数据打包成方形纹理

使用 GLSL 在两个不同的通道上进行 Alpha 混合纹理

Three.js中同一网格面上的多个透明纹理

Webgl 每像素 1 位纹理

webgl 纹理