Three.js 从灰度到RGBA的自定义深度着色器

Three.js 从灰度到RGBA的自定义深度着色器,three.js,webgl,shader,Three.js,Webgl,Shader,在这个vertexshader/fragmentshader中,我需要将简单灰度深度更改为RGBA编码的深度,尤其是显示ChromaDepth(tm)颜色方案而不是灰度? 近距离均匀浮动; 均匀浮动远; 可变的vec3颜色; void main(){ gl_位置=projectionMatrix*modelViewMatrix*vec4(位置,1.0); 浮动深度=1.0-((gl_位置z-近)/(远-近)); 颜色=vec3(深度); } 可变的vec3颜色; void main(){

在这个vertexshader/fragmentshader中,我需要将简单灰度深度更改为RGBA编码的深度,尤其是显示ChromaDepth(tm)颜色方案而不是灰度?


近距离均匀浮动;
均匀浮动远;
可变的vec3颜色;
void main(){
gl_位置=projectionMatrix*modelViewMatrix*vec4(位置,1.0);
浮动深度=1.0-((gl_位置z-近)/(远-近));
颜色=vec3(深度);
}  
可变的vec3颜色;
void main(){
gl_FragColor=vec4(颜色,1.0);
}

您正在输出行
color=vec3(深度)
中的颜色。函数vec3的此变量创建一个向量,其中所有3个部分都等于输入值。您也可以使用它创建一个由三部分组成的向量:
color=vec3(红色、绿色、蓝色)
。如果还希望将alpha值传递给片段着色器,则必须将其更改为vec4(红色、绿色、蓝色、alpha),并将顶点着色器和片段着色器中的
variable vec3 color
声明更改为
variable vec4 color

ChromaDepth用于从深度计算正确的红色、绿色和蓝色值的算法已发布。这是相关章节:

//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)
//颜色的3d\u红色分量的定义。显示的值必须介于1之间
//在0到0.75的范围内。对于所有更大的范围,该值应为0
//大于0.75。从0到0.75,由Red_func计算。
定义红色范围/0.9
定义红色函数
(-2.13*红色范围^4-1.07*红色范围^3+0.133*红色范围^2+0.0667*红色范围+1)
定义Cc(红色函数0.75?0:1)
定义Dd(红色函数>1?1:0)

定义3d_红色(红色范围谢谢Philipp。以下是我的实现:

<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>

近距离均匀浮动;
均匀浮动远;
可变的vec3颜色;
浮动功能(浮动范围)
{  
浮动r_深度=(-2.13*r_范围*r_范围*r_范围*r_范围-1.07*r_范围*r_范围*r_范围+0.133*r_范围*r_范围+0.0667*r_范围+1.0);
返回r_深度;
}
浮动功能g1(浮动范围)
{
浮动g_深度=(1.6*g_范围*g_范围+1.2*g_范围);
返回g_深度;
}
浮动功能g2(浮动范围2)
{
浮动g_深度2=(3.2*g_范围2*g_范围2-6.8*g_范围2+3.6);
返回g_深度2;
}
浮动功能(浮动范围)
{
浮动b_深度=(-4.8*b_范围*b_范围+9.2*b_范围-3.4);
返回b_深度;
}
void main(){
gl_位置=projectionMatrix*modelViewMatrix*vec4(位置,1.0);
浮动深度=0.0+((gl_位置z-近)/(远-近));
/*####定义颜色的3d#红色分量*/
浮动红色范围=深度/0.9;
浮点Cc=(函数r(红色范围)<0.0 | |红色范围>0.75?0.0:1.0);
浮动Dd=(功能(红色范围)>1.0?1.0:0.0);
浮动计算值=(红色范围<0.75?函数(红色范围):Cc*Dd);
/*####定义颜色的3d#绿色组件。*/
浮动计算=深度0.5?函数b(深度):0.0;
颜色=vec3(计算r、计算g、计算b);
}  
可变的vec3颜色;
void main(){
gl_FragColor=vec4(颜色,1.0);
}
<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>