Question

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

Answer 1

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

现在有些好消息是你可以用Uint8Array jpeg数据创建一个纹理。我不确定如何同步这样做，但也许这段代码无论如何都会有所帮助。

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

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

1 个答案: