iiinova — where your digital self keeps evolving

Julien Sulpis @jsulpis.dev · 25/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

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

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

010

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

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

110

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

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

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

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

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 👋

1293

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

Also... a proper top navigation, with two menus on mobile, no more hacking

000

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

Much better ! 🤩 default colors, white space, visual hierarchy... VitePress looks way better to me

100

Julien Sulpis @jsulpis.dev · 07/12/2024

I'm playing with particles for an example with useGL. It's crazy that the code fits in my screen ! (useGL helps with that)

000

Julien Sulpis @jsulpis.dev · 26/11/2024

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

280

Julien Sulpis @jsulpis.dev · 21/11/2024

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

020

Julien Sulpis @jsulpis.dev · 19/11/2024

OK I think the documentation is done 🤡 What would you need more ?

030

Julien Sulpis @jsulpis.dev · 19/11/2024

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.

100

Julien Sulpis @jsulpis.dev · 19/11/2024

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.

sample code to shade a SharedArrayBuffer with a web worker

100

Julien Sulpis @jsulpis.dev · 19/11/2024

For instance a Uint16Array indicates that we want to read every 2 bytes of the ArrayBuffer as unsigned shorts (0 to 65535). We can create multiple "views" (typed arrays) from the same buffer, to extract multiple data types (which is really cool).

representation of an ArrayBuffer and multiple views (typed arrays)

100

Julien Sulpis @jsulpis.dev · 18/11/2024

I learned the existence of anisotropic texture filtering, that reduces the blurriness of the textures caused by mipmaps. I will make sure to integrate that feature in useGL 😉

demo showing the effect of anisotropic filtering, borrowed from the Three.js website

000

Julien Sulpis @jsulpis.dev · 12/11/2024

Still working on the DX of useGL, I guess removing code from the demos is a good sign 🎉

before/after view of a sample code, showing a reduction of the quantity and complexity of code after a change in useGL API

010

Julien Sulpis @jsulpis.dev · 11/11/2024

Request for Comments ! 📣 The main "hook" of my upcoming lib, useGL, was originally called "useWebGLCanvas". You give it your canvas, shaders, uniforms etc. Now I think "Web" is unnecessary. But I don't like "useGLCanvas". Maybe... "useGL", like the lib ? 🤯 What y'all think ?

sample code of the "useWebGLCanvas" hook, with a canvas and fragment shader as arguments

000

Julien Sulpis @jsulpis.dev · 05/11/2024

I eventually managed to setup visual testing for useGL 🎉 making consistent screenshots tests on 3 browsers with WebGL and git LFS has been quite a ride 🥲 But now I'm pretty happy with the dev setup : Astro playground with all pages automatically tested ✨ code: github.com/jsulpis/usegl

020

Julien Sulpis @jsulpis.dev · 07/06/2024

No surprise here, I would rather write code than tweets 😅 Just found this little app, what are your stats ?! 💬⬇️ (don't take that too seriously of course)

diagram showing that I have a much higher commit count than tweets count

100

Julien Sulpis @jsulpis.dev · 05/06/2024

yet another developer on MacOS 🙄 I forgot two things last time: - always use `overflow: auto` instead of `overflow: scroll` unless you specifically want a scrollbar even when there is no scroll - if you have a dark mode, use `color-scheme: dark` to have dark scrollbars

screenshot of a page with many scrollbars

000

Julien Sulpis @jsulpis.dev · 28/05/2024

New performance optimization on my reveal.js slide deck : - replace the 3 code snippets I had with screenshots - remove the highlight.js plugin - reduce the weight of the main script by 92% 😅 The plugin loads all languages, I opened an issue to allow loading specific languages

screenshot of the build of my slide deck with the highlight plugin, showing that the largest script weights 332kB (minzipped)

screenshot of the build of my slide deck without the highlight plugin, showing that the largest script weights 28kB (minzipped)

000

Julien Sulpis @jsulpis.dev · 28/05/2024

I investigated performance issues with the reveal.js slide deck of my latest talk, and I turns out that each slide change created like 1500 DOM nodes 😳 I ended up with ~100k DOM nodes at the end... I guess every layout/style recalculation was taking forever. solution:

100

Julien Sulpis @jsulpis.dev · 21/05/2024

After a little break, I'm back in the #WebGL game ! Working on color science for my next talk 🎨 Here is a little HSV cone (links in comments):

120