three.jsでのRGBA深度値のアンパック

Question

私はMeshDepthMaterialを使用してthree.jsで簡単なGPUピッカーを実装しようとしています。

https://github.com/mrdoob/three.js/blob/acdda10d5896aa10abdf33e971951dbf7bd8f074/src/renderers/shaders/ShaderChunk/packing.glsl

しかし、値がとして出てくる： https://github.com/mrdoob/three.js/blob/master/examples/webgl_interactive_cubes_gpu.html

と深さを再構築するためにJavaScriptにここからunpackRGBAToDepth機能を移植することによって：私は、次の例を使用してカラー値を抽出するために管理してきました0.0から255.0までの浮動小数点（私はそれが0.0から1.0または実際の深さの間にあることを期待していました）。私の質問は次のとおりです。この値をどうすれば使うことができますか？それを実際の深さに変換できますか？もしそうなら、どうですか？

Answer 1

自分自身でこの問題に遭遇した後（おそらく、three.jsからコードをコピーするのと同じパスをたどります）、問題が見つかった可能性があります。

JSのRGBAテクスチャから読み込むと、Uint8形式のカラー値が得られますが、GLSLのテクスチャルックアップ（計算結果はそこからコピーされたものと思われます）はrgba-float値を返します。

ですから、開梱前に1/255と色ベクトルを乗算する必要があります。

// ... 

renderer.readRenderTargetPixels(
    depthRenderTarget, x, y, 1, 1, pixelBuffer); 

vec4 
    .fromArray(pixelBuffer) 
    .multiplyScalar(1/255); 

var logz = vec4.dot(unPackFactors); 

// ...