Babylonjs

Easter eggs and game secrets are among the most fascinating and powerful aspects of video games in my experience.

Stumbling onto one feels like taking a step outside the intended path and seeing the game reward our curiosity. We know many people will simply miss it, and that makes it feel special.

For a brief instant, there is a connection between the developer and the player, as we wonder: “what did it mean to you?”.

Introduction

It’s been a few month since I started pondering making a better ocean for Cosmos Journeyer’s procedural planets. To have actual waves moving around and not just a scrolling normal maps would make a significant difference in visual quality.

Coincidentally, I was also taking a course on computer animation (INF585) at Ecole Polytechnique, and I had the opportunity to choose my final project. Long story short, I decided to implement Jerry Tessendorf’s FFT-based ocean simulation on WebGPU, and this is my project report.

Realtime shader programming is challenging. Although the GPU is very fast, when adding more and more shaders, you always reach a point where your GPU is no longer fast enough. This is where optimization comes into play.

Shaders can be optimized in 2 ways: improve the shader code itself, which can give decent improvements, and precomputing data, which can make the difference between 20fps and 500fps.

In this blog post series, I will be presenting how I optimized the shaders of Cosmos Journeyer: a procedural universe running in the web browser.

Hello again! This is the second part of my compute shader series. If you haven’t read the first part yet, you can find it here.

Now that we know how to create simple compute shaders, we will see how to parameterize them with uniforms.

No, not that kind of uniform!

What are shader uniforms?

Last time we added 2 arrays on the GPU. What if we wanted to add the first one to twice the second one? We would have to change the underlying WGSL code to do so.

Welcome to my tutorial on compute shaders using WebGPU and BabylonJS! It is meant to be accessible to beginers and then to provide concrete use cases of compute shaders in the context of terrain generation and grass rendering.

What is a compute shader?

Let’s say you have an array of numbers like this:

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

Now if you want to add 1 to each number, you can do it like this: