Writing a Particle System (using Three.js)

Follow me on:
Patreon: / simondevyt
Twitter: / iced_coffee_dev
Instagram: / beer_and_code
Github: github.com/simondevyoutube/
In this project we'll be using Three.js to write our own particle system from scratch. I'll step through the basics of getting some simple particles on screen, before moving on to animating parameters over particle lifetimes and building out an example system. The point here is to give you an understanding of the basic building blocks, so that you can use that to build out a more complex system.
What we'll cover:
* Writing a basic particle system in three.js
* Getting simple particles on the screen
* Alpha / additive blending
* More complex parameter animation.
Just treat this as a jumping off point for your own 3d projects, there's lots of ways you can go with this but it often helps to have a basic project you can build from.
I will be following up this project with one that goes into detail on combining additive and alpha blending, to get that integrated smoky/fiery effect, stay tuned.
Full source code for the project is available, so if you're interested in fiddling with the code, screwing around with it, or improving it.
Source: github.com/simondevyoutube/Th...

[@treelineresearch3387]

These videos are amazing, never change the style. It's like all the good parts of a hour long dev video and none of the fluff and slow typing.

[@kornelsiket3420]

This channel is GOLD

[@Stargazer86m]

Please keep on making these, good resources are so scarce in WebGL niche still.

[@simondev758]

No worries, got anything you really want to see covered?

[@Stargazer86m]

@@simondev758 Personally, I would like to know more about interactive experiences, anything shaders, turning small ideas into working apps from start to the end (mini-game series or such). I myself have solid web + basic CAD/CAM experience and would love being able to make basic spacial games in my free time, exploring possibilities of 5G etc.

[@simondev758]

Ok great, I plan on covering a lot of that so stay tuned :)

[@andredantasilvapb]

WOW! Amazing! Congratz, man!

[@micowata]

This video makes me feel so calm... thanks for that too!

[@JayWong1997]

Thank you so much for the great tutorial and detailed explanation!! The best I've seen on three.js + particle

[@ajgunn3277]

dude stop rocking my world. you're comprehensive and simple-but-not-stupid attitude on this... it's got me moving. thanks!

[@in2minutesorless64]

Thanks for this, it was great!

[@srikanthganta3945]

Amazing content. Thank you!

[@danesmith624]

This is awesome! maybe a video on particle collision would be cool. Thanks for all the good videos.

[@dogfightx_com]

pretty good tutorial, awesome, thank you for doing so good particle system tutorial

[@simondev758]

You're welcome!

[@pixelfingers]

Very good video, well explained, thank you 😊 Subscribed!

[@alexpineda3422]

That looks amazing and I want that! Thanks so much for your straight forward examples!

[@simondev758]

np, glad they're helping! What are you going to build with this?

[@alexpineda3422]

@@simondev758 I will DM you! I plan to release in spring :)

[@alexpineda3422]

@@simondev758 To briefly answer now, it's a "custom renderer" on top of a classic game. It generates everything from its old install files. It even generates topology people did not know was possible ;)

[@simondev758]

@@alexpineda3422 Ooh neat, would love to see it when it's ready.

[@Lambparade]

Great videos. The best three.js videos I've seen.

[@simondev758]

Thanks, any suggestions for upcoming topics?

[@Lambparade]

@@simondev758 Maybe basic physics system? Collisions, gravity, etc....

[@simondev758]

@@Lambparade Good idea, I think there are some solid JS physics libraries

[@syedmraza99]

Good work :P Definitely going to put this in my game sometime next month. Happy Coding!

[@simondev758]

Definitely show me what you end up making. Also keep an eye out, I'll probably follow this up soon with some more tutorials on more advanced particle system topics.

[@sokhuong3355]

That is really cool 🤩

[@simondev758]

Thanks man

[@vincentcleaver1925]

Great timing with starship hopping

[@simondev758]

What do you mean?

[@starhopper4587]

@@simondev758 the spacex team had a successful test of their new starship prototype earlier this month- kzbin.info/www/bejne/qWKrcmyCoauBg5I

[@simondev758]

@@starhopper4587 Heh I didn't catch that reference at all, thanks!

[@altravolta]

Thank you

[@montoyland]

Can't wait for the update where you discuss dynamically switching blending modes from "additive" to "normal" in order to turn the fire into smoke. I would also love to see the use-case where you tie the particle's spline to a texture in a sprite sheet so that you can use an animated texture for the particle.

[@simondev758]

That video is already out, look for the one that's called "Blending (using WebGL/Three.js) - And How to Combine Additive and Alpha Blending"

[@montoyland]

@@simondev758 Awesome! Thanks for the heads up!

[@Chadderbox]

Really cool! I honestly didn't know how much you could do with JavaScript.

[@simondev758]

Thanks man, JavaScript exposes webgl (and soon webgpu) meaning you can do nearly the same as native.

[@piegpa]

Mate, this is insane! Keep on posting new videos!

[@simondev758]

Will do, got any requests?

[@piegpa]

@@simondev758 Basics please. How to install and use those libraries. How do they work under the hood. There's so little information around.

[@simondev758]

Basics on webgl or what?

[@piegpa]

@@simondev758 Three.js & WebGL in general. I know you add source code, but people need something really basic, explained step by step, very slow and in details.

[@simondev758]

Is the tutorial on creating a basic 3d world the right style?

[@Rssks]

Keep it up (Y) !

[@simondev758]

Will do

[@yxwong8059]

First of all thank you for this wonderful video, was wondering how to achieve particle stays in world space (let say in this video case, I wanted to launch the rocket and the particle will leave a trail)

[@simondev758]

Just keep them in world space

[@mayupai]

thanks for your amazing tutorial, how to do the black smoke effect?

[@buzbuz33-99]

I have turned this into a Particle System module, but would like to make it much larger (for use with a volcano). I have increased the size of the textures and the distance between them. I have tried increasing the life of the particles, but this does not appear to increase the height of the plume. Instead, the particles create an ever increasing ball of smoke at the top. Increasing vertical speed seems to eliminate this problme, but that begins to look too fast. Which other variable(s) do I need to change to increase the height, but not the speed? Thanks!

[@buzbuz33-99]

Nevermind. It's the drag that is creating the ball since it eventually reduces the vertical speed to zero. I just need to reduce or eliminate that value.

[@drosophila3250]

Can you do a tutorial about soft particles please?

[@simondev758]

Sure, I'll see what I can do

[@drosophila3250]

@@simondev758 thank you :) you are the best!

[@josemanuelromeroperez5112]

Hey! I have a question. Is it possible to make the particles (the pngs) not follow the camera? I have been trying to change the shaders but i haven't manage to achieve this :(

[@constantinekong6393]

Hi,Simon!Your videos are really helpful!I downloaded the code,could you so kindly help me to change the fire color to a perticular one? i change the color code in lines 156&157&164,but the result is bad(it seems like all transparent grey with color rgb(143,143,143) or nothing when i set it to 0x000000 ).I simply wanna implement a smoke effect

[@simondev758]

You need to make sure alpha blending is set, and either set the colour like you're doing, or change the texture.

[@constantinekong6393]

@@simondev758 Huge thanks!Ill try to make this happen!

[@beardedbrain2894]

I'm learning JavaScript. Can I make any game like RPG, Roguelike or Quest game on JS?

[@simondev758]

Sure, not really any restrictions on what you can build

[@beardedbrain2894]

@@simondev758 but many people tell that JavaScript isn't most useful for 3D games making

[@simondev758]

You asked if it was possible to make games, which it completely is. Whether or not JS is the appropriate platform, depends entirely on what you're target audience is. If you just purely want to make a game, unity or godot may be something to look into.

[@chucktrier]

Just a comment. With additive blending you don’t have to sort. But cool tutorial

[@simondev758]

Totally right, forget what I said exactly but I probably should have called out that it depends on the blend mode.

[@chucktrier]

SimonDev don’t worry only works for the additive glOne glOne case. But super nice content! I just subscribed. 🙏 from Peter

[@playbyan1453]

I use my phone for code these things, my computer can't handle it😂

[@simondev758]

Wow, coding on a phone must be hard. Any tips on how to do that?

[@Tholem98]

When I delete orbitcontrol the fire doesn't show. I tried to comment the sort of the particles but it isn't enough. How can I solve it? Here a js fiddle: jsfiddle.net/jresq8ch/2/ In the line 286 there is the orbitcontrol if you comment it the particle system isn't work

[@simondev758]

Because you're not looking at it anymore. Here: jsfiddle.net/7nvxt8pr/

[@Tholem98]

@@simondev758 thank you so much. I tried to apply a lookAt but passing the position of the particles but I did't know how get that position. Thank you

[@simondev758]

@@Tholem98 The particle system doesn't so much have an individual position as it does a bounds. It's like trying to get the position of a swarm of bees.

[@Tholem98]

@@simondev758 You right, thank you

[@Tholem98]

@@simondev758 hey, another question (sorry). I tried to make it work with THREE.Clock() instead an anonimous function inside the requestAnimationFrame(). I tried something like requestAnimationFrame(animate()) and inside the animate function use THREE.Clock.getDelta() but it didn't work. Could you explain me why? What i'm doing wrong?

[@DonkeyPlanet]

Hello SimonDev, I would like to ask for your advice. I'm making a PS2 Bios "remake" (those spinning, glowing balls) for my website. Reference: kzbin.info/www/bejne/eanOYpp_Z9iaadk How would you do those light trails? I tried the "afterimage postprocessing" but it didn't provide the result that I want. Looking forward to your answer, thank you in advance!

[@death8951]

your videos are unclear.

[@simondev758]

Hmm, any recommendations on what to improve?