0

嗨，我有存储在 Uin8Array 中的 jpeg 压缩数据。我在 Webgl 中阅读了有关纹理的信息。我看到的所有链接在加载图像后初始化纹理（由 jpeg 数据创建，image.src = "some data" image.onload (load texture)）。但这是异步过程。这个过程工作正常。但是我可以使用函数compressedTexImage2D(target, level, internalFormat, width, height, border, data) 内部格式应该与jpeg相关，数据将采用压缩jpeg格式的形式（宽度或高度不是2的pow形式) 所以整个过程应该是同步的？或者 webgl 中的任何其他方法直接采用 jpeg 压缩数据而不加载图像？

4

1 回答 1

2

所以这是一个坏消息，截至 2012 年 9 月，WebGL 实际上并不支持compressedTexImage2D. 如果您尝试调用该函数，它将始终返回INVALID_ENUM错误。如果您对此感到好奇，请参阅说明它的规范部分。

现在一些好消息是，您可以从Uint8Arrayjpeg 数据创建纹理。我不确定如何同步执行此操作，但也许这段代码无论如何都会有所帮助。

基本上我们必须将原始Uint8Array数据转换为base64字符串，这样我们就可以创建一个以base64字符串为图像源的新图像。

所以这里是代码：

function createTexture(gl, data) {
    var stringData = String.fromCharCode.apply(null, new Uint16Array(data));
    var encodedData = window.btoa(stringData);
    var dataURI = "data:image/jpeg;base64," + encodedData;

    texture = gl.createTexture();
    texture.image = new Image();

    texture.image.onload = function () {
        gl.bindTexture(gl.TEXTURE_2D, texture);
        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.image);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
        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);
        gl.bindTexture(gl.TEXTURE_2D, null);
    };

    texture.image.src = dataURI;

    return texture;
}

我在这里有一个函数的演示。为了保持文件小，我只使用了 24x24 像素的 jpeg。万一您想知道，该功能也适用于非 2 高度/宽度幂的 jpeg。

如果您想查看演示的完整源代码，请查看此处。

于 2012-09-30T01:21:56.700 回答