topical media & game development

talk show tell print

mobile-query-three-vendor-three.js-shaders-UnpackDepthRGBAShader.js / js



  

author: alteredq / alteredqualia.com/ Unpack RGBA depth shader - show RGBA encoded depth as monochrome color

  
  
  THREE.UnpackDepthRGBAShader = {
  
          uniforms: {
  
                  "tDiffuse": { type: "t", value: null },
                  "opacity":  { type: "f", value: 1.0 }
  
          },
  
          vertexShader: [
  
                  "varying vec2 vUv;",
  
                  "void main() {",
  
                          "vUv = uv;",
                          "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
  
                  "}"
  
          ].join("\n"),
  
          fragmentShader: [
  
                  "uniform float opacity;",
  
                  "uniform sampler2D tDiffuse;",
  
                  "varying vec2 vUv;",
  
                  // RGBA depth
  
                  "float unpackDepth( const in vec4 rgba_depth ) {",
  
                          "const vec4 bit_shift = vec4( 1.0 / ( 256.0 * 256.0 * 256.0 ), 1.0 / ( 256.0 * 256.0 ), 1.0 / 256.0, 1.0 );",
                          "float depth = dot( rgba_depth, bit_shift );",
                          "return depth;",
  
                  "}",
  
                  "void main() {",
  
                          "float depth = 1.0 - unpackDepth( texture2D( tDiffuse, vUv ) );",
                          "gl_FragColor = opacity * vec4( vec3( depth ), 1.0 );",
  
                  "}"
  
          ].join("\n")
  
  };
  


(C) Æliens 04/09/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.