WebGLコンテキストの外でデプスバッファの値にアクセスするには？

Question

WebGLシーン（THREE.jsから作成）が与えられた場合、フレームバッファがframebufferTexture2Dを使用してテクスチャにバインドされている場合、DEPTH_ATTACHMENTから浮動小数点値（WebGLコンテキスト外のデータ配列として）にどうやってアクセスしますか？

これまで、奥行きテクスチャ情報にアクセスしてRGB形式にエンコードするカスタムシェーダオーバーライドを使用して、シーンをテクスチャターゲットにレンダリングする1つのソリューションをまとめました。使用されるコードは、ここにあるこのTHREE.jsの例に非常に似ています：Depth-Texture-Example。これは、レンダリングされた後

#include <packing> 

varying vec2 vUv; 
uniform sampler2D tDiffuse; 
uniform sampler2D tDepth; 
uniform float cameraNear; 
uniform float cameraFar; 

float readDepth (sampler2D depthSampler, vec2 coord) { 
    float fragCoordZ = texture2D(depthSampler, coord).x; 
    float viewZ = perspectiveDepthToViewZ(fragCoordZ, cameraNear, cameraFar); 
    return viewZToOrthographicDepth(viewZ, cameraNear, cameraFar); 
} 

void main() { 
    vec3 diffuse = texture2D(tDiffuse, vUv).rgb; 
    float depth = readDepth(tDepth, vUv); 
    gl_FragColor.rgb = vec3(depth); 
    gl_FragColor.a = 1.0; 
} 

Iは、アレイ内の特定のピクセルを読み取るためにreadPixelsを使用することができます。しかし、このオプションは、vec3(float) = vec3(float, float, float)と与えられた256個の離散値に制限された非常に低い精度を持っています。この特定の方法や代替方法の精度を高める方法はありますか？

究極的には、WebGLコンテキストの外側で効率的に浮動小数点値の配列としてデプスバッファにアクセスすることが必要です。私はかなり良い深さのバッファを作成するカスタムラスタライザを持っていますが、私はすでに実行されているステップをやり直す時間を無駄にしたくありません。

Answer 1

一つの可能​​性はvec3に32ビットIEEE 754浮動小数点値の24の最下位ビットを符号化することであろう。

vec3 PackDepth(float depth) 
{ 
    float depthVal = depth * (256.0*256.0*256.0 - 1.0)/(256.0*256.0*256.0); 
    vec4 encode = fract(depthVal * vec4(1.0, 256.0, 256.0*256.0, 256.0*256.0*256.0)); 
    return encode.xyz - encode.yzw/256.0 + 1.0/512.0; 
} 

R、GとB色チャネルは範囲の深さに復号化することができます[ 0.0、1.0]のようになります。

depth = (R*256.0*256.0 + G*256.0 + B)/(256.0*256.0*256.0 - 1.0);