Material Masking

10/22/2024

• ShaderMaterial
  • Highly efficient, running in parallel on the GPU
  • Allows for complex real-time effects not possible with standard materials







Landbook architectural design engine
From the left, original 3D model · masked


• fragmentShader
  • Executes per-pixel to determine final color output
  • Crucial for creating custom visual effects and material properties
  • fragmentShader properties must be compiled and run on the GPU using WebGL.
  • It uses GLSL (OpenGL Shading Language):
    • Runs directly on the GPU for high-performance rendering
    • In this context, used to define color output for each pixel (1.0 of vec4(color, 1.0) indicates that the color is fully solid)

    const createMaskMaterial = (color: number) => {
        return new THREE.ShaderMaterial({
            uniforms: {
                color: { value: new THREE.Color(color) }
            },
            fragmentShader: `
                uniform vec3 color;
                void main() {
                    gl_FragColor = vec4(color, 1.0);
                }
            `
        });
    };

    export const glassMaskMaterial = createMaskMaterial(0xff0000);                   // red 
    export const glassPanesMaskMaterial = createMaskMaterial(0x00ffff);              // cyan
    export const columnsMaskMaterial = createMaskMaterial(0xff00ff);                 // magenta
    export const wallMaskMaterial = createMaskMaterial(0x0000ff);                    // blue
    export const surroundingBuildingsMaskMaterial = createMaskMaterial(0xffff00);    // yellow
    export const surroundingParcelsMaskMaterial = createMaskMaterial(0xff4500);      // orange
    export const roadMaskMaterial = createMaskMaterial(0x000000);                    // black
    export const siteMaskMaterial = createMaskMaterial(0x00ff00);                    // green

---