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

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

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

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

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

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

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

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

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)

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

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

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 !

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

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

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

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/

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.

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 👋

The migration to VitePress is complete ! I hope you will like it as much as I do 😊 usegl.vercel.app/ (yeah it's missing a preview image) #buildInPublic #webGL

I really like Astro, but for documentation I prefer the UI and UX of VitePress over Starlight 🤔 Also the lack of top navigation bothers me. I will try to migrate the documentation of useGL 🤞

I'm trying to switch from #Notion to #Obsidian for Personal Knowledge Management (because Notion is slow, owns the data and Obsidian has a better way of linking notes). First impression : it's fast ! Local first + sync via iCloud (or any other cloud) is such a great combo ✨

The documentation is live ! Well, a first draft... only examples for now. I will continue to add features and break a few things before writing the documentation. Any feedback on these first examples would be very appreciated 🙏 usegl.vercel.app #WebGL #buildInPublic

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

🧵 What’s the key to building successful open-source projects? For @react-admin.bsky.social, it’s been all about a strong documentation.🏆 💡Here are our top tips for writing great documentations:👇

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

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

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

Learning web APIs is a never-ending journey ! A thread about binary data, JavaScript ArrayBuffer, typed arrays and parallel algorithms on web workers:

🎉 LyonJS 💯 , la conférence by LyonJS arrive ! 🎉 Pour célébrer notre 100ème événement, LyonJS organise une journée de conférence ! 🎙️ Nous avons déjà 80% de nos sponsors 📅 Si tout se passe bien, la billetterie ouvrira le 6 décembre pour un événement le 21 février. 🎟️ N’hésitez pas à partager ! 🌟

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 😉

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

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 ?

I bought a domain name and used it as my handle, but don't bother to search for a website, there is nothing there (yet !) Maybe I should deploy a simple page just so that the url resolves to something ? 🤔

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

Sooo I bought 5 courses about creative coding on @awwwards 👀 They add to a 26h long chapter about shaders on #threejsJourney that I have to catch up, @iced_coffee_dev's 2 courses, and 2 Humble bundles with Blender courses.. I think I'm good with learning material until 2026 😅

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)

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

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

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:

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

Hello world 👋