创建 WebGL 纹理会截断一些数据答案

【问题标题】：Creating WebGL texture cuts off some of the data创建 WebGL 纹理会截断一些数据
【发布时间】：2016-12-09 18:09:27
【问题描述】：

我正在使用 WebGL，并试图从多个图像中创建一个纹理，所有图像都由浮点数组表示，然后我将其转换为 RGBA。

这是我的代码：

var dataTexture = new Uint8Array(array.length*4);
for(var i=0; i<array.length; i+=4)
{
    dataTexture[i] = 255*parseFloat(array[i/4]);
    dataTexture[i+1] = 255*255*parseFloat(array[i/4]);
    dataTexture[i+2] = 255*255*255*parseFloat(array[i/4]);
    dataTexture[i+3] = 255;
}

gl.bindTexture(gl.TEXTURE_2D, self.mTexture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 512, 512, 0, gl.RGBA, gl.UNSIGNED_BYTE, dataTexture);      
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);

gl.drawArrays(gl.TRIANGLES, 0, 6);

这是显示的图像：

我无法发布理想的图像，但所有黑条之间应该有一些东西。

我不明白的是，当我尝试预设值时，它会起作用，就像下面的代码一样：

这是显示的图像。

这不是理想的输出，而只是设置值如何工作的示例。

为什么我的图像的中间部分丢失了，我可以做些什么来修复它？谢谢！

【问题讨论】：

i<array.length 应该是i<dataTexture.length
@LJᛃ 非常感谢！如果您将此作为答案，我会将其标记为正确！ :)

标签： javascript image-processing webgl

【解决方案1】：

不清楚你想在这里做什么。

dataTexture[i] = 255*parseFloat(array[i/4]);
dataTexture[i+1] = 255*255*parseFloat(array[i/4]);
dataTexture[i+2] = 255*255*255*parseFloat(array[i/4]);
dataTexture[i+3] = 255;

您可以在 Uint8Array 元素中放入的最大值是 255。那么您的 array 条目的范围是多少，因为您将它们乘以 65025，然后乘以 16581375。

array 也是由文字构成的吗？否则你为什么要调用 parseFloat？

【讨论】：