webgl - 原始 jpeg 数据同步加载到 webgl 纹理中

Question

嗨，我有 jpeg 压缩数据存储在 Uin8Array 中。我在 Webgl 中读到了有关纹理的内容。我所看到的所有链接在加载图像后初始化纹理(由jpeg数据创建，image.src =“一些数据”image.onload(加载纹理))。但这是异步过程。这个过程运行良好。但是我可以使用函数compressedTexImage2D(target，level，internalFormat，width，height，border，data)内部格式应该与jpeg相关并且数据将采用压缩jpeg格式的形式(宽度或高度不是2的pow形式)这样整个过程应该是同步的？或者 webgl 中的任何其他方法可以直接获取 jpeg 压缩数据而不加载图像？

Answer 1

这是一个坏消息，截至 2012 年 9 月，WebGL 实际上并不支持 compressedTexImage2D。如果您尝试调用该函数，它将始终返回 INVALID_ENUM 错误。如果您好奇here是规范中对其进行解释的部分。

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

基本上我们必须将原始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;
}

我有一个函数 here 的演示。为了保持文件较小，我仅使用 24x24 像素的 jpeg。以防万一您想知道，该函数也适用于高度/宽度非 2 次方的 jpeg。

如果您想查看演示的完整源代码，请查看 here .