See Live demo.

This is example of a PBR (Physically Based Rendering) with IBL (Image Based Lighting) written in WebGPU. At the moment of writing this I couldn't find any learning materials explaining how to do this so I made it with a lot of trial and error, exploring how to map WebGL concept and APIs to WebGPU.

I hope it will be useful to you!

1. Install dependencies (works interchangeably with pnpm and yarn if you prefer).

   npm install
   

2. Run development server.

   npm run vite dev
   

3. Open https://localhost:3000 in your browser.

• Learn OpenGL
• Filament
• Real Shading in Unreal Engine 4