Learn Three.js - Third Edition

Creating a custom bit shader

Normally, colors are represented as a 24-bit value, which gives us about 16 million different colors. In the early days of computing, this wasn't possible, and the colors where often represented as 8 or 16-bit colors. With this shader, we'll automatically transform our 24-bit output to a color depth of 4 bits (or anything that you want).

Since it hasn't changed with regard to our previous example, we'll skip the vertex shader and directly list the instances of the uniforms property, as follows:

uniforms: { 
 
  "tDiffuse": { type: "t", value: null }, 
  "bitSize":  { type: "i", value: 4 } 
 
}

The fragmentShader code is as follows:

fragmentShader: [ "uniform int bitSize;", "uniform sampler2D tDiffuse;", "varying vec2 vUv;", ...