iiinova — where your digital self keeps evolving

Also I’m not sure how/if the webGPU-related code would be tree-shaked in a webGL setup and vice-versa. But all that is interesting, I will think about it ! 3/3

000

Currently the API is designed as a light layer on top of webgl, which makes it difficult to reuse with webGPU. The idea of sharing functions for both apis is interesting but I’m not sure how to handle their differences. I would like to keep it low-level, the focus is on writing shaders 2/3

100

Indeed, but their arguments are more low-level and close to the webgl api (at least currently), and: - in webGPU we can write fragment and vertex shaders in one string - many things become a kind of « buffer » - compute shaders, pipelines, bind groups etc don’t exist in webgl 1/3

100

Good point, writing similar functions in webGPU has crossed my mind. But since they are low level and the webGPU API is quite different, I don’t think the same functions will work for both. So either it will be another lib, or I use 2 prefixes (glCanvas / gpuCanvas), which seems consistent

200

Most functions create and/or initialize something so it would rather be createXXX, but I don’t really like that 🤔

000

Ok I understand, in my case I think it would be something like « createRenderPass(…) », but it seems a bit verbose to me. I also thought about a « gl » prefix, like glRenderPass(). It’s shorter and allow to separate WebGL related stuff from JS utils. I think I like this one. What do you think ?

100

Also, I don't know what other names to use: I can't remove the "use" because the functions would have the name of the object they return. e.g, "const compositor = compositor(...)" is not possible. And I don't want to prefix "createXXX" on all functions. So yeah, I would appreciate some feedback!

200

I like the hook-style naming with "use" because the functions actually behave like hooks (output destructuring, re-render when updated etc), but I wonder if they could be confused with "real" hooks or composables in a react or vue codebase. I'm not sure if it would be a big issue though.

100

Julien Sulpis @jsulpis.dev · 23/10/2025

📣 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 🧵

code snippet with a sample of the functions starting with "use"

100

It's as easy as declaring the effects in an array

000

Julien Sulpis @jsulpis.dev · 23/10/2025

Bloom + trails effects on my boids demo ✨ #webGL #shader

140

Julien Sulpis @jsulpis.dev · 22/10/2025

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

Haha seems like a lot of fun… Anyway thank you for your valuable feedback 🙏🏻

Ok this is what I thought. I guess as long as it’s properly documented, any default is acceptable. I am just struggling to make my bloom effect work on a transparent background so I was wondering how (if) threejs handles that if it uses straight alpha

I see that #threejs has premultipliedAlpha false by default on their Material, so I'm not sure how they handle that throughout the render pipeline, especially with postprocessing. For my lib I think I'm going to assume premultiplied alpha everywhere, but I would be glad to get some feedback on this

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

Julien Sulpis @jsulpis.dev · 17/10/2025

Thanks 🙏🏻 Yes I’m just starting to understand the use of premultiplied alpha. I realized I might have some bugs related to it in the lib I am building. So I just need to figure out where and when to do the conversion between straight and premultiplied alpha, and properly use gl.blendFunc()

000

Julien Sulpis @jsulpis.dev · 16/10/2025

Thanks ! This is combined with bloom and tone mapping so yes it can be pretty bright

Julien Sulpis @jsulpis.dev · 16/10/2025

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

2121

Julien Sulpis @jsulpis.dev · 10/10/2025

Indeed there is potential to make cool loaders !

Julien Sulpis @jsulpis.dev · 09/10/2025

btw it works with 2 ping-pong buffers that accumulate the previous frames with a light erosion effect to make the tail thinner

Julien Sulpis @jsulpis.dev · 09/10/2025

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

4152

Julien Sulpis @jsulpis.dev · 26/08/2025

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

screenshot of the bloom example showing a few bright colorful dots with a bloom effect

062

Julien Sulpis @jsulpis.dev · 13/08/2025

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 !

git diff showing a change in the returned value of a fragment shader

030

Julien Sulpis @jsulpis.dev · 28/07/2025

I have finished setting up Umami on my home server for my websites analytics ✨ It's oddly satisfying to self-host things ! I'm starting small with a simple public API

000

Julien Sulpis @jsulpis.dev · 19/06/2025

I should put something at jsulpis.dev 🤔 It's currently used only for my git email and Bluesky handle. Anything you would like to see in there ? Talks library, tech demos, blog...

000

Julien Sulpis @jsulpis.dev · 09/06/2025

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

090

Reposted by Julien Sulpis

MiXiT @mixitconf.org · 17/04/2025

🎤 Tu te mets combien en responsive CSS ? (Édition 2025) avec @jsulpis.dev et Théo Gianella C’est la base, non ? Mais entre breakpoints, container queries et unités modernes… on s’y perd un peu. Une session en live-coding pour tout remettre à plat. 👉 mixitconf.org/2025/tu-te-m...

142

Julien Sulpis @jsulpis.dev · 02/04/2025

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)

030

Julien Sulpis @jsulpis.dev · 06/03/2025

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

060

Julien Sulpis @jsulpis.dev · 04/03/2025

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

060

Julien Sulpis @jsulpis.dev · 19/02/2025

C’est Mads qui a tout fait 😅

000

Julien Sulpis @jsulpis.dev · 19/02/2025

I am thrilled to give my first talk outside of France at @futurefrontend.bsky.social ! Thanks to m4dz.net for the opportunity 🙏🏻 I will be talking with him about Design Systems. Can’t wait !

382

Julien Sulpis @jsulpis.dev · 11/02/2025

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

040

Reposted by Julien Sulpis

Xor @xordev.com · 27/01/2025

Subtle things to make your shaders better: 1) Anti-aliasing - Real life is not limited to pixels so unless you're specifically going for a pixelated style, you should be anti-aliasing everything! mini.gmshaders.com/p/antialiasing

715523

Julien Sulpis @jsulpis.dev · 27/01/2025

Thank you for the thread ! Now I want to read all the tutoriels 😆

Julien Sulpis @jsulpis.dev · 22/01/2025

The bloom effect itself is far from ideal, maybe on day I will take the time to understand and implement this article that has been used to make the bloom effect in the postprocessing toolkit of threejs www.froyok.fr/blog/2021-12...

froyok.fr

Custom Bloom Post-Process in Unreal Engine | Froyok - Léna Piquet

I wanted to see if I could modify the unreal engine bloom effect following my article on making custom lens-flare. This is because the default one can sometimes look disapointing and doesn't always be...

000

Julien Sulpis @jsulpis.dev · 22/01/2025

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

120

Julien Sulpis @jsulpis.dev · 17/01/2025

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/

sample code for video.requestVideoFrameCallback()

020

Reposted by Julien Sulpis

LyonJS @lyonjs.org · 17/01/2025

Il nous a régaler avec des conférences toujours excellentes, gagnant du dernier Code In The Dark, il nous paraissait normal d'inviter @jsulpis.dev pour nous parler cette fois de couleurs.

021

Julien Sulpis @jsulpis.dev · 17/01/2025

Thank you for the idea ! You mean raymarching / ray tracing ? I already made a few shadertoys, I will probably show one in the examples