0

こんにちは、 Uin8Array に保存されている jpeg 圧縮データがあります。Webgl のテクスチャについて読みました。私が見たすべてのリンクは、画像をロードした後にテクスチャを初期化します（jpegデータによって作成され、image.src = "some data" image.onload（load texture））。しかし、これは非同期プロセスです。このプロセスは正常に機能します。しかし、関数 compressTexImage2D(target, level, internalFormat, width, height, border, data) を使用できますか? 内部形式は jpeg に関連している必要があり、データは圧縮された jpeg 形式の形式になります (幅または高さは 2 の pow の形式ではありません）プロセス全体が同期するように？または、画像をロードせずに jpeg 圧縮データを直接取得する webgl の他の方法はありますか?

4

1 に答える 1

2

したがって、2012年9月現在の悪いニュースは次のとおりです。WebGLは実際にはサポートしていませんcompressedTexImage2D。関数を呼び出そうとすると、常にINVALID_ENUMエラーが返されます。興味があれば、ここにそれを説明する仕様のセクションがあります。

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;
}

ここに関数のデモがあります。ファイルを小さく保つために、24x24ピクセルのjpegのみを使用しています。ご参考までに、この関数は、高さ/幅が2の非累乗のjpegでも機能します。

デモの完全なソースコードを確認したい場合は、こちらをご覧ください。

于 2012-09-30T01:21:56.700 に答える