從灰度到RGBA的自定義深度着色器

Question

在這個頂點着色器/碎片着色器中，從簡單灰度深度到RGBA編碼深度有什麼變化，尤其是要顯示ChromaDepth（tm）-color-scheme而不是灰度？ http://www.chromatek.com/pix/101color.jpg

<script id="vert" type="webgl/fragment-shader"> 
    uniform float near; 
    uniform float far; 
    varying vec3 color; 

    void main() { 
     gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 
     float depth = 1.0 - ((gl_Position.z - near)/(far - near)); 
     color = vec3(depth); 
    } 
</script> 
<script id="frag" type="webgl/fragment-shader"> 
    varying vec3 color; 

    void main() { 
     gl_FragColor = vec4(color, 1.0); 
    } 
</script> 

Answer 1

你在該行color = vec3(depth)輸出的顏色。函數vec3的這個變體創建了一個向量，其中所有3個部分都等於輸入值。您也可以使用它來創建3部分矢量：color = vec3(red, geen, blue)。如果您還想將Alpha值傳遞給片段着色器，則必須將其更改爲vec4（紅色，綠色，藍色，alpha），並且還要在頂點着色器和片段着色器中將varying vec3 color的聲明更改爲varying vec4 color 。

ChromaDepth用於從深度計算正確的紅色，綠色和藍色值的算法已發佈here。這是相關部分：

//Definition of 3d_red component of the color. The value show be between 1 
//and 0 over the Range of 0 to 0.75. It should be 0 for all Ranges greater 
//than 0.75. From 0 to 0.75 it is calculated by Red_func. 
define Red_Range Range/0.9 
define Red_func 
(-2.13*Red_Range^4-1.07*Red_Range^3+0.133*Red_Range^2+0.0667*Red_Range+1) 
define Cc (Red_func <0 || Red_Range>0.75 ? 0:1) 
define Dd (Red_func >1 ? 1:0) 
define 3d_red (Red_Range<0.75 ? Red_func:Cc*Dd) 

//Definition of 3d_green component of the color. The value should be between 
//0 and 1 over the Range of 0 to 1, starting from 0, rising to 1, then falling 
//to 0 again. It should be 0 at both extremes of Range. 
define Green_func1 (1.6*Range^2+1.2*Range) 
define Green_func2 (3.2*Range^2-6.8*Range+3.6) 
define 3d_green (Range<=0.5 ? Green_func1:Green_func2) 

//Definition of 3d_blue component of the color. The value should rise from 
//0 at a Range of 0.5 up to 1 at a Range of 1. Below Range 0.5 the value 
//must be 0. 
define Blue_func (-4.8*Range^2+9.2*Range-3.4) 
define 3d_blue (Range>0.5 ? Blue_func:0) 

這些函數的輸入值是「範圍」，這是你所說的在你的代碼「深度」（0.0最接近和1.0是最遠）。

Answer 2

謝謝你菲利普。這是我的實施：

<script id="vert" type="webgl/fragment-shader"> 
     uniform float near; 
     uniform float far; 
     varying vec3 color; 

     float func_r(float r_range) 
     { 
      float r_depth = (-2.13*r_range*r_range*r_range*r_range-1.07*r_range*r_range*r_range+0.133*r_range*r_range+0.0667*r_range+1.0); 
      return r_depth; 
     } 

     float func_g1 (float g_range) 
     { 
      float g_depth = (1.6*g_range*g_range+1.2*g_range); 
      return g_depth; 
     } 

     float func_g2 (float g_range2) 
     { 
      float g_depth2 = (3.2*g_range2*g_range2-6.8*g_range2+3.6); 
      return g_depth2; 
     } 

     float func_b (float b_range) 
     { 
      float b_depth = (-4.8*b_range*b_range+9.2*b_range-3.4); 
      return b_depth; 
     } 

     void main() { 
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 
      float depth = 0.0 + ((gl_Position.z - near)/(far - near)); 

      /* ### Definition of 3d_red component of the color.*/ 
      float Red_Range = depth/0.9; 
      float Cc = (func_r(Red_Range) < 0.0 || Red_Range > 0.75 ? 0.0:1.0); 
      float Dd = (func_r(Red_Range) > 1.0 ? 1.0:0.0); 
      float calc_r = (Red_Range < 0.75 ? func_r(Red_Range) : Cc*Dd); 

      /* ### Definition of 3d_green component of the color.*/    
      float calc_g = (depth <= 0.5 ? func_g1(depth) : func_g2(depth)); 

      /* ### Definition of 3d_blue component of the color.*/      
      float calc_b = (depth > 0.5 ? func_b(depth) : 0.0); 

      color = vec3(calc_r,calc_g,calc_b); 
     } 
    </script> 
    <script id="frag" type="webgl/fragment-shader"> 
     varying vec3 color; 

     void main() { 
      gl_FragColor = vec4(color, 1.0); 
     } 
    </script>