Here is a debug plane that displays a Data Texture, which is used to update the particles’ positions and "alive" time - after the life ends, particle's position resets
Follow
Michal Zalobny
@michalzalobny
Creative dev | Member of | WebGL | 3D Modeling | CS | ex ,
GitHub 
bit.ly/3Rt5WAG
LinkedIn bit.ly/3GC86Jg
bit.ly/3Rt5WAG
LinkedIn bit.ly/3GC86JgMichal Zalobny’s Tweets
400k+ FBO-powered particles running at 60FPS with a bit of Perlin noise ✨
Live: bit.ly/3W0YjlY
Based on many implementations of GPGPU I created my version of a simple particle engine using two swapping render targets
#threejsJourney #glsl
13
46
422
Show this thread
The library I did was recently featured in one of the most popular #ReactJS newsletters
I'm happy for the recognition and thanks to everyone that supports it
React Just Parallax is the first project that hit 300 stars on my GitHub 🔥
1
1
16
Natural first-person camera controls in #threejs 🎮
Live: bit.ly/3zOT54q
Code: bit.ly/3UeuWN1
I've also added a procedural sway and tilt effect based on some #Unity tutorials + wall collisions physics with Rapier
Inspired by FPS series
16
60
475
More experiments with #GLSL shaders 🪄
Live: bit.ly/3RYOJyt
Code: bit.ly/3U0n5CZ
Inspired by and work
#threejsjourney #threejs #webgl
6
42
346
Recent experiments with GLSL shaders and textures 🃏
Live: bit.ly/3RYOJyt
Code: bit.ly/3U0n5CZ
I have remade shadow effect for Roll Transition from scratch to make it feel more natural
There is more to come 🪄
Inspired by @akella work
4
60
397
A subpage built with React Just Parallax - my first #ReactJS library for parallax effects 🙌
NPM page: bit.ly/3e77PE0
Live: bit.ly/3epQWEo
Code: bit.ly/3THyvLM
It works perfectly smooth on mobile too
8
23
199
Shooting stars on plain #JavaScript Canvas 💫
Live: bit.ly/3ANlSGs
Code: bit.ly/3qa1udF
Inspired by tutorial
#creativecoding
4
31
160
2
27
My first #ReactJS library for parallax effect is officially out! 🎉
NPM page: bit.ly/3e77PE0
Code: bit.ly/3OUSF14
Showcase page: bit.ly/3QgPt17
If you love subtle yet performant and eye-catching interactions, this package is made for you 🙌
9
21
152
Fireworks shader to celebrate Friday 🥳✨
Live: bit.ly/3TkBGcb
Code: bit.ly/3AWZZY8s
Inspired by tutorial
#threejsjourney #threejs #glsl
14
87
Globe with particles that are mapped based on a monochrome photo of world's map 🌍✨
Live: bit.ly/3QGthhv
Code: bit.ly/3dM9miC
Destination curves are inspired by earth tutorial
#threejsjourney #threejs #webgl
2
60
470
Shader particles dispersing into 3D space ✨
It also reacts to mouse by drawing real-time heat map on plain Canvas2D and sending it as texture 📸
Live: bit.ly/3w667sp
Code: bit.ly/3w2Vuqi
Inspired by particles tutorial
#threejsjourney #webgl #glsl
6
49
390
Fragment shader with galactic radar made in #GLSL 🃏
Inspired by the task in the
Live: bit.ly/3JQDK7e
Code: bit.ly/3AfXNsK
#threejs #threejsjourney #webgl
1
5
55
WebGL carousel and images synced with HTML 💫
Live: bit.ly/3P3UEjS
Code: bit.ly/3p3TsSO
Inspired by work for portfolio
#threejsjourney #threejs #webgl
2
38
370
Header animation made on plain #JavaScript canvas using springs and a bit of native scroll ✨
🃏 It is a part of a showcase website, that I'm building for my first open-source package for ReactJS
Live: bit.ly/3QgPt17
Code: bit.ly/3OUSF14
4
38
407
Sky full of stars made in plain JavaScript on 2D canvas 💫
Live: bit.ly/3J18YrM
Code: bit.ly/3RZyIZE
Inspired by particles tutorial
#javascript #creativecoding
12
61
WebGL experiment featuring different lerp speeds for each card on mousemove 🃏✨
Live: bit.ly/3yQd5m7
Code: bit.ly/3RHg5cZ
#threejsjourney #threejs #webgl
16
71
841
Super happy to win 2nd place in #threejs competition! Congrats to all the other contestants. Great initiative and I can't wait for the next editions 🔥
Quote Tweet
IN 2ND PLACE
CONGRATULATIONS TO MICHAL!! @michalzalobny 
The judges we’re super impressed with your use of post processing and execution of a particle explosion! 
Show this thread
2
28
Signup form animation made in pure CSS using 3D Transforms 📝
🎓 It was a part of a group project I was developing at some time ago. I have also used -motion for spring animations and with Yup to process the data
Code: bit.ly/3RDL6yD
1
23
WebGL space spiral scroll with James Webb Telescope photos and more! 🔭
✨ The particles are dynamically computed in a vertex shader
Live: bit.ly/3IGNYGU
Code: bit.ly/3P34tPR
#threejsjourney #threejs #webgl
3
34
300
📸 Poster promoting the experience (designed in Illustrator) + Screen from the Blender
6
Show this thread
I have built #Metaverse office! ✨
💎 Modeled in #blender3d and brought to life with . It features dynamic camera focus + each material was procedurally generated
Live: bit.ly/3bQauAJ
Code: bit.ly/3aenwHR
#threejsjourney
9
14
134
Show this thread
Some frames captured from the experience ✨
4
Show this thread
Video exploding to WebGL particles inspired by tutorial 🪄
📸 My version can dynamically create a texture at any time of a played video + change the number of particles on the fly
Live: bit.ly/3a2uNKG
Code: bit.ly/3xTIe7C
#threejsjourney #webgl
7
49
347
Show this thread
60FPS cursor pointer made on plain Canvas2D 🖼️
🧲 It slows down while hovering over a link
Live: bit.ly/3nkXHbY
Code: bit.ly/3A1lyVI
#javascript #creativecoding
3
17
104
7. to get solid foundations for learning shaders
8. Most of the 's youtube materials for shaders, including raymarching and other great effects
9. My next goals are to learn more about maths for games from book and read Unity Shader Bible
3
6
Show this thread
4. Learning about Canvas API from youtube materials
5. A few projects by youtube materials (ultimately I plan to learn from all of them 🔥) + all of 's courses
6. WebGL course by
1
9
Show this thread
The order of the courses is similar as I was following:
1. Three.js Journey course by
2. You don't know JS - series of books
3. Stack game tutorial by (I recommend Hunor's other game tutorials too)
1
1
6
Show this thread
Stack Tower game made with 🎮 Inspired by tutorial
🌟 It was one of my first projects done in 3D
Live: bit.ly/3xU0bUD
Code: bit.ly/3zWYaJ5
Tutorial: bit.ly/3mS5Ggp
🧵 Thread with resources I used for my creative dev journey ⬇️
8
40
275
Show this thread
Infinite WebGL gallery 🪄 once again based on the 's course!
Live: bit.ly/3xth4FD
Code: bit.ly/3NWPYfx
#threejsjourney #threejs #webgl
10
47
501
Dark theme switch made in CSS and -motion for spring animations 💫
Live: bit.ly/3M2deXZ
Code: bit.ly/3M3zZuP
#ReactJS #css #HTML
1
2
22
WebGL vertical slider powered by with giant cutlery in the background 🍴
Better not watch if hungry 😅
Live: tinyurl.com/rhm727j7
Code: tinyurl.com/2kctksrc
#threejsJourney #webgl
2
22
161
Seamless page transitions in using ✨
Most logic is written in pure javascript, I have only used react-transition-group to get the handle on the page's mounts and unmounts
Live: tinyurl.com/4rb2s5vc
Repo: tinyurl.com/bdmaa24w
#threejsJourney #React
19
62
549
1/ here are some notes I took while learning and later used for the build
Thanks to for helping with the composition idea 🙌
Raymarching videos: tinyurl.com/3zcb6d5p
Code: tinyurl.com/bdey7x7h
#threejsJourney #glsl
2
10
Show this thread
Interactive Raymarch Visualiser I did after learning from raymarching videos
All the data (camera positions, lighting, etc.) is constantly shared between objects and fragment shader, where the final output is computed
Live: tinyurl.com/4tswsnuh
3
24
180
Show this thread
Last (but I'm sure not least) uploaded an impressive version, for web and mobile🤯 Love the green too.
↓
Quote Tweet
My approach to recreating @monopo_en main page effect.
First time coding refraction (on the edges of lens) +
everything including the movement of the lens is computed in shaders 
Link: tinyurl.com/25ju6php
Code: tinyurl.com/2u8nvy9f
#threejsjourney #webgl
Link: tinyurl.com/25ju6php
Code: tinyurl.com/2u8nvy9f
#threejsjourney #webgl
0:17
8K views
1
2
13
Show this thread
My approach to recreating main page effect.
First time coding refraction (on the edges of lens) +
everything including the movement of the lens is computed in shaders 💫
Link: tinyurl.com/25ju6php
Code: tinyurl.com/2u8nvy9f
#threejsjourney #webgl
11
33
372