# How I Make My Three.js Projects - WebGPU Production - Threejs Conference Talk Keynote

> For years, people have asked me: How do you make these projects?

Canonical page: https://andersonmancini.dev/videos/how-i-make-my-three-js-projects-webgpu-production-threejs

Published: 2026-09-28 · Duration: 46:14 · Category: Talks · Tags: three.js, webgpu, tsl, realtimegraphics

Watch: [YouTube](https://www.youtube.com/watch?v=wnSozPb_KKg) · [Subscribe to the channel](https://www.youtube.com/@AndersonMancini?sub_confirmation=1)

For years, people have asked me: How do you make these projects?

This talk contains some of the answers.

I originally presented this at the Three.js Conference in Paris, where I also taught a two-day workshop on TSL and Three.js together with Sunag, the creator of TSL.

Unfortunately, the recording of my talk at the conference didn’t work. So I recorded the presentation again for anyone who missed it.

In this talk, we review a real WebGPU project and explore some of the techniques I use in production, including Octahedral Impostors, Lens Flare, performance optimization, and other techniques that help make complex real-time experiences possible.

The project we review downloads only 6 MB, while everything is rendered in real time.

Project:

If you missed the Three.js Conference, here’s the talk again.

## Links from the video

- [Live demo](https://webgpu-building.vercel.app/)

## Related projects

- [WebGPU Archiviz](https://andersonmancini.dev/projects/webgpu-archiviz.md) — 6MB Architecture Visualization
- [Ultimate Lens Flare](https://andersonmancini.dev/projects/ultimate-lens-flare.md) — Realistic lens flare component for R3F and Threejs
- [Octahedral Impostors](https://andersonmancini.dev/projects/octahedral-impostors.md) — WebGPU direction-atlas impostors for cheap distant meshes

## Related articles

- [Speaking at the first Three.js Conference, in Paris](https://andersonmancini.dev/blog/three-js-conf-paris-2026.md)