Ray Marching for Dummies!

  Рет қаралды 234,166

The Art of Code

The Art of Code

Күн бұрын

Twitter: @The_ArtOfCode
Facebook: / theartofcode
Patreon: / theartofcode
PayPal Donation: paypal.me/theartofcode
Live version:
www.shadertoy.com/view/XlGBW3
Most 3d shaders you see out there make use of this technique. Its the bigger brother of the more well know ray tracing technique. It's called ray marching and in this video I'll explain in detail how this technique works so you can start making cool 3d graphics yourself!

Пікірлер: 426
@upalmucha6440
@upalmucha6440 4 жыл бұрын
--> receives free lesson --> shamelessly complaints about audio quality... Seriously? Thank you Martijn for this super useful video!
@3FourFour5
@3FourFour5 3 жыл бұрын
i think they fried their speakers, the audio quality is great
@Hypnoticshark
@Hypnoticshark 5 жыл бұрын
Looks like Christmas came early! This is the best explanation of ray marching I have come across. Thank you!!
@JohnMarkIsaacMadison
@JohnMarkIsaacMadison 3 жыл бұрын
Swizzles make a lot more sense now that I see an actual use case for them.
@michelangelowebb4362
@michelangelowebb4362 2 жыл бұрын
I agree !
@joshuabatty
@joshuabatty 5 жыл бұрын
One of the best explanations i've ever come across, thank you so much!
@nuty7899
@nuty7899 4 жыл бұрын
Thank you for this amazing tutorial! I successfully implemented my first ray marching shader on my renderer. It looks awesome!
@bbrws
@bbrws 5 жыл бұрын
This is such an amazing explanation of the math behind raymarching - thanks so much! Everyone should sign up for the Patreon!
@stromboli183
@stromboli183 4 жыл бұрын
Awesome explanation. You make some top quality content, good sir. Much appreciated!
@JunkerJames
@JunkerJames 4 жыл бұрын
Had been meaning to try this technique for years, but only just got around to it. This video was an amazingly good sanity check. Thank you so much for making it!
@Dezomm
@Dezomm Жыл бұрын
The way you explained it makes a lot of sense and I feel like I understand *how* everything works, so thank you for that! You're a great teacher!
@dipaco_
@dipaco_ 5 жыл бұрын
This is an amazing explanation of the marching rays. Awesome!
@mcfoton
@mcfoton 4 жыл бұрын
Thank you so much for this series. You help me experience joy of all that ❤️
@Udinanon
@Udinanon 2 жыл бұрын
I was watching a series of videos on Ray Marching lately and all skipped on many details and things, focusing only on cool effects and fractals, thankfully i found this video to help me understand all the basic elements Amazing work!
@PAEz...
@PAEz... 4 жыл бұрын
Awesome! This sorta stuff is a bit beyond me but I like knowing the general gist. This was so well made I really feel like I do know the gist now, thanks!
@dgoberna
@dgoberna 5 жыл бұрын
You made it again. Great entry explanation of raymarching. Concise, simple, easy to understand. Neat neat job, congratulations and thanks for your work.
@bruninhohenrri
@bruninhohenrri 4 жыл бұрын
This channel fits like a glove. Thank you for the work !
@scorpion666lair
@scorpion666lair 5 жыл бұрын
This is exactly what I was looking for - please continue this path!
@krisp-
@krisp- 4 жыл бұрын
I replicated this in Blender with the node editor. It is probably the most impractical thing I've made, but it was fun. Thanks for the great explanation/tutorial!
@mr.hashundredsofprivatepla3711
@mr.hashundredsofprivatepla3711 8 ай бұрын
How did you deal with the raymarching for loop in the node editor?
@somenicedutchguy638
@somenicedutchguy638 2 жыл бұрын
Awesome. How you explain the thought proces about the inner workings. The logic, just wow!
@suvetar
@suvetar 7 ай бұрын
That's great stuff - thank you for sharing this, gotta say that I love your presentation style - you hit the nail on the head for my preferred style! Thanks again man; I am really looking forwards to checking out your other content!
@megaipks
@megaipks 3 жыл бұрын
Absolutely amazing! Now I finally got the idea of raymarching! And it is suprisingly simpler than I think! Thanks mate! Keep your good work!
@sacredbanana
@sacredbanana 5 жыл бұрын
I've been waiting for this video for years! You cannot comprehend how happy I was to see this in my subscription feed today! Haha thanks so much!
@TheArtofCodeIsCool
@TheArtofCodeIsCool 5 жыл бұрын
Awww.. you are welcome!
@taylor.matson
@taylor.matson 3 ай бұрын
Excellent video covering a lot of the basics! Should be the first video in any Raymarching playlist ;)
@jeyko666
@jeyko666 5 жыл бұрын
@kimnielsen7818
@kimnielsen7818 3 жыл бұрын
Just found this tutorial and even though I'm not doing it in a shader (I wanted to make it in python) I find this very useful so a big thank you!
@sagielevy
@sagielevy 5 жыл бұрын
This really is for dummies. Thanks for the amazingly clear explanation! Would love to see more stuff coming out :)
@TheArtofCodeIsCool
@TheArtofCodeIsCool 5 жыл бұрын
Hehe, yeah I try to explain it as basic as possible. Glad you like it and thanks for watching!
@MichaelProstka
@MichaelProstka 4 жыл бұрын
Superb! Really dig the code being written as you go along.
@kovnokl5941
@kovnokl5941 4 жыл бұрын
damn you're crazy... explained such a complex topic, that even I could understand everything you said with only one time viewing the video... Big props
@realcygnus
@realcygnus 5 жыл бұрын
WAY cool my man ! I find this extremely interesting, exactly what I was hoping you'd eventually cover. Long time no see. It seems I wasn't getting alerted, damn ty notifications. I got a few vids to catch up on anyways. Thanks for sharing, you're so awesome at explaining these things.
@NullM0niker
@NullM0niker 5 жыл бұрын
Very helpful! Thanks for taking the time to make this.
@arkondigital1496
@arkondigital1496 Жыл бұрын
I'm impressed what Ray Marching can do! Feels magical
@futureartist6420
@futureartist6420 5 жыл бұрын
Your teaching method is the best. Thank you very much
@ilmarsrauda
@ilmarsrauda 5 жыл бұрын
I really like that you continue to make these very helpful videos ... Thank You :)
@jobemattcurr
@jobemattcurr 4 жыл бұрын
Thank you! This is one of the best tutorials for anything I have seen in my life. Simple enough to grasp as a beginner, yet it's simple without glossing anything over so you really get to understand everything you learn here. An excellent starting point for anyone interested in ray marching!
@TheArtofCodeIsCool
@TheArtofCodeIsCool 4 жыл бұрын
Thanks! And thanks for watching!
@TerminalStage
@TerminalStage 4 жыл бұрын
Great work! I tried to understand it by myself, looking at examples on Shadertoy, but I failed :D Your explanation is so easy to understand! Thanks!
@RussPainter8
@RussPainter8 4 жыл бұрын
Great explanation. Your graphics really helped get the point across.
@helo3153
@helo3153 3 жыл бұрын
This chapter is really super useful, thank you again!
@Michallote
@Michallote 2 жыл бұрын
The fact that you can create something like this out of small samples of code and some very neat core ideas, makes me believe that it could actually be possible to simulate a world so realistic people don't notice right away they are in one
@TheArtofCodeIsCool
@TheArtofCodeIsCool 2 жыл бұрын
That is where we are headed, absolutely.
@nickfaro5764
@nickfaro5764 5 жыл бұрын
Awesome vid. Never really knew how raymarching worked
@bensteer2389
@bensteer2389 4 жыл бұрын
Really interesting and well-made video, thanks a lot!
@JoeNo310
@JoeNo310 2 жыл бұрын
Thank you for the clear explanation of an otherwise complicated topic!
@JosephAzarlyon69
@JosephAzarlyon69 3 жыл бұрын
Thank you ! your skecth/diagram helped me a lot. Great explanations
@AtmosMr
@AtmosMr 2 жыл бұрын
Thank you! Very well explained video. Great pace for a newbie to ray marching. Thumbs up!
@AtmosMr
@AtmosMr 2 жыл бұрын
Ooooo, thanks! btw - you can't hear you at the end as the music drowns you out. But great - I'm fired up!
@binhql
@binhql Жыл бұрын
Thank you so much. Your teaching skills are wonderful!
@granolakitti8521
@granolakitti8521 2 жыл бұрын
OMG this is magical. Thank you for making this
@andreidoanca4262
@andreidoanca4262 8 ай бұрын
thanks for this cool tutorial. really well done
@fonzjedelarosa7587
@fonzjedelarosa7587 4 жыл бұрын
Excellent tutorial Martijn, bedankt!
@user-fu7zr5us5f
@user-fu7zr5us5f 4 жыл бұрын
nice tutorial ~ and happy new year
@StriderSeiryuu
@StriderSeiryuu 4 жыл бұрын
wow! really nice explanation, Thank you!!
@CaduSaMotta
@CaduSaMotta 4 жыл бұрын
Congratulations! Great work.
@hanniffydinn6019
@hanniffydinn6019 5 жыл бұрын
Distance functions are where it’s really fascinating! For interesting objects the distance functions are fun.
@TheArtofCodeIsCool
@TheArtofCodeIsCool 5 жыл бұрын
Yep :)
@meowyih1
@meowyih1 2 жыл бұрын
After read dozens of articles and videos, I finally found one that I can understand. Thanks a ton! m(_ _)m
@consumer2014
@consumer2014 Жыл бұрын
holy shit the sub bass in this is wild!! lol anyway, thank you so much for this amazing walkthrough. extremely clear and organized. thank you!!!!
@nemesiswes426
@nemesiswes426 4 жыл бұрын
Awesome video, super easy to understand.
@user-mh1yo8pl4f
@user-mh1yo8pl4f 3 жыл бұрын
Awesome tutorial, so easy explained, that even a 9th grader (me) can understand it! Thank you so much!
@TheArtofCodeIsCool
@TheArtofCodeIsCool 3 жыл бұрын
Awesome!
@alihelmy
@alihelmy 5 жыл бұрын
Very nice and clear explanation. Cheers
@Tony-tu8uz
@Tony-tu8uz 3 жыл бұрын
thank you for a very consistent explanation :)
@5589e5
@5589e5 2 жыл бұрын
Thank you for making great stuff!
@helo3153
@helo3153 3 жыл бұрын
Thank you for your tutorial. It really helps me a lot!
@TheArtofCodeIsCool
@TheArtofCodeIsCool 3 жыл бұрын
Glad it helped!
@jaroslawmichalski9021
@jaroslawmichalski9021 5 жыл бұрын
It is a really good video and great explanation. Thanks a lot.
@browneric2458
@browneric2458 5 жыл бұрын
This is really really helpful, thanks a lot!
@bogdanpashchenko2142
@bogdanpashchenko2142 5 жыл бұрын
Very nice explanation, thanks a lot!
@BruceLane
@BruceLane 5 жыл бұрын
very helpful, thank you! btw the keyboard shortcut to run the shader is alt-enter
@alexmassy
@alexmassy 2 жыл бұрын
Very cool video and awesome channel ! thx !
@mohamedessa530
@mohamedessa530 Жыл бұрын
I'll learn many things from you, thanks man
@TheArtofCodeIsCool
@TheArtofCodeIsCool Жыл бұрын
Great to hear!
@josephruiz831
@josephruiz831 5 жыл бұрын
I love your videos, truly. Excellent explanations! I do feel like they would be easier to follow with actual variable names. I realize most shadertoy authors go for a more codegolf approach, but it'd be nice. Keep it up!
@TheArtofCodeIsCool
@TheArtofCodeIsCool 5 жыл бұрын
I feel you and I will try to be a bit more descriptive in certain cases. Having said that, a lot of the short vars are almost convention; everyone uses the same names. This way, you can get used to the names which makes it easier reading other peoples shaders. Also, it makes it faster for me to type (my vids are long enough as it is), and easier to use in formulas.
@achimstromberger
@achimstromberger 4 жыл бұрын
very well explained, thank you!
@PeterParnes
@PeterParnes 5 жыл бұрын
Great introduction. Thanks!
@prietjepruck
@prietjepruck Жыл бұрын
Very clear and interesting. Dank je wel.
@Finofinissimo
@Finofinissimo 3 жыл бұрын
Powerful stuff. Thanks for sharing.
@anotherplatypus
@anotherplatypus 4 жыл бұрын
Yeaayaa, omg I'm so glad you exist! Not knowing how to program shaders is a very subtle restriction like.... sheeesh describing how it feels to be limited by it is tough... Ok, it's like loving to work on cars, but you can't touch the electrical systems. You can master whatever as long as wired parts remain a mystery. The longer you do it, the more apparent it becomes that simple fixes can become ugly kludges, large-scale improvements rarely feel perfect, and when you're done... there are haunting moments when you just gotta hope the lights come on, the car will start, and it won't die in front of anyone later on.
@TheArtofCodeIsCool
@TheArtofCodeIsCool 4 жыл бұрын
Haha, that could be the foreword to the shader coding book I'll write one day ;)
@anotherplatypus
@anotherplatypus 4 жыл бұрын
@@TheArtofCodeIsCool Wow..., that is without a doubt the nicest thing anyone has ever said about one of my comments.... thank you. = )
@atagen2186
@atagen2186 4 жыл бұрын
have you tried tbos? thebookofshaders.com it's mostly generative focused but you can apply a lot of the same techniques to image sampling too
@ArminJohansson
@ArminJohansson 3 жыл бұрын
I'm gonna learn so much from you it's carzy
@kamiltrzaska
@kamiltrzaska 4 жыл бұрын
Thanks for the video, it seems so simple now
@leonardvanduuren8708
@leonardvanduuren8708 Жыл бұрын
Thanks for these videos !
@DylanBurke
@DylanBurke 5 жыл бұрын
I'm addicted to your videos. Your newer ones don't have this issue, but the keyboard thumps that get picked up by the mic here are really distracting. Seems you've been more mindful of that since then though. Thank you so much for uploading this stuff; will support when I can!
@TheArtofCodeIsCool
@TheArtofCodeIsCool 5 жыл бұрын
Thanks for the feedback. I'm trying a lapel mike next, hopefully it will get better!
@tkasch
@tkasch 2 жыл бұрын
Absolute great, thank you!
@prietjepruck
@prietjepruck Жыл бұрын
The one thig that does not stop to amaze me is how little code is needed to create wonderful graphics.
@Madsy9
@Madsy9 5 жыл бұрын
Great introduction to ray marching. Small nitpick: While your function for computing normals works for your sphere case, I recommend using central difference instead of forward difference like you did when computing the surface gradient. You also shouldn't normalize, but instead divide your gradient with the epsilon. In most non-trivial cases the actual gradient is a better surface approximation than the renormalized vector. So you get vec3(f(x+eps,y,z)-f(x-eps,y,z), f(x,y+eps,z)-f(x,y-eps,z), f(x,y,z+eps)-f(x,y,z-eps)) * (1./eps). It is also useful for people to know that because surface normals are done with gradients, it is extremely important that the distance function is smooth everywhere. Sharp corners, discontinuities and stuff like that have a nasty tendency to mess up lighting. It is sometimes helpful to render the gradients as colors for debugging.
@TheArtofCodeIsCool
@TheArtofCodeIsCool 5 жыл бұрын
Thanks for the reply. I personally have never had any issues with forward difference normals and it saves two GetDist calls. I have to try out your normalization comment... thanks!
@SerBallister
@SerBallister 4 жыл бұрын
@@TheArtofCodeIsCool It's a good general solution but if you have an expensive distance function the 3 extra ray march calls needed to get the surface derivatives are going to quadruple the computation needed.
@TheArtofCodeIsCool
@TheArtofCodeIsCool 4 жыл бұрын
@@SerBallister Only if the raymarch only took 1 step, which, for complex scenes especially, is very rare. Lets say it takes 30 steps, then the 3 extra calls make it 10% more expensive.
@SerBallister
@SerBallister 4 жыл бұрын
@@TheArtofCodeIsCool Good point
@anquisesss
@anquisesss 4 жыл бұрын
Hello, first of all, thank you Martijn for this amazing tutorial :D I understood it all, well, almost it all. I don't quite understand how you get the normals, I get that if you do the gradient with the forward diference method, you get the tangent or binormal (I'm not quite sure which), but wouldn't you have to do the negative reciprocals to get the normal instead of the tangent? (like in this video: kzfaq.info/get/bejne/lZ-oZcaitJ2ReZs.html&feature=emb_title)?
@marlus
@marlus 4 жыл бұрын
great tutorial! thank you very much, subscribed!
@hvanmegen
@hvanmegen 4 жыл бұрын
that keyboard rumble caused my glass to be bounced from the table by the thundering keystrokes coming from my sub
@user-lf2bo5zk6i
@user-lf2bo5zk6i 4 жыл бұрын
Fantastic lesson!
@kogi04
@kogi04 3 жыл бұрын
Awesome tutorial. Thank you!
@tonyzhu975
@tonyzhu975 3 жыл бұрын
This tutorial is amazing!! Thanks!
@oberguga
@oberguga 4 жыл бұрын
It can be optimized. If in first you use classical projection approach, then you can segment all screen to fragment belonging to different object. Then if you process all segment separately, you can march few ray simultaneously because near ray don't intersect object too if central ray has enough empty space nearby.
@TheArtofCodeIsCool
@TheArtofCodeIsCool 4 жыл бұрын
Yes there are certainly some optimizations that could be done.
@Haykke
@Haykke 3 жыл бұрын
*Starts explaining..* me - *instant like*
@Heisenberg2097
@Heisenberg2097 5 жыл бұрын
Great video!!!
@coolfunmario
@coolfunmario 5 жыл бұрын
thank you so much !!!!
@JNelson_
@JNelson_ 5 жыл бұрын
This is truly incredible.
@TheArtofCodeIsCool
@TheArtofCodeIsCool 5 жыл бұрын
Thanks. I'm glad you like it!
@darrensweeney4501
@darrensweeney4501 5 жыл бұрын
Really enjoying your videos.
@TheArtofCodeIsCool
@TheArtofCodeIsCool 5 жыл бұрын
Awesome!
@ralofpatel470
@ralofpatel470 4 жыл бұрын
Subscribed without wasting a second
@tommycard4569
@tommycard4569 2 жыл бұрын
great video! thank you
@lordadamson
@lordadamson 5 жыл бұрын
Thanks for the awesome video. I'd love to see a video on how you debug when you face an issue.
@TheArtofCodeIsCool
@TheArtofCodeIsCool 5 жыл бұрын
Myeah debugging is hard sometimes. But the good thing about it is that you really have to understand your code at every step of the way. The only thing you can really do to debug is to output values and interpret the output color as a number. What I do in many videos is to visualize UVs to assure myself that they are correct before moving on.
@daviddawkins
@daviddawkins 3 жыл бұрын
Amazing video. Shadows too! The only thing bugging me is that I think the vector between two points on a surface is a tangent, not a normal . You definitely treat it like it’s a normal (since you dot it with the light direction), but I can’t see why it works (and it clearly does!). What am I missing?
@TheArtofCodeIsCool
@TheArtofCodeIsCool 3 жыл бұрын
Great point, I could have perhaps expounded on this a bit more. Turns out we are both right because we are getting a tangent, but it turns out that the normal of the surface IS the tangent of the distance field. It is the direction in which the distance increases the most.
@aaronsmith8259
@aaronsmith8259 5 жыл бұрын
Hey great video with a clear explanation :) If you wanted to sample a texture at the hit position, how would you go about converting the hit pos into a uv coordinate? Thanks
@TheArtofCodeIsCool
@TheArtofCodeIsCool 5 жыл бұрын
There are many different ways to do this and it really depends on the particular circumstance. One of the simplest ways would be to take 2 of the 3 world coordinates of the hit position. It would be a great topic for a future video :)
@UnitCodesChannel
@UnitCodesChannel 4 жыл бұрын
Well explained. Super Cool!
@JocelynDaPrato
@JocelynDaPrato 5 жыл бұрын
Nice video. I'll try for sure :)
@rohitrathnam6057
@rohitrathnam6057 4 жыл бұрын
Great video! Came here from Coreteks
@ishdx9374
@ishdx9374 4 жыл бұрын
really well explained!
@urgisjot
@urgisjot 3 жыл бұрын
Thank you for your videos! Maybe you could look into the topic of reflections in ray marching?
@TheArtofCodeIsCool
@TheArtofCodeIsCool 3 жыл бұрын
Thanks for watching. Reflection is certainly something we'll look at in the future.
@LinusDev
@LinusDev 5 жыл бұрын
Thanks for the great video!
@bryphi77
@bryphi77 5 жыл бұрын
Thanks for the great content!
@liujingming9868
@liujingming9868 5 жыл бұрын
Great job!!!
Ray Marching Simple Shapes
33:30
The Art of Code
Рет қаралды 77 М.
An introduction to Raymarching
34:03
kishimisu
Рет қаралды 128 М.
HAPPY BIRTHDAY @mozabrick 🎉 #cat #funny
00:36
SOFIADELMONSTRO
Рет қаралды 17 МЛН
Despicable Me Fart Blaster
00:51
_vector_
Рет қаралды 25 МЛН
Coding Adventure: Clouds
12:50
Sebastian Lague
Рет қаралды 1,2 МЛН
Painting a Landscape with Maths
42:00
Inigo Quilez
Рет қаралды 700 М.
How Big Budget AAA Games Render Clouds
10:45
SimonDev
Рет қаралды 266 М.
80 Year Olds Share Advice for Younger Self
12:22
Sprouht
Рет қаралды 1,4 МЛН
I Made A Blob Shooting Game With Ray Marching
13:33
Visionary 3D
Рет қаралды 38 М.
Signed Distance Functions & Ray-Marching
24:14
Sum and Product
Рет қаралды 28 М.
Writing a ray marcher in Unity
32:24
The Art of Code
Рет қаралды 63 М.
Ray Marching, and making 3D Worlds with Math
6:28
SimonDev
Рет қаралды 242 М.
Coding Marching Squares
26:28
The Coding Train
Рет қаралды 177 М.
Rate This Smartphone Cooler Set-up ⭐
0:10
Shakeuptech
Рет қаралды 2,2 МЛН
Сколько реально стоит ПК Величайшего?
0:37
Как удвоить напряжение? #электроника #умножитель
1:00
Hi Dev! – Электроника
Рет қаралды 975 М.
$1 vs $100,000 Slow Motion Camera!
0:44
Hafu Go
Рет қаралды 27 МЛН