Тёмный

Writing a Particle System (using Three.js) 

SimonDev
Подписаться 193 тыс.
Просмотров 37 тыс.
50% 1

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

Наука

Опубликовано:

 

31 июл 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 81   
@treelineresearch3387
@treelineresearch3387 3 года назад
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
@kornelsiket3420 3 года назад
This channel is GOLD
@ajgunn3277
@ajgunn3277 Год назад
dude stop rocking my world. you're comprehensive and simple-but-not-stupid attitude on this... it's got me moving. thanks!
@JayWong1997
@JayWong1997 8 месяцев назад
Thank you so much for the great tutorial and detailed explanation!! The best I've seen on three.js + particle
@Stargazer86m
@Stargazer86m 4 года назад
Please keep on making these, good resources are so scarce in WebGL niche still.
@simondev758
@simondev758 4 года назад
No worries, got anything you really want to see covered?
@Stargazer86m
@Stargazer86m 4 года назад
@@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
@simondev758 4 года назад
Ok great, I plan on covering a lot of that so stay tuned :)
@andredantasilvapb
@andredantasilvapb Год назад
WOW! Amazing! Congratz, man!
@micowata
@micowata 2 года назад
This video makes me feel so calm... thanks for that too!
@danesmith624
@danesmith624 3 года назад
This is awesome! maybe a video on particle collision would be cool. Thanks for all the good videos.
@syedmraza99
@syedmraza99 4 года назад
Good work :P Definitely going to put this in my game sometime next month. Happy Coding!
@simondev758
@simondev758 4 года назад
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.
@alexpineda3422
@alexpineda3422 3 года назад
That looks amazing and I want that! Thanks so much for your straight forward examples!
@simondev758
@simondev758 3 года назад
np, glad they're helping! What are you going to build with this?
@alexpineda3422
@alexpineda3422 3 года назад
@@simondev758 I will DM you! I plan to release in spring :)
@alexpineda3422
@alexpineda3422 3 года назад
@@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
@simondev758 3 года назад
@@alexpineda3422 Ooh neat, would love to see it when it's ready.
@in2minutesorless64
@in2minutesorless64 3 года назад
Thanks for this, it was great!
@pixelfingers
@pixelfingers 6 месяцев назад
Very good video, well explained, thank you 😊 Subscribed!
@dogfightx_com
@dogfightx_com 3 года назад
pretty good tutorial, awesome, thank you for doing so good particle system tutorial
@simondev758
@simondev758 3 года назад
You're welcome!
@srikanthganta3945
@srikanthganta3945 2 года назад
Amazing content. Thank you!
@Lambparade
@Lambparade 4 года назад
Great videos. The best three.js videos I've seen.
@simondev758
@simondev758 4 года назад
Thanks, any suggestions for upcoming topics?
@Lambparade
@Lambparade 4 года назад
@@simondev758 Maybe basic physics system? Collisions, gravity, etc....
@simondev758
@simondev758 4 года назад
@@Lambparade Good idea, I think there are some solid JS physics libraries
@montoyland
@montoyland 3 года назад
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
@simondev758 3 года назад
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
@montoyland 3 года назад
@@simondev758 Awesome! Thanks for the heads up!
@sokhuong3355
@sokhuong3355 4 года назад
That is really cool 🤩
@simondev758
@simondev758 4 года назад
Thanks man
@Chadderbox
@Chadderbox 4 года назад
Really cool! I honestly didn't know how much you could do with JavaScript.
@simondev758
@simondev758 4 года назад
Thanks man, JavaScript exposes webgl (and soon webgpu) meaning you can do nearly the same as native.
@altravolta
@altravolta 2 года назад
Thank you
@mayupai
@mayupai 2 года назад
thanks for your amazing tutorial, how to do the black smoke effect?
@piegpa
@piegpa 3 года назад
Mate, this is insane! Keep on posting new videos!
@simondev758
@simondev758 3 года назад
Will do, got any requests?
@piegpa
@piegpa 3 года назад
@@simondev758 Basics please. How to install and use those libraries. How do they work under the hood. There's so little information around.
@simondev758
@simondev758 3 года назад
Basics on webgl or what?
@piegpa
@piegpa 3 года назад
@@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
@simondev758 3 года назад
Is the tutorial on creating a basic 3d world the right style?
@Rssks
@Rssks 4 года назад
Keep it up (Y) !
@simondev758
@simondev758 4 года назад
Will do
@vincentcleaver1925
@vincentcleaver1925 4 года назад
Great timing with starship hopping
@simondev758
@simondev758 4 года назад
What do you mean?
@starhopper4587
@starhopper4587 4 года назад
@@simondev758 the spacex team had a successful test of their new starship prototype earlier this month- ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-s1HA9LlFNM0.html
@simondev758
@simondev758 4 года назад
@@starhopper4587 Heh I didn't catch that reference at all, thanks!
@yxwong8059
@yxwong8059 6 месяцев назад
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
@simondev758 6 месяцев назад
Just keep them in world space
@chavis2876
@chavis2876 4 дня назад
This is an amazing video, thanks for sharing it. I'm having an issue where the fire loads and is coming down, but if I look too far up or too far down the fire disappears. when I look at the right angle I can see the fire. Any thoughts on why?
@buzbuz33-99
@buzbuz33-99 2 года назад
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
@buzbuz33-99 2 года назад
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.
@constantinekong6393
@constantinekong6393 3 года назад
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
@simondev758 3 года назад
You need to make sure alpha blending is set, and either set the colour like you're doing, or change the texture.
@constantinekong6393
@constantinekong6393 3 года назад
@@simondev758 Huge thanks!Ill try to make this happen!
@josemanuelromeroperez5112
@josemanuelromeroperez5112 2 месяца назад
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 :(
@beardedbrain2894
@beardedbrain2894 4 года назад
I'm learning JavaScript. Can I make any game like RPG, Roguelike or Quest game on JS?
@simondev758
@simondev758 4 года назад
Sure, not really any restrictions on what you can build
@beardedbrain2894
@beardedbrain2894 4 года назад
@@simondev758 but many people tell that JavaScript isn't most useful for 3D games making
@simondev758
@simondev758 4 года назад
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.
@drosophila3250
@drosophila3250 3 года назад
Can you do a tutorial about soft particles please?
@simondev758
@simondev758 3 года назад
Sure, I'll see what I can do
@drosophila3250
@drosophila3250 3 года назад
@@simondev758 thank you :) you are the best!
@Tholem98
@Tholem98 3 года назад
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
@simondev758 3 года назад
Because you're not looking at it anymore. Here: jsfiddle.net/7nvxt8pr/
@Tholem98
@Tholem98 3 года назад
@@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
@simondev758 3 года назад
@@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
@Tholem98 3 года назад
@@simondev758 You right, thank you
@Tholem98
@Tholem98 3 года назад
@@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
@DonkeyPlanet 3 года назад
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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Cxk1gI2sg3w.html 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!
@chucktrier
@chucktrier 3 года назад
Just a comment. With additive blending you don’t have to sort. But cool tutorial
@simondev758
@simondev758 3 года назад
Totally right, forget what I said exactly but I probably should have called out that it depends on the blend mode.
@chucktrier
@chucktrier 3 года назад
SimonDev don’t worry only works for the additive glOne glOne case. But super nice content! I just subscribed. 🙏 from Peter
@playbyan1453
@playbyan1453 3 года назад
I use my phone for code these things, my computer can't handle it😂
@simondev758
@simondev758 3 года назад
Wow, coding on a phone must be hard. Any tips on how to do that?
@death8951
@death8951 3 года назад
your videos are unclear.
@simondev758
@simondev758 3 года назад
Hmm, any recommendations on what to improve?
Далее
I Tried Making a 3D MMORPG Game in JavaScript
16:48
Просмотров 601 тыс.
I Built a EXTREME School Bus!
21:37
Просмотров 8 млн
IQ Level: 10000
00:10
Просмотров 4,4 млн
The ONE Texture Every Game NEEDS
9:00
Просмотров 249 тыс.
Fluffy, Soft Particles (WebGL/Three.js)
9:05
Просмотров 11 тыс.
I Tried Making an FPS Game in JavaScript
8:19
Просмотров 128 тыс.
Building a Simple First Person Camera
9:11
Просмотров 53 тыс.
How Particle Life emerges from simplicity
10:16
Просмотров 336 тыс.
I wish I knew this before using React Three Fiber
28:23
iPhone 16 - 20+ КРУТЫХ ИЗМЕНЕНИЙ
5:20