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