🦋 Julien Sulpis

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

🦋 jsulpis·dev

[🦋 Julien Sulpis @jsulpis]

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 :

[Future Frontend @Future_Frontend]

How to develop design systems without tying your hands too much technically? That's something that @jsulpis will explore at #FutureFrontend (27-28.5, Espoo, Finland).

https://t.co/fAdAV5M7yj

[🦋 Julien Sulpis @jsulpis]

@SketchpunkLabs In that case I think pnpm is what you are looking for !

https://t.co/Z8AQRzPsF6

[🦋 Julien Sulpis @jsulpis]

@SketchpunkLabs So in any case you can (and should) stick with vite, and unless you want extra performance, or need to execute ts files, I would recommend to also stick with node

[🦋 Julien Sulpis @jsulpis]

@SketchpunkLabs If you have a script « dev »: « vite dev », you could *in theory* run it with npm run dev, or deno task dev, or bun run dev.

Deno and bun claim to be « drop-in » replacements for node, but in practice you might encounter issues with some packages.
…

[🦋 Julien Sulpis @jsulpis]

https://t.co/vmqCSnQXzG

[🦋 Julien Sulpis @jsulpis]

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

[🦋 Julien Sulpis @jsulpis]

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/

[🦋 Julien Sulpis @jsulpis]

@josue_mbunga02 It’s a vanillajs lib, you can use it anywhere 😉

[🦋 Julien Sulpis @jsulpis]

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 : https://t.co/5gwdWhVB1R (WIP, #buildInPublic)

See you 👋

[🦋 Julien Sulpis @jsulpis]

@LyonJS 🫶

[LyonJS 🦁 @LyonJS]

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 pour nous parler cette fois de couleurs.

[🦋 Julien Sulpis @jsulpis]

@KirillTregubov_ Hi, the whole thing is one fragment shader, so it’s different from threejs.

I used ray tracing to draw the sphere so I have complete control over the lighting. I hacked it a bit to smooth the transition between light and shadow.
Maybe you could reproduce it using an area light

[🦋 Julien Sulpis @jsulpis]

I used a vitepress plugin for the sandpack editor, and the code is much simpler than before

https://t.co/cLRLV6aOKb

[🦋 Julien Sulpis @jsulpis]

The migration to VitePress is complete !
I hope you will like it as much as I do 😊

https://t.co/JS50rmARQB
(yeah it's missing a preview image)

#buildInPublic #webGL

[🦋 Julien Sulpis @jsulpis]

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 🤞

[🦋 Julien Sulpis @jsulpis]

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 ✨

[🦋 Julien Sulpis @jsulpis]

@moussakhel Thank you ! 🙏🏻

[🦋 Julien Sulpis @jsulpis]

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 🙏

https://t.co/cZRSiafaW1

#WebGL #buildInPublic

[🦋 Julien Sulpis @jsulpis]

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