Julien Sulpis
@jsulpis.dev
💻 Front-end engineer & speaker
💡 I explore ways to make the web more fun and performant for everyone.
#WebGL #WebGPU #JS #CSS
💡 I explore ways to make the web more fun and performant for everyone.
#WebGL #WebGPU #JS #CSS
📣 call for feedback!
I'm having second thoughts about the naming of the functions in my #webGL library.
TL;DR: is it ok to have functions starting with "use" in a vanilla JS library ?
explanation in thread 🧵
I'm having second thoughts about the naming of the functions in my #webGL library.
TL;DR: is it ok to have functions starting with "use" in a vanilla JS library ?
explanation in thread 🧵
October 25, 2025 at 1:52 PM
📣 call for feedback!
I'm having second thoughts about the naming of the functions in my #webGL library.
TL;DR: is it ok to have functions starting with "use" in a vanilla JS library ?
explanation in thread 🧵
I'm having second thoughts about the naming of the functions in my #webGL library.
TL;DR: is it ok to have functions starting with "use" in a vanilla JS library ?
explanation in thread 🧵
It's as easy as declaring the effects in an array
October 23, 2025 at 7:44 PM
It's as easy as declaring the effects in an array
October 23, 2025 at 7:44 PM
OK I've finally made some progress, my trails effect works on a transparent background (dark or light), and the bloom effect too.
The trails effect is kind of experimental though, it can produce artifacts in scenes with lots of particles. But I think those two make a great combo !
#WebGL #shaders
The trails effect is kind of experimental though, it can produce artifacts in scenes with lots of particles. But I think those two make a great combo !
#WebGL #shaders
October 22, 2025 at 9:11 PM
I did some tests to fully understand the effect of premultiplied alpha combined with the gamma correction (linear RGB -> sRGB).
It seems that the only right way to blend rgba colors is to mix them in linear RGB with premultiplied alpha, and then convert to sRGB.
However ⬇️
It seems that the only right way to blend rgba colors is to mix them in linear RGB with premultiplied alpha, and then convert to sRGB.
However ⬇️
October 20, 2025 at 11:40 AM
I did some tests to fully understand the effect of premultiplied alpha combined with the gamma correction (linear RGB -> sRGB).
It seems that the only right way to blend rgba colors is to mix them in linear RGB with premultiplied alpha, and then convert to sRGB.
However ⬇️
It seems that the only right way to blend rgba colors is to mix them in linear RGB with premultiplied alpha, and then convert to sRGB.
However ⬇️
As expected the trails effect looks cool with particles !
I still struggle with the blending on semi-transparent surfaces, I need to fix that before shipping the effect
#WebGL #Shaders #buildInPublic
I still struggle with the blending on semi-transparent surfaces, I need to fix that before shipping the effect
#WebGL #Shaders #buildInPublic
October 16, 2025 at 7:47 PM
As expected the trails effect looks cool with particles !
I still struggle with the blending on semi-transparent surfaces, I need to fix that before shipping the effect
#WebGL #Shaders #buildInPublic
I still struggle with the blending on semi-transparent surfaces, I need to fix that before shipping the effect
#WebGL #Shaders #buildInPublic
I've been working on a #WebGL light trail effect lately, and it turns out better than expected !
I just need to refine it a little and make it easy to reuse as a regular post-processing effect, and it should bring particles animations to a new level
#buildInPublic
I just need to refine it a little and make it easy to reuse as a regular post-processing effect, and it should bring particles animations to a new level
#buildInPublic
October 9, 2025 at 8:34 PM
I've been working on a #WebGL light trail effect lately, and it turns out better than expected !
I just need to refine it a little and make it easy to reuse as a regular post-processing effect, and it should bring particles animations to a new level
#buildInPublic
I just need to refine it a little and make it easy to reuse as a regular post-processing effect, and it should bring particles animations to a new level
#buildInPublic
It took me AGES but I finally implemented a decent bloom effect, along with a few tone mapping operators.
You can play with it here:
usegl.vercel.app/examples/post-processing/builtin-bloom/
#webGL #buildInPublic
You can play with it here:
usegl.vercel.app/examples/post-processing/builtin-bloom/
#webGL #buildInPublic
August 26, 2025 at 8:18 PM
It took me AGES but I finally implemented a decent bloom effect, along with a few tone mapping operators.
You can play with it here:
usegl.vercel.app/examples/post-processing/builtin-bloom/
#webGL #buildInPublic
You can play with it here:
usegl.vercel.app/examples/post-processing/builtin-bloom/
#webGL #buildInPublic
Debugging #WebGL shaders is hard, but debugging a multi-pass postprocessing effect, well... that's next level 😅
I spent like 2h checking every texture, render target, sampling algorithm... only to find out that I did not returned the right variable in a shader 🤦♂️
BUT I think I'm almost there !
I spent like 2h checking every texture, render target, sampling algorithm... only to find out that I did not returned the right variable in a shader 🤦♂️
BUT I think I'm almost there !
August 13, 2025 at 8:23 PM
Debugging #WebGL shaders is hard, but debugging a multi-pass postprocessing effect, well... that's next level 😅
I spent like 2h checking every texture, render target, sampling algorithm... only to find out that I did not returned the right variable in a shader 🤦♂️
BUT I think I'm almost there !
I spent like 2h checking every texture, render target, sampling algorithm... only to find out that I did not returned the right variable in a shader 🤦♂️
BUT I think I'm almost there !
I made this planet shader after completing @simondev.bsky.social's shader course, and now he has a new bundle including more advanced techniques and maths ? Let's do this ! 🚀
Give me just 10 years to complete all the courses I bought, and I should come up with interesting stuff...
Give me just 10 years to complete all the courses I bought, and I should come up with interesting stuff...
June 9, 2025 at 4:16 PM
I made this planet shader after completing @simondev.bsky.social's shader course, and now he has a new bundle including more advanced techniques and maths ? Let's do this ! 🚀
Give me just 10 years to complete all the courses I bought, and I should come up with interesting stuff...
Give me just 10 years to complete all the courses I bought, and I should come up with interesting stuff...
I've been playing with the #WebGPU API recently, it's crazy powerful !
A useGPU lib is right around the corner 😂
PS : I will publish the code soon (vanilla WebGPU, OBJ file loader, compute shader and stuff)
A useGPU lib is right around the corner 😂
PS : I will publish the code soon (vanilla WebGPU, OBJ file loader, compute shader and stuff)
April 2, 2025 at 8:06 PM
I've been playing with the #WebGPU API recently, it's crazy powerful !
A useGPU lib is right around the corner 😂
PS : I will publish the code soon (vanilla WebGPU, OBJ file loader, compute shader and stuff)
A useGPU lib is right around the corner 😂
PS : I will publish the code soon (vanilla WebGPU, OBJ file loader, compute shader and stuff)
Implementing Conway's Game of Life in useGL is relatively easy : I taught Claude the API by feeding it with the boids example, and after a few iterations... you have it, in less than 80 lines of code 😊
Interactive demo : usegl.vercel.app/examples/gpg...
#webGL #buildInPublic #gameOfLife
Interactive demo : usegl.vercel.app/examples/gpg...
#webGL #buildInPublic #gameOfLife
March 6, 2025 at 9:14 PM
Implementing Conway's Game of Life in useGL is relatively easy : I taught Claude the API by feeding it with the boids example, and after a few iterations... you have it, in less than 80 lines of code 😊
Interactive demo : usegl.vercel.app/examples/gpg...
#webGL #buildInPublic #gameOfLife
Interactive demo : usegl.vercel.app/examples/gpg...
#webGL #buildInPublic #gameOfLife
The function to make boids animations, or any other thing using the ping pong FBO technique, is published in usegl !
As always you can play with the interactive example :
usegl.vercel.app/examples/gpg...
#WebGL #buildInPublic #boids
As always you can play with the interactive example :
usegl.vercel.app/examples/gpg...
#WebGL #buildInPublic #boids
March 4, 2025 at 8:21 PM
The function to make boids animations, or any other thing using the ping pong FBO technique, is published in usegl !
As always you can play with the interactive example :
usegl.vercel.app/examples/gpg...
#WebGL #buildInPublic #boids
As always you can play with the interactive example :
usegl.vercel.app/examples/gpg...
#WebGL #buildInPublic #boids
It took me a while, but I finally implemented a boids behavior with the ping pong FBO technique.
Still need a bit of time to polish the API and make it straightforward to use, and I will publish that in useGL
Still need a bit of time to polish the API and make it straightforward to use, and I will publish that in useGL
February 11, 2025 at 8:50 PM
It took me a while, but I finally implemented a boids behavior with the ping pong FBO technique.
Still need a bit of time to polish the API and make it straightforward to use, and I will publish that in useGL
Still need a bit of time to polish the API and make it straightforward to use, and I will publish that in useGL
Phew, I made an example of a multi-pass bloom effect to showcase the API for creating effect passes and update their uniforms.
You can play with it in the interactive example (without types and autocompletion unfortunately) :
usegl.vercel.app/examples/pos...
#buildInPublic #shaders #WebGL
You can play with it in the interactive example (without types and autocompletion unfortunately) :
usegl.vercel.app/examples/pos...
#buildInPublic #shaders #WebGL
January 22, 2025 at 12:18 PM
Phew, I made an example of a multi-pass bloom effect to showcase the API for creating effect passes and update their uniforms.
You can play with it in the interactive example (without types and autocompletion unfortunately) :
usegl.vercel.app/examples/pos...
#buildInPublic #shaders #WebGL
You can play with it in the interactive example (without types and autocompletion unfortunately) :
usegl.vercel.app/examples/pos...
#buildInPublic #shaders #WebGL
TIL: there is an equivalent of `requestAnimationFrame` for videos : `requestVideoFrameCallback`, called for each video frame.
Could be useful to... automatically re-render a WebGL shader when a video texture is played \o/
Could be useful to... automatically re-render a WebGL shader when a video texture is played \o/
January 17, 2025 at 8:45 PM
TIL: there is an equivalent of `requestAnimationFrame` for videos : `requestVideoFrameCallback`, called for each video frame.
Could be useful to... automatically re-render a WebGL shader when a video texture is played \o/
Could be useful to... automatically re-render a WebGL shader when a video texture is played \o/
It looks like it's #PortfolioDay !
I'm a front-end engineer currently focusing on making polished UIs and animations with #WebGL.
I'm building a lightweight, reactive WebGL library for working with shaders : usegl.vercel.app (WIP, #buildInPublic)
See you 👋
I'm a front-end engineer currently focusing on making polished UIs and animations with #WebGL.
I'm building a lightweight, reactive WebGL library for working with shaders : usegl.vercel.app (WIP, #buildInPublic)
See you 👋
January 15, 2025 at 12:17 PM
It looks like it's #PortfolioDay !
I'm a front-end engineer currently focusing on making polished UIs and animations with #WebGL.
I'm building a lightweight, reactive WebGL library for working with shaders : usegl.vercel.app (WIP, #buildInPublic)
See you 👋
I'm a front-end engineer currently focusing on making polished UIs and animations with #WebGL.
I'm building a lightweight, reactive WebGL library for working with shaders : usegl.vercel.app (WIP, #buildInPublic)
See you 👋
Also... a proper top navigation, with two menus on mobile, no more hacking
January 7, 2025 at 9:17 PM
Also... a proper top navigation, with two menus on mobile, no more hacking
Much better ! 🤩
default colors, white space, visual hierarchy... VitePress looks way better to me
default colors, white space, visual hierarchy... VitePress looks way better to me
January 7, 2025 at 9:17 PM
Much better ! 🤩
default colors, white space, visual hierarchy... VitePress looks way better to me
default colors, white space, visual hierarchy... VitePress looks way better to me
I'm playing with particles for an example with useGL. It's crazy that the code fits in my screen ! (useGL helps with that)
December 7, 2024 at 11:45 AM
I'm playing with particles for an example with useGL. It's crazy that the code fits in my screen ! (useGL helps with that)
I spent way too much time making sure that the playground for the examples looks good on all screen sizes. Yes, even the absolute evil landscape phones ☠️
#buildInPublic
#buildInPublic
November 26, 2024 at 12:38 PM
I spent way too much time making sure that the playground for the examples looks good on all screen sizes. Yes, even the absolute evil landscape phones ☠️
#buildInPublic
#buildInPublic
It's starting to look good 😊
I wanted to have many little examples like in the Three.js docs, but where you can directly see and edit the code.
I made this with Sandpack and I think it's good enough for now. Maybe one day I will try to add autocompletion with the Monaco editor
I wanted to have many little examples like in the Three.js docs, but where you can directly see and edit the code.
I made this with Sandpack and I think it's good enough for now. Maybe one day I will try to add autocompletion with the Monaco editor
November 21, 2024 at 12:22 PM
It's starting to look good 😊
I wanted to have many little examples like in the Three.js docs, but where you can directly see and edit the code.
I made this with Sandpack and I think it's good enough for now. Maybe one day I will try to add autocompletion with the Monaco editor
I wanted to have many little examples like in the Three.js docs, but where you can directly see and edit the code.
I made this with Sandpack and I think it's good enough for now. Maybe one day I will try to add autocompletion with the Monaco editor
OK I think the documentation is done 🤡
What would you need more ?
What would you need more ?
November 19, 2024 at 9:29 PM
OK I think the documentation is done 🤡
What would you need more ?
What would you need more ?
But this can cause issues with concurrent access. That's why... the Atomics namespace provides static functions to make atomic operations.
A worker thread can write into a shared buffer, then wake another thread that was waiting for an update.
A worker thread can write into a shared buffer, then wake another thread that was waiting for an update.
November 19, 2024 at 12:44 PM
But this can cause issues with concurrent access. That's why... the Atomics namespace provides static functions to make atomic operations.
A worker thread can write into a shared buffer, then wake another thread that was waiting for an update.
A worker thread can write into a shared buffer, then wake another thread that was waiting for an update.
And then there is the SharedArrayBuffer. Like the ArrayBuffer, this is a raw binary data buffer, but this one can be shared between worker threads !
The main thread for instance can share binary data with a worker thread. Both threads can access (read/write) this buffer.
The main thread for instance can share binary data with a worker thread. Both threads can access (read/write) this buffer.
November 19, 2024 at 12:44 PM
And then there is the SharedArrayBuffer. Like the ArrayBuffer, this is a raw binary data buffer, but this one can be shared between worker threads !
The main thread for instance can share binary data with a worker thread. Both threads can access (read/write) this buffer.
The main thread for instance can share binary data with a worker thread. Both threads can access (read/write) this buffer.