Maxime's Avatar

Maxime

@maxime.bsky.social

πŸ‡«πŸ‡· in πŸ‡ΊπŸ‡Έ NYC πŸ—½ Frontend tango.us Three.js, Shaders, React, Next.js Thoughts and learnings on https://blog.maximeheckel.com Work on https://maximeheckel.com

5,438 Followers  |  375 Following  |  217 Posts  |  Joined: 11.04.2023  |  2.1631

Latest posts by maxime.bsky.social on Bluesky

nice good to know it works on it!

16.07.2025 13:32 β€” πŸ‘ 0    πŸ” 0    πŸ’¬ 0    πŸ“Œ 0

wait how? do you use the beta? (webgpu support is only coming in september on ios)

16.07.2025 13:30 β€” πŸ‘ 0    πŸ” 0    πŸ’¬ 1    πŸ“Œ 0
Video thumbnail

floating soft glass

made with WebGPU, compute shader, and a fully custom material

r3f.maximeheckel.com/webgpu/glass

15.07.2025 19:03 β€” πŸ‘ 25    πŸ” 2    πŸ’¬ 3    πŸ“Œ 0

not really sure, made dents over the past few months but must have nailed sleep + nutrition today somehow

25.06.2025 23:59 β€” πŸ‘ 3    πŸ” 0    πŸ’¬ 0    πŸ“Œ 0
Post image

broke new grounds on my quest to increase my aerobic capacity

6.3mi in 1h03 at 128bpm avg

first run I felt fully in control

25.06.2025 22:41 β€” πŸ‘ 6    πŸ” 0    πŸ’¬ 2    πŸ“Œ 0

This topic has so much to explore, and I hope this article will help you get your first steps building with those new techniques

And I'm looking forward to seeing what you'll build with it πŸ˜„

10.06.2025 15:13 β€” πŸ‘ 0    πŸ” 0    πŸ’¬ 0    πŸ“Œ 0

I also pushed further and explored ways to have volumetric light shining in multiple directions or also multiple sources lighting up the scene independently

All of that is in this article alongside interactive demos for you to fork/play with

10.06.2025 15:13 β€” πŸ‘ 0    πŸ” 0    πŸ’¬ 1    πŸ“Œ 0
Post image

On top of that, you'll also see some more advanced techniques like "shadow mapping":

The key technique for the Volumetric Light to take into account object on the scene which allow from beautiful dynamic shadows when the light source is occluded

10.06.2025 15:13 β€” πŸ‘ 0    πŸ” 0    πŸ’¬ 1    πŸ“Œ 0

It was also a good opportunity to apply what I learned through my raymarching work in a new light (πŸ₯)

I re-applied concepts I discovered on my work on volumetric clouds to give the light a more natural scattering and look-and-feel

10.06.2025 15:13 β€” πŸ‘ 0    πŸ” 0    πŸ’¬ 1    πŸ“Œ 0
Post image

Luckily, through post-processing, you can just do that

By raymarching a light in world space to draw the right set of pixels you can enhance your scene with beautiful atmospheric light

10.06.2025 15:13 β€” πŸ‘ 0    πŸ” 0    πŸ’¬ 1    πŸ“Œ 0

While standard lighting in Three.js/R3F is usually enough, I always felt like it missed some depth and volume

I wanted my light to truly *flood* my scenes with powerful beams or cast strong shadows

10.06.2025 15:13 β€” πŸ‘ 0    πŸ” 0    πŸ’¬ 1    πŸ“Œ 0
Preview
On Shaping Light: Real-Time Volumetric Lighting with Post-Processing and Raymarching for the Web - The Blog of Maxime Heckel A deep dive into Volumetric Lighting implemented via Post-Processing leveraging a custom shader with raymarching to create beautiful light and atmospheric effect for your React Three Fiber and Three.j...

πŸ“ New Blog Post πŸ“

I finally sat down to write about what I learned building a Volumetric Lighting effect for the web

In it, I detail how to blend raymarching with post-processing to create beautiful atmospheric light to elevate your next WebGL project

blog.maximeheckel.com/posts/shapin...

10.06.2025 15:12 β€” πŸ‘ 40    πŸ” 12    πŸ’¬ 1    πŸ“Œ 0
Preview
Around The World, Part 23: Hydraulic erosion As I mentioned last time, I’m currently working on a full rewrite of the game, with a focus on building a solid technical foundation first. But because much of that is boring work, I allowed myself a ...

This blog is a miracle for terrain nerds
frozenfractal.com/blog/2025/6/...

09.06.2025 05:56 β€” πŸ‘ 52    πŸ” 14    πŸ’¬ 1    πŸ“Œ 0
Post image

✍️ Can’t wait to share with you everything I’ve learned about Volumetric Lighting on Tuesday

So many new fun shading techniques to tell you about

07.06.2025 14:57 β€” πŸ‘ 52    πŸ” 1    πŸ’¬ 0    πŸ“Œ 0
Screenshot of an area of my Mac desktop, showing the Dock, a Finder window, and the Free Ruler app with its Preferences and About dialog. The app provides a horizontal and vertical ruler.

Screenshot of an area of my Mac desktop, showing the Dock, a Finder window, and the Free Ruler app with its Preferences and About dialog. The app provides a horizontal and vertical ruler.

Just ❀️ what open source can do. Was looking for a free app that provides a ruler to help me check if UI elements are aligned. Found Free Ruler, and loved it.
github.com/pascalpp/Fre...

06.06.2025 11:20 β€” πŸ‘ 16    πŸ” 1    πŸ’¬ 3    πŸ“Œ 0
Post image Post image Post image Post image

sneak peek of some diagrams that will make it into the next blog post

translating concepts that feel super clear in my mind into those is hard but the result is super satisfying when it it works

29.05.2025 20:01 β€” πŸ‘ 5    πŸ” 2    πŸ’¬ 0    πŸ“Œ 0
Post image

halfway point crossed

18.05.2025 14:56 β€” πŸ‘ 7    πŸ” 0    πŸ’¬ 0    πŸ“Œ 0

🫢 thank you sir

15.05.2025 19:33 β€” πŸ‘ 2    πŸ” 0    πŸ’¬ 0    πŸ“Œ 0

hope you'll enjoy it!

09.05.2025 20:01 β€” πŸ‘ 0    πŸ” 0    πŸ’¬ 0    πŸ“Œ 0
Preview
Speaking at Figma Config 2025 - The Blog of Maxime Heckel An overview of the talk I had the chance to give the Figma Config, sharing my passion and learning journey around shaders and real-time 3D on the web.

Had a blast getting to talk about shaders and hanging out with everyone at #Config2025

For those who came to my talk or watched it online, thank you so much!

If you missed it, I just updated the blog post of this talk with the recording:

blog.maximeheckel.com/posts/config...

09.05.2025 19:34 β€” πŸ‘ 17    πŸ” 1    πŸ’¬ 3    πŸ“Œ 0

thank you! πŸ™

02.05.2025 23:21 β€” πŸ‘ 1    πŸ” 0    πŸ’¬ 0    πŸ“Œ 0

yes!

02.05.2025 20:33 β€” πŸ‘ 1    πŸ” 0    πŸ’¬ 0    πŸ“Œ 0
Video thumbnail

got tempted to rebuild this (x.com/5tr4n0/statu...) in webgl using my volumetric lighting shader work

not as good but still a fun one to build

r3f.maximeheckel.com/tunnel

02.05.2025 19:09 β€” πŸ‘ 66    πŸ” 5    πŸ’¬ 6    πŸ“Œ 0

I always say the hardest is done once you’ve passed the front door of your apartment
Then you just need to run

27.04.2025 16:52 β€” πŸ‘ 2    πŸ” 0    πŸ’¬ 0    πŸ“Œ 0

nice pace man! One day I’ll get there!

27.04.2025 14:46 β€” πŸ‘ 1    πŸ” 0    πŸ’¬ 1    πŸ“Œ 0
Post image

πŸƒ

27.04.2025 13:34 β€” πŸ‘ 5    πŸ” 0    πŸ’¬ 2    πŸ“Œ 0
Post image

first draft for my upcoming blog post on volumetric lighting

excited to tell you what I've been learning and experimenting with

26.04.2025 01:22 β€” πŸ‘ 30    πŸ” 1    πŸ’¬ 0    πŸ“Œ 0

thank you boss 🫑 looking forward to your course!

16.04.2025 20:08 β€” πŸ‘ 2    πŸ” 0    πŸ’¬ 0    πŸ“Œ 0
Video thumbnail

volumetric x lens flare (in orbit)

r3f.maximeheckel.com/solar

16.04.2025 17:56 β€” πŸ‘ 43    πŸ” 4    πŸ’¬ 3    πŸ“Œ 0

oh that’s arc browser

14.04.2025 02:13 β€” πŸ‘ 1    πŸ” 0    πŸ’¬ 1    πŸ“Œ 0

@maxime is following 20 prominent accounts