画像処理後にユニフォームを更新したり、フラグメントシェーダーからデータを取得したりする

Question

フラグメントシェーダー（スレッシュホルダー）で画像処理を行いました。JavaScriptから結果にアクセスしたいと思います。その後、通常のJavaScriptを使用して修正した画像を保存することができます。

フラグメントシェーダーにセグメント化される元のテクスチャを均一に渡してから、しきい値を設定します。それは画面上で正しく表示されます。今私は、それを保存するためにしきい値画像にアクセスしたいと思います。

フラグメントシェーダが画面のレンダリングされたピクセル上で動くということを考えれば、それは意味をなさないでしょう。

ほとんどの制約を理解していますが、断片シェイダーで重いイメージ処理を行い、何らかの形でシェーダーから処理結果を取得できるようにするには、一般的には不思議です。

私が考えているもう一つのユースケース：マウスカーソルから充填洪水など

Javascriptが私のために遅すぎると多分ウェブ労働者は助けることができるが、私は私のイメージを行うためにGPUを活用するために期待していました処理。 （私は現在THREEJS +カスタムシェーダー使用しています - FYIおそらく関連ではなく）を

ベスト、 ニコラス

Answer 1

（私が正しく問題を理解している場合）あなたの問題を解決するには、2つの方法があります。だから、我々はcanvasを持っているとしましょう。処理された画像をそのキャンバスにレンダリングします。今、私たちは、JPEGまたはPNGブロブとして画像を保存することができます：

canvas.toBlob(
    (blob) => { 
     /* do something with the blob, i.e. send it to a server */ 
    }, 
    'image/jpeg', 
    0.95 
); 

やデータのURLなど：

const imageAsDataUrl = canvas.toDataURL('image/png'); 

また、何らかの理由であなたが画像の画素の実際の値にアクセスしたい場合は、あなたはWebGLのコール（glがコンテキストであることを、仮定して）を介してそれらを読むことができます：

const pixels = new Uint8Array(4 * canvas.width * canvas.height); 
gl.readPixels(0, 0, canvas.width, canvas.height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);