Engineered a web-based, real-time asset optimization pipeline that automates texture channel packing, executes custom WebGL fragment shader passes, and reduces browser VRAM footprint by up to 75% while locking rendering at 60 FPS.
Discrete grayscale PBR material maps (Roughness, Metallic, Ambient Occlusion, and Height) are consolidated into a single 32-bit RGBA texture. This compresses memory footprint and removes memory fragmentation on the GPU.
Replaces 4 independent texture lookups in the fragment shader with a single vectorized sample (texture2D(u_packedPBR, vUv)), eliminating texture unit stalls and reducing memory bus pressure.
Runs 100% client-side via raw WebGL 2.0 and HTML5 Canvas with sub-second TTFB, requiring zero backend servers, Docker containers, or expensive cloud GPU processing clusters.
Direct on-canvas monospace overlay HUD computing exponential moving average FPS, delta frame times, draw calls, and dynamic VRAM byte delta calculations in real time.
// 1. Uniform Declaration (1 Combined RGBA Texture instead of 4)
uniform sampler2D u_packedPBR;
// 2. Fragment Shader Sampling (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 (Displacement)
// Standard PBR BRDF evaluation with 1/4th the texture sampler pressure
vec3 directLight = evaluatePBR(vNormal, vViewDir, roughness, metallic);
vec3 ambientLight = u_ambientColor * ao;
gl_FragColor = vec4(directLight + ambientLight, 1.0);
}Inspect channel assignments, test live packing, and examine real-time WebGL shader rendering directly in your browser.