Lead Graphics Engineer - Web 3D (WebGPU Three.js TypeScript)

Role summary: We're a visualization studio building interactive, real-time 3D experiences for the web - and we care about one thing above all else: the image on screen. Our ambition is to deliver the most advanced real-time graphics the browser can produce, across a spectrum of devices from high-end desktop GPUs down to iPads, and to stay on the leading edge of the WebGPU era.

You'll be the technical authority on everything visual - the render pipeline, materials, shaders, and the performance that makes it run smoothly - while writing the kind of frontend code that gets it into users' hands. If you get excited by pulling a near-film-quality frame out of a tile-based mobile GPU, or by building a postprocess stack on WebGPU compute, this role is for you.

Responsibilities

• Rendering architecture & quality. Design and implement our render pipeline end to end - PBR materials, a composable postprocess stack (SSAO, SSGI, SSR, bloom, DOF, TAA), HDRI/IBL lighting, and a correct linear-color → tone-mapping (ACES / AgX) workflow.
• The render graph / pass system. Define how passes are ordered and composed, how the G-buffer and MRT targets are laid out, and how passes share data — and keep it maintainable as it scales.
• The GLB / material pipeline. Own material-slot conventions, the finish/variant system, and runtime material switching, working in lockstep with the asset team.
• Shaders. Write and maintain the shader and node-material code (TSL / WGSL / GLSL) where the stock toolset isn't enough - and have the judgment to know when it isn't.
• Renderer ↔ product integration. Architect how the 3D layer lives inside a real React + TypeScript application - clean APIs, sane state, and app-level performance, not just GPU performance.
• Performance across devices. Hit and hold our frame budgets on constrained hardware (e.g. iPad: 30+ FPS with the full postprocess stack), backed by a scalable quality system that adapts to device capability.
• Technical direction. Set the standards, review graphics code, and be the person the team trusts on anything rendering-related.

Must-have

• Substantial production experience with vanilla Three.js - shipped work, not demos - including its modern WebGPU renderer, node system, and TSL.
• Deep, current understanding of the WebGPU landscape as it stands today: the resource model (bind groups, pipelines, render & compute passes), what's solid vs. still moving, and real-world browser support and limitations. You actively track where this ecosystem is going.
• Strong hand-written shader experience in any language (WGSL / GLSL / HLSL / Metal). The GPU execution model matters, not the syntax - you can write and debug non-trivial shaders from scratch, and pick up WGSL/TSL fluently if you haven't already.
• Real-world experience with PBR materials and HDRI/IBL lighting in a product context.
• Solid grasp of postprocess composition: pass ordering, G-buffer layout, how passes interact, and what breaks when you reorder them.
• Graphics-API fundamentals across WebGL2 and WebGPU: render targets, MRT, depth/stencil, texture formats and precision- and how the two backends differ. You understand the Three.js WebGPU renderer's automatic WebGL2 fallback and its consequences (compute passes don't exist on WebGL2, TSL doesn't map 1:1 to both targets), and you design pipelines that degrade gracefully.
• A color-correctness mindset - linear workflow, color spaces, tone mapping - and the instinct to spot when something looks wrong.
• Fluency profiling and optimizing real GPU workloads, especially on mobile / tile-based GPUs.
• Strong frontend & core engineering. Non-trivial React + TypeScript under your belt, plus clean object-oriented architecture, sound design patterns where they earn their place, and real separation of concerns - you build a maintainable application around the renderer that holds up as it grows, not just the renderer itself.

Nice to have

• Experience designing render-graph / pass-system architectures for a large, evolving pipeline.
• Deep glTF / GLB asset optimization: Draco, meshopt, KTX2 / Basis, texture atlasing, mesh quantization, LOD and instancing strategies.
• Temporal techniques (TAA, temporal upsampling), GPU-driven rendering, compute-based particles or simulation.
• Mobile GPU profiling in anger: frame timing, timer queries, draw-call and bandwidth budgets, Spector.js / platform tooling.
• Open-source contributions to Three.js or the wider web-graphics ecosystem.

Our stack

TypeScript · React · vanilla Three.js (r183+, not react-three-fiber) · WebGPU.

We architect the engine and domain logic as well-structured object-oriented TypeScript; React is the declarative UI layer, not where the 3D logic lives.