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.
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. 👍🏻
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.
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
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
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
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!
@@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.
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.
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!
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.
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
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.
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.
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.
@@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
@@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!
i hope your RUclips channel grows more, more people must learn shader programming from you
thx!
@@simondev758 thanks man for sharing your experience and knowledge 🎆❇️
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.
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. 👍🏻
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.
I just realized you said you worked on one of my favorite games. Awesome you inspire me everyday Simon.
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
Sure, I'll probably do some videos on myself at some point
@@simondev758 Please do! :)
It will be a great thing to get inspired from!
I would like to see this as well :)
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
ty
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
Show me what you make when you do!
This content is pure gold! Thank you for this channel. I have to figure out how the patreon works.
Awesome, much appreciated!
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!
I'm so glad you cho cho chose to cover this!
Let's bee friends :)
Beer purchased! These videos are great as someone working in a nearby-ish field to graphics.
ty! What field do you work in?
@@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.
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.
@@simondev758 Please do! You're a jack of all trades haha.
None of it was boring! It was fun and insightful :)
heh thx!
Thank you so much for these great tutorials!
Glad you liked them!
amazing! thank you
glad you enjoyed it
I would love to see a version of this video with no libraries
Could you make a video about object collisions, how to fix movements through walls!)
Sure, let me add it to my ideas list!
Thank you
np!
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!
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.
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
Loved it...could you make a tutorial based on 3d maze game in three js?
What kind of game are you thinking of?
@@simondev758 something like this
www.memory-improvement-tips.com/3d-mazes.html
That Nvidia paper is from 2007? Interesting...we integrated something comparable into our in-house renderer as far back as 1995.
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.
Are there any dependencies to download in these projects? I cant seem to get them to work
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.
I feel like your super good at game design, have you worked professionally in game design?
thx
Np!
@@simondev758 Wait what
Lol phone autocorrected, edited response
@@simondev758 lmao
What was the name of the game in the start?
Prototype
worked on a three.js version some time ago on jsfiddle.net/wfo5cvur/5/ but looks this is broken with latest threejs version
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.
Dental plan!
Lisa needs braces...
😄
heh
This video makes my head hurt.
Oh man, in a good way or bad way? 😬
Are you h john benjamin?
@simondev hey, I have a game I want to make and want to ask you some questions!
I can answer a quick question here.
@@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
@@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!
Simon you are human ??
Helloooo
hi