Julien Sulpis

Affiche DevFest Lyon 2ème édition : Vendredi 4 décembre – Palais de la Bourse”, sur fond de l’intérieur du Palais de la Bourse.

C’est officiel : le DevFest Lyon revient 🚀

📅 4 décembre 2026 au Palais de la Bourse, lieu emblématique du patrimoine lyonnais ✨

400 participant·e·s, des talks tech, des retours d’expérience et des échanges de qualité 🤝

Dossier de sponsoring bientôt disponible ⏳
Réservez la date 🌟

#DevFestLyon

Julien Sulpis Front-End Engineer

jsulpis.dev is not empty anymore !

For now there is mostly my talks library (in French) and a few side projects. I will probably add a blog in there some day.

Of course I am always open to feedbacks

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

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

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

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

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

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 ?

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!

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.

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

📣 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 for the animation above

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

Bloom + trails effects on my boids demo ✨

#webGL #shader

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

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()

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

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

Indeed there is potential to make cool loaders !

Thanks !

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

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

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

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

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

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 !

3D Gaussian Splatting, but with video.
I did not know that was possible 😮

www.4dv.ai

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

😂