Make things. Do stuff.

Portfolio and journal for Stephen Schieberl

modelsAndMaterials introduces Stunner’s approach to materials, model loading and generation, and reflection and glass refraction. Optimized for mobile.

STUNNER

Cinematic Rendering for the Web

At dotdotdash, we build pieces which ask a lot from a graphics system. Real-time environments, simulations, interactive art, and massive displays are not exactly what the web was built for. Historically, our more demanding work has lived in native applications, where we have direct access to the GPU and full control of the rendering pipeline.

Native gave us performance. The web gave us reach. We wanted both.

That was the problem which led to the development of Stunner, a high-performance cinematic renderer built on WebGPU. It gives us a path for moving high-end, graphics-heavy pieces to the web without giving up the tools we rely on to make them look and feel right. It includes clustered PBR lighting, shadows, glTF scenes and animation, dynamic textures, and a full post-processing stack. Its USD plug-in has high compatibility for materials, cameras, lighting, animation, and more--so you can work in the DCC environment of your choice rather, than a proprietary editor. It is the kind of foundation we need for production work, packaged for an ordinary web project.

Stunner is deliberately not a game engine. Game engines are useful, but they are heavy, and arrive with a lot of opinions about what you are making. Stunner handles the rendering and leaves the structure of the experience to the developer. If you do want to build a game engine, it can serve as its rendering system.

The core has no dependencies. It is source-only TypeScript, rather than a compiled black box. You can step through it, understand exactly what it is doing, and change it when your project has a requirement the library did not anticipate. Developers can customize the pipeline without modifying the library by using pass injection. Making the engine transparent and easy to tweak was not an afterthought. It was part of the design.

Stunner was built for the way software is being developed now. It ships with a thorough but concise set of context documents for coding agents. A routing document points the agent to focused material on the renderer, frame pipeline, lighting, shadows, post effects, asset loading, performance controls, and extension points. A small agent can load only what it needs. A larger agent can go deep without inventing its own version of the architecture. The documentation does not replace the source. It helps both the developer and the agent navigate it.

The demo project on GitHub covers everything from animated models and dynamic lighting to crowds, flocking, terrain, Gaussian splats, and USD assets. You can also run the demo in your browser to see what it does before pulling down the code.

Stunner is available now on npm under the MIT license. If you need a complete game engine, this is not one. If you need a fast, transparent rendering foundation for making something unusual on the web, it might be exactly what you are looking for.