jsulpis Profile Banner
🦋 Julien Sulpis Profile
🦋 Julien Sulpis

@jsulpis

Followers
699
Following
478
Media
147
Statuses
517

💻 Front-end engineer & speaker 💡 I explore ways to make the web more fun and performant for everyone. #WebGL #WebGPU #JS #CSS 🦋 jsulpis·dev

Lyon, France
Joined May 2017
Don't wanna be here? Send us removal request.
@jsulpis
🦋 Julien Sulpis
2 years
Little update on my #GLSL planet shader: .I borrowed and adapted a few textures from the @NASA to display our home planet 🌍✨. It's made with ~12kB of code and should be smooth on most devices. Next steps: find more textures to display other planets 😊. ⬇️ Live demo and links :
20
61
719
@jsulpis
🦋 Julien Sulpis
6 months
RT @Future_Frontend: How to develop design systems without tying your hands too much technically? That's something that @jsulpis will explo….
0
1
0
@grok
Grok
3 days
Join millions who have switched to Grok.
151
285
2K
@jsulpis
🦋 Julien Sulpis
7 months
0
0
0
@jsulpis
🦋 Julien Sulpis
7 months
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 in the link below (without types and autocompletion unfortunately). #buildInPublic #WebGL
1
0
3
@jsulpis
🦋 Julien Sulpis
7 months
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/
Tweet media one
0
0
0
@jsulpis
🦋 Julien Sulpis
8 months
RT @LyonJS: Il nous a régaler avec des conférences toujours excellentes, gagnant du dernier Code In The Dark, il nous paraissait normal d'i….
0
2
0
@jsulpis
🦋 Julien Sulpis
8 months
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 : (WIP, #buildInPublic). See you 👋
Tweet media one
Tweet media two
2
4
80
@jsulpis
🦋 Julien Sulpis
8 months
I used a vitepress plugin for the sandpack editor, and the code is much simpler than before.
0
0
0
@jsulpis
🦋 Julien Sulpis
8 months
The migration to VitePress is complete !.I hope you will like it as much as I do 😊. (yeah it's missing a preview image). #buildInPublic #webGL.
1
0
3
@jsulpis
🦋 Julien Sulpis
8 months
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 🤞.
0
0
0
@jsulpis
🦋 Julien Sulpis
8 months
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 ✨.
0
0
0
@jsulpis
🦋 Julien Sulpis
8 months
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 🙏. #WebGL #buildInPublic.
1
2
11
@jsulpis
🦋 Julien Sulpis
9 months
I'm playing with particles for an example with useGL. It's crazy that the code fits in my screen ! (useGL helps with that)
0
0
4
@jsulpis
🦋 Julien Sulpis
9 months
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
Tweet media one
Tweet media two
Tweet media three
Tweet media four
0
0
1
@jsulpis
🦋 Julien Sulpis
9 months
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
0
0
0
@jsulpis
🦋 Julien Sulpis
9 months
OK I think the documentation is done 🤡. What would you need more ?
Tweet media one
0
0
0
@jsulpis
🦋 Julien Sulpis
9 months
Was this explanation clear ? I just discovered the SharedArrayBuffer and Atomics APIs myself, I never used them, but they seem like a fun thing to try 😎. The original article, from which you can wander by following the links:.
Tweet card summary image
developer.mozilla.org
JavaScript typed arrays are array-like objects that provide a mechanism for reading and writing raw binary data in memory buffers.
0
0
0
@jsulpis
🦋 Julien Sulpis
9 months
These APIs technically allow to implement parallel algorithms on worker threads. Of course this must be worth the extra cost of synchronizing the different threads. But I guess there are use cases for that ?.
1
0
0
@jsulpis
🦋 Julien Sulpis
9 months
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.
Tweet media one
1
0
0
@jsulpis
🦋 Julien Sulpis
9 months
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.
Tweet media one
1
0
0
@jsulpis
🦋 Julien Sulpis
9 months
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).
Tweet media one
1
0
0