ビットマップ データの HTML Canvas 2D 要素を取得することは可能ですが、Canvas 3D/WebGL 要素のレンダリングされたコンテンツにビットマップ データとしてアクセスすることも可能ですか?
3 に答える
WebGL の readPixels の署名は、後のドラフトで変更されました。
毎回ピクセル データを含む新しい配列を返す代わりに、最後の引数として配列を渡します。
void readPixels(GLint x, GLint y, GLsizei 幅, GLsizei 高さ, GLenum フォーマット, GLenum タイプ, ArrayBufferView ピクセル)
これにより、複数の readPixels 操作で同じ配列を再利用できます。
readPixels を使用するほど直接的ではありませんが、これも機能する可能性があります。次のように、キャンバスを Image 要素にレンダリングすることもできます。
var img = document.getElementById("game-canvas").toDataURL("image/jpeg");
$("#shots").append("<img src=\"" + img + "\" width=\"320\" height=\"480\"/>");
ただし、これを機能させるには、特別なオプション preserveDrawingContext を使用して webgl コンテキストを取得する必要があります。
var gl = canvas.getContext("experimental-webgl", {preserveDrawingBuffer: true});
そこから、画像を簡単に操作したい場合は、それを 2D キャンバスにレンダリングし、必要に応じてそこにあるピクセルを読み取ることができます。
私はこれを定期的に使用して、遊んでいるものの「スクリーンショット」を撮ります。
WebGL 仕様のワーキング ドラフトから:
ArrayBufferView readPixels(GLint x, GLint y,
GLsizei width, GLsizei height, GLenum format, GLenum type)
渡された長方形内のピクセルを含む ArrayBufferView を返します。readPixels から返されるデータは、最後に送信された描画コマンドの時点で最新である必要があります。readPixels が描画バッファーにアクセスする前に、未処理の描画コマンドをすべて完了し、その結果を現在の描画バッファーに提示する必要があります。
返される ArrayBufferView の特定のサブクラスは、渡された型によって異なります。UNSIGNED_BYTE の場合は Uint8Array が返され、それ以外の場合は Uint16Array が返されます。