Custom Depth Shader from grayscale to RGBA - three.js

Question

What do i have to change in this vertexshader/fragmentshader from simple grayscale depth to RGBA encoded depth, especially to display ChromaDepth(tm)-color-scheme instead of grayscale?
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

You are outputting the color in the line color = vec3(depth). This variant of the function vec3 creates a vector where all 3 parts are equal to the input value. You can just as well use it to create a 3-part vector: color = vec3(red, geen, blue). When you also want to pass an alpha value to the fragment shader, you have to change this to a vec4(red, green, blue, alpha), and also change the declaration of varying vec3 color to varying vec4 color in both the vertex- and the fragment shader.
The algorithm used by ChromaDepth to calculate the correct red, green and blue value from the depth is published here. This is the relevant section:
//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)
The input value of these functions is "Range" which is what you call "depth" in your code (0.0 is closest and 1.0 is furthest away).

Answer 2

Thank you Philipp. Here's my implementation:
<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>