Maxime

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.9K followers375 following218 posts

Maxime
@maxime.bsky.social

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

Maxime
@maxime.bsky.social

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 😄

Maxime
@maxime.bsky.social

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

Maxime
@maxime.bsky.social

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

Maxime
@maxime.bsky.social

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

Maxime
@maxime.bsky.social

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

Maxime
@maxime.bsky.social

✍️ 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

Maxime
@maxime.bsky.social

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

Maxime
@maxime.bsky.social

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...

blog.maximeheckel.comSpeaking at Figma Config 2025 - The Blog of Maxime HeckelAn 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.

Maxime reposted

Zohran Kwame Mamdani
@zohrankmamdani.bsky.social

It's been 34 days since a New Yorker was abducted from his apartment lobby and sent to a detention facility in Louisiana. The Trump administration now admits this kidnapping was *solely* on the basis of protected First Amendment speech. Free Mahmoud now.

apnews.comPressed for evidence against Mahmoud Khalil, government cites its power to deport people for beliefsThe U.S. government has submitted a two-page memo from Secretary of State Marco Rubio as its main evidence in its deportation case against Columbia University activist Mahmoud Khalil.
Maxime
@maxime.bsky.social

it's been 3 days since I've been looking at this version and I don't hate it, so it may survive next up, need to polish/redo some aspect of the article layout

Maxime@maxime.bsky.social

little sneak peek at a potential new blog landing page I've been working on for the past few days still early, and I have a lot more I want to experiment with

Maxime
@maxime.bsky.social

little sneak peek at a potential new blog landing page I've been working on for the past few days still early, and I have a lot more I want to experiment with

Maxime
@maxime.bsky.social

410 mi later - time for a new pair of running shoes the difference of the state of the cushion between the new and the old one is pretty mind-blowing

View full thread
Maxime
@maxime.bsky.social

Finally, for those who've been asking for the code of the recent experiments I shared online, I hope you'll be pleased, this article contains most of them For the ones that are "missing", you should be able to achieve them with what you'll learn here (and a bit of grit 😄)

Maxime
@maxime.bsky.social

I hope that this article will help you take the leap to be more creative with your shader work, and that soon I'll be bookmarking some of *your work* for me to reproduce 😄

View full thread
Maxime
@maxime.bsky.social

A lot of those effect share common shader bits, that are added to other concepts I used in previous work For example, most of the fluted glass effect consists of the lighting and dispersion concepts introduced in blog.maximeheckel.com/posts/refrac... bsky.app/profile/maxi...

blog.maximeheckel.comRefraction, dispersion, and other shader light effects - Maxime Heckel's BlogA guide on how to reproduce a chromatic dispersion effect for your React Three Fiber and shader projects with FBO, refraction, chromatic aberration, specular, and other tricks through 9 interactive co...
Maxime@maxime.bsky.social

fluted glass post-processing effect with dynamic lighting r3f.maximeheckel.com/fluted-glass

Maxime
@maxime.bsky.social

That's why I cover all the effects introduced in the post as a whole: - they share a lot more despite yielding very different results - you can get very elaborated effects by combining basic shader/math concepts

View full thread
Maxime
@maxime.bsky.social

Every time I saw a piece of art, an image filter, or a new 3D scene from some of my favorite creative developers, it got me into thinking how I would go to approach their styles with whatever technique I knew at the time

Maxime
@maxime.bsky.social

The most interesting part of it was not just about learning new techniques, but also to combine them in unique ways and try to approach my original vision as close as possible

Maxime
@maxime.bsky.social

started writing down my thoughts on my recent post-processing work and how to share what I learned with you all lots of behind the scenes demos coming