Martin Laxenaire
@martin-laxenaire.fr
Freelance front-end developer. Javascript, WebGL, WebGPU and stuff. http://martin-laxenaire.fr
Author of http://curtainsjs.com and https://martinlaxenaire.github.io/gpu-curtains/ - also an @okaydev.co
Author of http://curtainsjs.com and https://martinlaxenaire.github.io/gpu-curtains/ - also an @okaydev.co
Super happy to see my portfolio being picked by @muzli.bsky.social yesterday! 🎉
→ muz.li/picked/2025-...
→ martin-laxenaire.fr
→ muz.li/picked/2025-...
→ martin-laxenaire.fr
November 14, 2025 at 7:41 AM
Super happy to see my portfolio being picked by @muzli.bsky.social yesterday! 🎉
→ muz.li/picked/2025-...
→ martin-laxenaire.fr
→ muz.li/picked/2025-...
→ martin-laxenaire.fr
Switched to a MRT approach for masking thanks to @douglilliequist.bsky.social
It's cleaner plus it allows to easily add/remove meshes (based on a single uniform toggling) to the selective bloom, like on mouseover! 💥
It's cleaner plus it allows to easily add/remove meshes (based on a single uniform toggling) to the selective bloom, like on mouseover! 💥
September 26, 2025 at 1:52 PM
Switched to a MRT approach for masking thanks to @douglilliequist.bsky.social
It's cleaner plus it allows to easily add/remove meshes (based on a single uniform toggling) to the selective bloom, like on mouseover! 💥
It's cleaner plus it allows to easily add/remove meshes (based on a single uniform toggling) to the selective bloom, like on mouseover! 💥
Working on adding a post-processing implementation using compute shaders for #gpucurtains.
Here's an example with a selective compute bloom pass. Not sure I've used the most straightforward process (depth handling was tricky), but it's working.
#webgpu #javascript
Here's an example with a selective compute bloom pass. Not sure I've used the most straightforward process (depth handling was tricky), but it's working.
#webgpu #javascript
September 24, 2025 at 12:03 PM
Working on adding a post-processing implementation using compute shaders for #gpucurtains.
Here's an example with a selective compute bloom pass. Not sure I've used the most straightforward process (depth handling was tricky), but it's working.
#webgpu #javascript
Here's an example with a selective compute bloom pass. Not sure I've used the most straightforward process (depth handling was tricky), but it's working.
#webgpu #javascript
I've build myself a new portfolio - let's start a new chapter! 🚀
A tribute to the 80s arcade video games where you'll need to play and interact with the site to unlock all the content and features.
Will you reach the 100% mark?
→ martin-laxenaire.fr
A tribute to the 80s arcade video games where you'll need to play and interact with the site to unlock all the content and features.
Will you reach the 100% mark?
→ martin-laxenaire.fr
September 8, 2025 at 8:47 AM
I've build myself a new portfolio - let's start a new chapter! 🚀
A tribute to the 80s arcade video games where you'll need to play and interact with the site to unlock all the content and features.
Will you reach the 100% mark?
→ martin-laxenaire.fr
A tribute to the 80s arcade video games where you'll need to play and interact with the site to unlock all the content and features.
Will you reach the 100% mark?
→ martin-laxenaire.fr
So cool to see #webgpu finally running on @firefox.com on Windows! 🔥
Some #gpucurtains examples are still broken (lack of rgba16float texture support, video textures, a few shaders to patch...) but it's a huge step forward!!
martinlaxenaire.github.io/gpu-curtains...
Some #gpucurtains examples are still broken (lack of rgba16float texture support, video textures, a few shaders to patch...) but it's a huge step forward!!
martinlaxenaire.github.io/gpu-curtains...
July 24, 2025 at 8:30 AM
So cool to see #webgpu finally running on @firefox.com on Windows! 🔥
Some #gpucurtains examples are still broken (lack of rgba16float texture support, video textures, a few shaders to patch...) but it's a huge step forward!!
martinlaxenaire.github.io/gpu-curtains...
Some #gpucurtains examples are still broken (lack of rgba16float texture support, video textures, a few shaders to patch...) but it's a huge step forward!!
martinlaxenaire.github.io/gpu-curtains...
My first take at implementing volumetric lighting. Quite happy with the result (even tho it's taking its toll on my poor integrated GPU). 💥
(I might be cooking something... 😁)
#webgpu #gpucurtains #javascript
(I might be cooking something... 😁)
#webgpu #gpucurtains #javascript
April 11, 2025 at 12:07 PM
My first take at implementing volumetric lighting. Quite happy with the result (even tho it's taking its toll on my poor integrated GPU). 💥
(I might be cooking something... 😁)
#webgpu #gpucurtains #javascript
(I might be cooking something... 😁)
#webgpu #gpucurtains #javascript
Also, it's working out of the box for more complex scenarios like PBR materials or shadows, and we can even use render bundles all the way! 💥
Here's a test scene for you to play with: martinlaxenaire.github.io/gpu-curtains...
Here's a test scene for you to play with: martinlaxenaire.github.io/gpu-curtains...
April 4, 2025 at 10:30 AM
Also, it's working out of the box for more complex scenarios like PBR materials or shadows, and we can even use render bundles all the way! 💥
Here's a test scene for you to play with: martinlaxenaire.github.io/gpu-curtains...
Here's a test scene for you to play with: martinlaxenaire.github.io/gpu-curtains...
Wanted to try planar reflections with #gpu-curtains for a while.
Turned out I already had everything in place to implement it, just had to figure out a few details to make it work.
Try here → martinlaxenaire.github.io/gpu-curtains...
#webgpu #javascript
Turned out I already had everything in place to implement it, just had to figure out a few details to make it work.
Try here → martinlaxenaire.github.io/gpu-curtains...
#webgpu #javascript
April 4, 2025 at 10:30 AM
Wanted to try planar reflections with #gpu-curtains for a while.
Turned out I already had everything in place to implement it, just had to figure out a few details to make it work.
Try here → martinlaxenaire.github.io/gpu-curtains...
#webgpu #javascript
Turned out I already had everything in place to implement it, just had to figure out a few details to make it work.
Try here → martinlaxenaire.github.io/gpu-curtains...
#webgpu #javascript
Did you know you can use webcam media streams as #webgpu textures with #gpu-curtains? 👋
Try here: martinlaxenaire.github.io/gpu-curtains...
Try here: martinlaxenaire.github.io/gpu-curtains...
April 1, 2025 at 1:01 PM
Did you know you can use webcam media streams as #webgpu textures with #gpu-curtains? 👋
Try here: martinlaxenaire.github.io/gpu-curtains...
Try here: martinlaxenaire.github.io/gpu-curtains...
Suddenly remembered I'd created a color palette generator when working on generative coding tests a few years ago (2021).
Decided to create a proper gallery to put everything there:
www.martin-laxenaire.fr/generative/
#creativecoding #generative #javascript
Decided to create a proper gallery to put everything there:
www.martin-laxenaire.fr/generative/
#creativecoding #generative #javascript
March 13, 2025 at 1:12 PM
Suddenly remembered I'd created a color palette generator when working on generative coding tests a few years ago (2021).
Decided to create a proper gallery to put everything there:
www.martin-laxenaire.fr/generative/
#creativecoding #generative #javascript
Decided to create a proper gallery to put everything there:
www.martin-laxenaire.fr/generative/
#creativecoding #generative #javascript
Based on the current quality, we can enable or disable features, increase the DPR and render targets resolutions, camera far value and so on.
8/9
8/9
March 3, 2025 at 11:21 AM
Based on the current quality, we can enable or disable features, increase the DPR and render targets resolutions, camera far value and so on.
8/9
8/9
3. Transparency
Almost all the meshes drawn are transparent. This can easily lead to depth related issues, with objects being drawn on top of each other when they shouldn't, especially with particles. At that time I didn't know about OIT, so I came up with my own solution.
5/9
Almost all the meshes drawn are transparent. This can easily lead to depth related issues, with objects being drawn on top of each other when they shouldn't, especially with particles. At that time I didn't know about OIT, so I came up with my own solution.
5/9
March 3, 2025 at 11:21 AM
3. Transparency
Almost all the meshes drawn are transparent. This can easily lead to depth related issues, with objects being drawn on top of each other when they shouldn't, especially with particles. At that time I didn't know about OIT, so I came up with my own solution.
5/9
Almost all the meshes drawn are transparent. This can easily lead to depth related issues, with objects being drawn on top of each other when they shouldn't, especially with particles. At that time I didn't know about OIT, so I came up with my own solution.
5/9
2. Instancing
The particles and waves representing the sea are both instanced using a tile system. As the camera moves, the tiles move accordingly, allowing to draw only whats currently visible in the camera frustum.
4/9
The particles and waves representing the sea are both instanced using a tile system. As the camera moves, the tiles move accordingly, allowing to draw only whats currently visible in the camera frustum.
4/9
March 3, 2025 at 11:21 AM
2. Instancing
The particles and waves representing the sea are both instanced using a tile system. As the camera moves, the tiles move accordingly, allowing to draw only whats currently visible in the camera frustum.
4/9
The particles and waves representing the sea are both instanced using a tile system. As the camera moves, the tiles move accordingly, allowing to draw only whats currently visible in the camera frustum.
4/9
For a really soothing ambience, we've added a day/night cycle that subtly affects the color scheme and post processing effects like lens flare.
3/9
3/9
March 3, 2025 at 11:21 AM
For a really soothing ambience, we've added a day/night cycle that subtly affects the color scheme and post processing effects like lens flare.
3/9
3/9
1. Concept
The idea is that the user navigates a quiet sea and sails through the history of recreational boating. Hovering markers along the path invites her/him to learn more about said history. The navigation path is randomly generated each time for a unique experience.
2/9
The idea is that the user navigates a quiet sea and sails through the history of recreational boating. Hovering markers along the path invites her/him to learn more about said history. The navigation path is randomly generated each time for a unique experience.
2/9
March 3, 2025 at 11:21 AM
1. Concept
The idea is that the user navigates a quiet sea and sails through the history of recreational boating. Hovering markers along the path invites her/him to learn more about said history. The navigation path is randomly generated each time for a unique experience.
2/9
The idea is that the user navigates a quiet sea and sails through the history of recreational boating. Hovering markers along the path invites her/him to learn more about said history. The navigation path is randomly generated each time for a unique experience.
2/9
#gpucurtains v0.12 is out! 🚀
So many new features since last annoucement: built-in shading including PBR, spot lights, glTF animations and skinning, orthographic camera, stencil support...
→ martinlaxenaire.github.io/gpu-curtains/
→ github.com/martinlaxena...
#webgpu #javascript
So many new features since last annoucement: built-in shading including PBR, spot lights, glTF animations and skinning, orthographic camera, stencil support...
→ martinlaxenaire.github.io/gpu-curtains/
→ github.com/martinlaxena...
#webgpu #javascript
February 25, 2025 at 9:45 AM
#gpucurtains v0.12 is out! 🚀
So many new features since last annoucement: built-in shading including PBR, spot lights, glTF animations and skinning, orthographic camera, stencil support...
→ martinlaxenaire.github.io/gpu-curtains/
→ github.com/martinlaxena...
#webgpu #javascript
So many new features since last annoucement: built-in shading including PBR, spot lights, glTF animations and skinning, orthographic camera, stencil support...
→ martinlaxenaire.github.io/gpu-curtains/
→ github.com/martinlaxena...
#webgpu #javascript
My 4th and last #gpucurtains tutorial on @okaydev.co is up, and it's a big one!
Learn how to use compute shaders to update instances positions, build a shadow map from scratch and more...
→ okaydev.co/articles/div...
#webgpu #javascript
Learn how to use compute shaders to update instances positions, build a shadow map from scratch and more...
→ okaydev.co/articles/div...
#webgpu #javascript
February 5, 2025 at 10:50 AM
My 4th and last #gpucurtains tutorial on @okaydev.co is up, and it's a big one!
Learn how to use compute shaders to update instances positions, build a shadow map from scratch and more...
→ okaydev.co/articles/div...
#webgpu #javascript
Learn how to use compute shaders to update instances positions, build a shadow map from scratch and more...
→ okaydev.co/articles/div...
#webgpu #javascript
Look at how easy it'd be to create those nice soap bubbles:
January 31, 2025 at 2:32 PM
Look at how easy it'd be to create those nice soap bubbles:
January 31, 2025 at 2:32 PM
Some basic things like defines and if/else at least.
At the moment, here's an example of how I'm generating my fragment shader, but I'm not very fond of using template litterals as I find it kinda messy:
At the moment, here's an example of how I'm generating my fragment shader, but I'm not very fond of using template litterals as I find it kinda messy:
January 27, 2025 at 2:28 PM
Some basic things like defines and if/else at least.
At the moment, here's an example of how I'm generating my fragment shader, but I'm not very fond of using template litterals as I find it kinda messy:
At the moment, here's an example of how I'm generating my fragment shader, but I'm not very fond of using template litterals as I find it kinda messy:
While I was at it, thought I would start implementing #gltf extensions in #gpucurtains.
Started with transmission. What a silly idea, it was way more challenging than expected! 😅
But hey, look at that! PBR shading with transmission, dispersion, volume, ior... So cool!
#javascript #webgpu
Started with transmission. What a silly idea, it was way more challenging than expected! 😅
But hey, look at that! PBR shading with transmission, dispersion, volume, ior... So cool!
#javascript #webgpu
January 24, 2025 at 11:35 AM
While I was at it, thought I would start implementing #gltf extensions in #gpucurtains.
Started with transmission. What a silly idea, it was way more challenging than expected! 😅
But hey, look at that! PBR shading with transmission, dispersion, volume, ior... So cool!
#javascript #webgpu
Started with transmission. What a silly idea, it was way more challenging than expected! 😅
But hey, look at that! PBR shading with transmission, dispersion, volume, ior... So cool!
#javascript #webgpu
#glTF support is going to be greatly improved in the next #gpucurtains update! 💥
- Animations ✅
- Morph targets ✅
- Skinning ✅
- Shadow support ✅
#webgpu #javascript
- Animations ✅
- Morph targets ✅
- Skinning ✅
- Shadow support ✅
#webgpu #javascript
January 20, 2025 at 1:52 PM
#glTF support is going to be greatly improved in the next #gpucurtains update! 💥
- Animations ✅
- Morph targets ✅
- Skinning ✅
- Shadow support ✅
#webgpu #javascript
- Animations ✅
- Morph targets ✅
- Skinning ✅
- Shadow support ✅
#webgpu #javascript
Working on implementing indirect drawing in #gpucurtains.
Took me a bit of time but I've successfuly managed to port @toji.dev GPU culling example (see toji.github.io/webgpu-bundl...) using an indirect buffer, a render bundle and a compute shader.
Super happy about this one! 🎉
#webgpu
Took me a bit of time but I've successfuly managed to port @toji.dev GPU culling example (see toji.github.io/webgpu-bundl...) using an indirect buffer, a render bundle and a compute shader.
Super happy about this one! 🎉
#webgpu
December 19, 2024 at 11:26 AM
Working on implementing indirect drawing in #gpucurtains.
Took me a bit of time but I've successfuly managed to port @toji.dev GPU culling example (see toji.github.io/webgpu-bundl...) using an indirect buffer, a render bundle and a compute shader.
Super happy about this one! 🎉
#webgpu
Took me a bit of time but I've successfuly managed to port @toji.dev GPU culling example (see toji.github.io/webgpu-bundl...) using an indirect buffer, a render bundle and a compute shader.
Super happy about this one! 🎉
#webgpu
#gpu-curtains v0.9.0 is here! 🎉
New release introduces raycasting, render bundles (can lead to major performances boost), environment maps, advanced renderers switching at runtime...
Website → martinlaxenaire.github.io/gpu-curtains/
Repo → github.com/martinlaxena...
#webgpu #javascript
New release introduces raycasting, render bundles (can lead to major performances boost), environment maps, advanced renderers switching at runtime...
Website → martinlaxenaire.github.io/gpu-curtains/
Repo → github.com/martinlaxena...
#webgpu #javascript
December 16, 2024 at 1:18 PM
#gpu-curtains v0.9.0 is here! 🎉
New release introduces raycasting, render bundles (can lead to major performances boost), environment maps, advanced renderers switching at runtime...
Website → martinlaxenaire.github.io/gpu-curtains/
Repo → github.com/martinlaxena...
#webgpu #javascript
New release introduces raycasting, render bundles (can lead to major performances boost), environment maps, advanced renderers switching at runtime...
Website → martinlaxenaire.github.io/gpu-curtains/
Repo → github.com/martinlaxena...
#webgpu #javascript
You can also chose which light you'd want to update - you don't have to update all the light's renderer!
Here, the directional lights are not added to the second renderer scene, only the ambient and point lights are.
#webgpu
Here, the directional lights are not added to the second renderer scene, only the ambient and point lights are.
#webgpu
December 3, 2024 at 3:21 PM
You can also chose which light you'd want to update - you don't have to update all the light's renderer!
Here, the directional lights are not added to the second renderer scene, only the ambient and point lights are.
#webgpu
Here, the directional lights are not added to the second renderer scene, only the ambient and point lights are.
#webgpu