antoniowest.dev/gpu-optimizer/live-utility
Case Study & Benchmarks•GitHub

WebGL Texture Channel Packer

Client-Side Pipeline

Pack discrete Roughness, Metallic, AO, and Height maps into a single 32-bit RGBA texture to eliminate sampler overhead and reduce VRAM.

Channel Assignments

Drag & Drop PNGs or Pick Procedural Presets
RRoughness
GMetallic
BAmbient Occlusion
AHeight / Displacement

Live WebGL 3D Preview

Sampling generated packed canvas
WebGL 2.0//Three.js PBR Viewport
•Drag to Orbit
R: Rough • G: Metal • B: AO

Packed Texture Inspector

1024 × 1024 PNG

Developer Integration Code

// 1. Uniform Declaration
uniform sampler2D u_packedPBR; // Single RGBA texture

// 2. Fragment Shader Sampling (1 Single Texture Lookup)
void main() {
    vec4 pbrSample = texture2D(u_packedPBR, vUv);
    
    float roughness = pbrSample.r; // Red Channel
    float metallic  = pbrSample.g; // Green Channel
    float ao        = pbrSample.b; // Blue Channel
    float height    = pbrSample.a; // Alpha Channel (Optional Displacement)

    // Standard PBR BRDF evaluation
    vec3 directLight = evaluatePBR(vNormal, vViewDir, roughness, metallic);
    vec3 ambientLight = u_ambientColor * ao;
    
    gl_FragColor = vec4(directLight + ambientLight, 1.0);
}