Тёмный

Fluffy, Soft Particles (WebGL/Three.js) 

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

In this project, I'll show you how soft particles work, and walk you through the opengl transformation pipeline.
Follow me on:
Patreon: / simondevyt
Twitter: / iced_coffee_dev
Github: github.com/simondevyoutube/
We'll be looking at adding soft particle support in three.js and JavaScript. This tutorial covers how soft particles work, how to structure your three.js or webgl program to render depth values, how to read and transform values from the depth buffer, and ultimately how to write the shader code that does the soft particle effect.
This tutorial uses three.js, which is a library in JavaScript for cross-browser 3d graphics using webgl. It makes high level functionality and advanced graphics available on the web.
In the video, we cover:
* OpenGL Transformations, Local, World, View, Projection, NDC spaces
* Reading from the Depth buffer
* Fading particle using depth differences
Various resources used:
www.khronos.org/opengl/wiki/C...
www.humus.name/Articles/Persso...
developer.nvidia.com/content/...

Наука

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

 

31 июл 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 69   
@unfa00
@unfa00 Год назад
Wow. I am so glad that the engine I use (Godot) exposes the depth buffer already in whatever space I need without me having to do all these transforms. I had no idea there was more than the view and model transforms involved.
@robinzon100
@robinzon100 3 года назад
i hope your RU-vid channel grows more, more people must learn shader programming from you
@simondev758
@simondev758 3 года назад
thx!
@robinzon100
@robinzon100 3 года назад
@@simondev758 thanks man for sharing your experience and knowledge 🎆❇️
@AndersonMancini
@AndersonMancini Год назад
My brain is completely melted hahah. OMG. This shows how much I have to learn still. Great tutorial. It is so good to see this very advanced stuff explained like this. 👍🏻
@simondev758
@simondev758 Год назад
Heh, it's pretty neat and you should be able to work through the equations yourself and it'll give you a much clearer understanding of what happens through the pipeline.
@cykboy3254
@cykboy3254 3 года назад
id love to hear more about your history, what you've worked on, for how many years etc. you clearly have a wealth of knowledge to share, and you worked on prototype? used to really like that game as a kid
@simondev758
@simondev758 3 года назад
Sure, I'll probably do some videos on myself at some point
@hamzzashaffi
@hamzzashaffi 3 года назад
@@simondev758 Please do! :) It will be a great thing to get inspired from!
@mikeendsley8453
@mikeendsley8453 3 года назад
I would like to see this as well :)
@NorppaCast
@NorppaCast 3 года назад
This content is pure gold! Thank you for this channel. I have to figure out how the patreon works.
@simondev758
@simondev758 3 года назад
Awesome, much appreciated!
@aj35lightning
@aj35lightning 3 года назад
The three community is lucky to have you sharing all this knowledge. I honestly don't know where else I would learn all this in the context of the web. I'd have to take a several years long career detour into a game studio or something
@simondev758
@simondev758 3 года назад
ty
@DavoGalavotti
@DavoGalavotti 3 года назад
This is invaluable content, really well paced, witty and engaging. I don’t have a super strong foundation on shaders yet, but you manage to make it easier to grasp. Thank you so much!
@andrazvene7004
@andrazvene7004 3 года назад
I'm too busy recently to even start messing with three.js, but your videos are just way too watchable to skip. Can't wait to find some time to be able to start playing around your tutorials
@simondev758
@simondev758 3 года назад
Show me what you make when you do!
@hamzzashaffi
@hamzzashaffi 3 года назад
Thank you so much for these great tutorials!
@simondev758
@simondev758 3 года назад
Glad you liked them!
@aequanimus63247
@aequanimus63247 2 года назад
I'm so glad you cho cho chose to cover this!
@simondev758
@simondev758 2 года назад
Let's bee friends :)
@Rssks
@Rssks 3 года назад
None of it was boring! It was fun and insightful :)
@simondev758
@simondev758 3 года назад
heh thx!
@AddyVDH
@AddyVDH 3 года назад
Beer purchased! These videos are great as someone working in a nearby-ish field to graphics.
@simondev758
@simondev758 3 года назад
ty! What field do you work in?
@AddyVDH
@AddyVDH 3 года назад
@@simondev758 Machine Learning! While most of the work ends up being infrastructure / data pipelining, there is a fair bit of overlap when working with GPUs IMO.
@simondev758
@simondev758 3 года назад
Very cool, that's an area I've wanted to dive into a bit deeper. I took some courses internally at Google, and was even briefly part of one of their broader AI teams, life got in the way though. I might pick your brain for some subjects or reading material at some point.
@AddyVDH
@AddyVDH 3 года назад
@@simondev758 Please do! You're a jack of all trades haha.
@drosophila3250
@drosophila3250 3 года назад
amazing! thank you
@simondev758
@simondev758 3 года назад
glad you enjoyed it
@froken8159
@froken8159 3 года назад
Thank you
@simondev758
@simondev758 3 года назад
np!
@gastonalejandrotrivi2944
@gastonalejandrotrivi2944 4 месяца назад
I would love to see a version of this video with no libraries
@user-kd6kp5zf6n
@user-kd6kp5zf6n 3 года назад
Could you make a video about object collisions, how to fix movements through walls!)
@simondev758
@simondev758 3 года назад
Sure, let me add it to my ideas list!
@emapta862
@emapta862 3 года назад
Loved it...could you make a tutorial based on 3d maze game in three js?
@simondev758
@simondev758 3 года назад
What kind of game are you thinking of?
@emapta862
@emapta862 3 года назад
@@simondev758 something like this www.memory-improvement-tips.com/3d-mazes.html
@pist5343
@pist5343 3 года назад
Awesome! Love the shader techniques :D A question: At 2:28 you mention that this way of doing it isn't ideal. There was a discussion about handing this in three.js discourse in 2019 discourse.threejs.org/t/points-transparent-textures-depth-artifacts-soft-particles/5927/22 , but it hasn't really been concluded. Thus, in your opinion - handling the necessary depth information and feeding it to the particles shader - what would be the "proper", professional, ideal way of doing this? Thanks!
@simondev758
@simondev758 3 года назад
I think I said that because I just straight up render things twice, with no effort to set a cheaper shader or anything. It was just the most straightforward way to do things. I'd guess "proper" would depend on context, and maybe it would be more fair to say what's performant given a particular setup. In a deferred setup, maybe viewspace depth is already available from one of the g buffers, or your forward rendering depth prepass also included a cheap colour buffer with depth information, or you're on a console that allows you to screw around with the memory more directly.
@ustymukhman613
@ustymukhman613 3 года назад
I asked myself the same question, I was hoping to optimize the rendering process by using a single render step as well, but it seems there's no way to get the scene depth buffer as texture in three.js without using an extra WebGLRenderTarget pass. I've checked a lot of similar questions on three.js forum and the source code for most common postprocessing effects (SAO, SSAO..,) and they all are using a render target to store the scene depth information when needed. I've even asked this specific question on the forum and get a confirm reply about it, fell free to check it out here: discourse.threejs.org/t/soft-particles-rendering-performance/27610
@chrisjohns7308
@chrisjohns7308 3 года назад
Are there any dependencies to download in these projects? I cant seem to get them to work
@simondev758
@simondev758 3 года назад
No dependencies, I'm able to just clone them straight from github, startup a local python server and navigate to localhost. I don't know what your setup is, but a common mistake is to try to open the files directly in chrome instead of hosting them.
@Dr.W.Krueger
@Dr.W.Krueger Год назад
That Nvidia paper is from 2007? Interesting...we integrated something comparable into our in-house renderer as far back as 1995.
@simondev758
@simondev758 Год назад
Interesting, that's before I even learned to program! How were you doing it back then? Because I thought depth buffer access in pixel/fragment shaders wouldn't come along until much later.
@arpu4967
@arpu4967 3 года назад
thx
@simondev758
@simondev758 3 года назад
Np!
@valencefootball9740
@valencefootball9740 3 года назад
@@simondev758 Wait what
@simondev758
@simondev758 3 года назад
Lol phone autocorrected, edited response
@valencefootball9740
@valencefootball9740 3 года назад
@@simondev758 lmao
@arpu4967
@arpu4967 3 года назад
worked on a three.js version some time ago on jsfiddle.net/wfo5cvur/5/ but looks this is broken with latest threejs version
@simondev758
@simondev758 3 года назад
No idea whose code this is, doesn't look remotely similar to mine. Tried disabling the soft particle effect and still saw no particles, so this is broken with or without the effect.
@nm9489
@nm9489 3 года назад
What was the name of the game in the start?
@simondev758
@simondev758 3 года назад
Prototype
@johnklein3426
@johnklein3426 3 года назад
This video makes my head hurt.
@simondev758
@simondev758 3 года назад
Oh man, in a good way or bad way? 😬
@austinschaaf6586
@austinschaaf6586 3 года назад
I feel like your super good at game design, have you worked professionally in game design?
@kosnk
@kosnk 3 года назад
Dental plan! Lisa needs braces... 😄
@simondev758
@simondev758 3 года назад
heh
@fengsho2991
@fengsho2991 3 года назад
@simondev hey, I have a game I want to make and want to ask you some questions!
@simondev758
@simondev758 3 года назад
I can answer a quick question here.
@fengsho2991
@fengsho2991 3 года назад
@@simondev758hey! Thanks for the reply. Well, will you be open to assisting making a game? Or better yet, I ha e a game concept. You will obviously do way better at making, and I shaddow and learn from you? I think it would be a really cool project. Please email me and I can explain more @ fengshuimussic@gmail.com
@simondev758
@simondev758 3 года назад
@@fengsho2991 I can mostly assist by explaining things via these videos, but as far as actually contributing to your project, between work, videos, and family, I have about 0 free time. Thanks for the offer, appreciate it, but will happily check out any progress you make in the future!
@heteroerectus
@heteroerectus 3 года назад
Are you h john benjamin?
@valencefootball9740
@valencefootball9740 3 года назад
Helloooo
@simondev758
@simondev758 3 года назад
hi
@martinemanuel8239
@martinemanuel8239 2 года назад
Simon you are human ??
Далее
I Made a 3D Engine in 1 Day (WebGL/JavaScript)
15:06
Просмотров 82 тыс.
Штаны легионера
00:44
Просмотров 229 тыс.
WebGPU :: Rendering the future in Real-Time
17:03
Просмотров 194 тыс.
Your Images DESERVE These Effects
4:46
Просмотров 38 тыс.
The ONE Texture Every Game NEEDS
9:00
Просмотров 249 тыс.
How Games Have Worked for 30 Years to Do Less Work
23:40
I Made a Graphics Engine
6:42
Просмотров 246 тыс.
Camera Movement In Three.js Using GSAP
10:58
Просмотров 30 тыс.