An introduction to Raymarching

Ғылым және технология

This tutorial guides you through the fundamentals of raymarching and space transformation, providing insight into the endless creative possibilities that this technique opens up.
Raymarching base: www.shadertoy.com/view/MfX3WH
Final shader: www.shadertoy.com/view/lcs3DH
You can now support me on Patreon!
• Patreon: / kishimisu
If you want to see more content related to computer graphics & shader coding:
• Instagram: / kishimisu (Digital Art)
• Twitter: / kishimisu (Computer Graphics, ML, Shaders..)
Resources presented in the video:
• Shadertoy: www.shadertoy.com/
• Raymarching in Raymarching: www.shadertoy.com/view/wlSGWy
• 3D signed distance functions: iquilezles.org/articles/distf...
• Color palette: iquilezles.org/articles/palet...
• How to rotate a vector - Freya Holmér: • How to rotate a vector
• Quaternions and 3d rotation - 3Blue1Brown - • Quaternions and 3d rot...
• Inigo Quilez's channel: @InigoQuilez
• The Art of Code's channel: @TheArtofCodeIsCool
Video editing: Premiere & After Effects
Animations: Manim Community and GLSL Shaders
Note that the voice-over has been generated using AI ! (platform: ElevensLab)
The primary reason for this choice is to ensure a cleaner audio quality. As English is not my first language, it can be difficult to keep this kind of content clear and concise. I believe that the generated voice enhances the educational quality of these tutorials. With that said, this is not a definitive choice.
Timestamps:
00:00 Introduction
00:40 What’s Rasterization?
02:02 What’s Raymarching?
05:45 Shader start
08:37 Raymarching
12:35 Optimizations
15:50 Translation
17:50 Operators
19:10 Scaling
20:12 Rotation
22:10 Order of operations
22:53 Camera rotation
24:45 Space repetition
27:07 Getting Creative!
32:37 Final shader
Musics:
• massobeats - jasmine tea
• corbyn kites - dusk drive
• Music by | e s c p | escp-music.bandcamp.com

Пікірлер: 247

  • @kishimisu
    @kishimisu5 ай бұрын

    I hope you'll find this tutorial to be a useful starting point for learning more about raymarching! On a personal note, I recently completed my masters degree in machine learning and plan to start working on my next video as soon as I find employment. If you or your company are seeking a creative mind in the fields of computer graphics, machine learning or computer vision, don't hesitate to send me an email! (available on my profile) You can also support these tutorials on Patreon: www.patreon.com/kishimisu See you in the next one!

  • @SpiritBladeFox

    @SpiritBladeFox

    5 ай бұрын

    Your tutorials are so useful and inspiring thank you for teaching me so much!!

  • @codeunited5905

    @codeunited5905

    5 ай бұрын

    You are one hell of a talented person. Hope you find a good employment soon!

  • @onetwothree2617

    @onetwothree2617

    5 ай бұрын

    Your tutorials are fantastic, thank you. I like the AI voice over.

  • @Carlosdreaming

    @Carlosdreaming

    4 ай бұрын

    These tutorials are amazing! Very well explained and with lots of visuals that help a lot! All the best!

  • @likrecelineation

    @likrecelineation

    4 ай бұрын

    Can you do a video on how to add lights, shadows, and specular reflections to the scene when you do?

  • @krzysztofwolski9156
    @krzysztofwolski91563 ай бұрын

    Thanks a lot for this video. IT's great and easy to comprehend. I just spotted one mistake, so I'll share with people if they get stuck: 26:55 - When doing the time-dependent offset of the cubes the line q=fract(p) - 0.5; should be changed to q=fract(q) - 0.5;

  • @benxtan

    @benxtan

    24 күн бұрын

    I as just about to post this correction. Thanks!

  • @jacobosaldarriaga4820

    @jacobosaldarriaga4820

    15 күн бұрын

    Thank you! I was going really confused for a while, thougth of changing a bunch of stuff except that, makes sense.

  • @VerdASMR
    @VerdASMR5 ай бұрын

    10/10, kishimisu you are a brilliant shader artist and an equally brilliant communicator of information. Please keep sharing that gift with us ❤🙏

  • @psenej
    @psenej5 ай бұрын

    OMG THE RETURN !!

  • @Kabodanki

    @Kabodanki

    5 ай бұрын

    The algorithm choosed him

  • @danycorona6788
    @danycorona67885 ай бұрын

    A just became a supporter at patreon because of this video. I think you nailed the perfect balance giving just enough information to understand what’s going on without getting bogged with details while providing external resources to drill down. The visual explanations are great too. Looking forward to dig in with your next tutorials!

  • @Lavamar
    @Lavamar5 ай бұрын

    Amazing tutorial once again! Your first video inspired me and many others to start experimenting with shader code. This video made basic 3d graphics easily understandable, previosuly to me a daunting task. I also love how you briefly explain several sub-concepts in their simplest forms, prompting a lot of creative exploration. Really appreciate your style, pacing and looking forward to your future videos.

  • @MashJDW
    @MashJDW5 ай бұрын

    This is a fantastic introduction into Ray Marching. Wonderful video. I've started this journey myself a few months ago, and your visualizations will really help others conceptualize these seemingly complicated operations!

  • @Darkensses
    @Darkensses5 ай бұрын

    Thank you kishimisu! you're a true inspiration for me! Shaders are a very complex topic but with your help, this kind of programming is begin become easier :)

  • @2_Elliot
    @2_Elliot5 ай бұрын

    Man, talk about underrated! Here from your previous video, can’t wait for your next. Keep up the good work!

  • @thepurplbanana
    @thepurplbanana5 ай бұрын

    Great video! I toyed with fragment shaders before, but this video made want to go back and properly learn some GLSL and create a couple shader programs! As a point of criticism, I think the code you provide would be easier to follow along and more readable if you were to use proper variable names for values you hardcoded -- using something like `scalingFactor` instead of 4., for example.

  • @kimmyera174

    @kimmyera174

    4 ай бұрын

    Yes. This is a general coding practice called magic numbers. Eventually, constants that never change or one off values, may need to be understood by anyone revisiting the code in the future... that also means yourself :p This was a good tip from professors when I went to college for programming. Also keep up the vids, I'm subscribed for the incredibly easy to follow, guided visual examples that help explain what's fundamentally going on, step-by-step. Keep it up ^^

  • @NeverduskX
    @NeverduskX3 ай бұрын

    This video was so dense with information yet so well-explained. I'm going to rewatch this a few times just so I can absorb everything.

  • @grey8_
    @grey8_5 ай бұрын

    Awesome video! I was occasionally checking your channel to see if you had a new video since you said you're working on a new video on Instagram. You did a really great job! Especially because it was a topic I wanted to checkout anyway. I'm looking forward to more raymarching and seeing your channel evolve, I think you'll succeed easily! Good luck! 🎉

  • @duhdiggitydan
    @duhdiggitydan4 ай бұрын

    Fantastic video! Looking forward to more in this series. I'm a big fan of the 64K demoscene and the creative and technical uses of raymarching, but never could give myself a starting off point to try my hand at my own. You just unlocked a whole universe of exploration for me.

  • @nathanlebon5813
    @nathanlebon58134 ай бұрын

    GOAT Tier learning material. Thank you a lot! I'm seriously thinking about subscribing to your Patreon after 2 tutorials.

  • @CathodeRayKobold
    @CathodeRayKobold5 ай бұрын

    The biggest flaw with ray marching, in my opinion, is that it can be difficult or tedious to design certain arbitrary structures purely with math. It's not a very artist-friendly technique.

  • @loriennasarre
    @loriennasarre5 ай бұрын

    Dude I was really waiting for you to drop another video. I am getting into the world of 3D graphics and shaders and your insight is very appreciated!

  • @MysteryPancake
    @MysteryPancake5 ай бұрын

    Fantastic!! I especially like the diagram at 25:18, it's a very interesting way to visualise it

  • @Veptis
    @Veptis5 ай бұрын

    I am still working on my shader generation evaluation for language models, but your videos have been a great aid to help people explain what shadercode is and how you might interpret code as art.

  • @BarneyCodes
    @BarneyCodes5 ай бұрын

    Another great video! I've been meaning to explore raymarching for ages, so this might be the push I need to get started!

  • @arnetriesyoutube
    @arnetriesyoutube5 ай бұрын

    I really like how much info even the description has!

  • @PledgeBass
    @PledgeBass3 ай бұрын

    Thank you so much for all of the effort put into this. I don't have time to dive into shaders right now but it's something I've been wanting to do for a while.

  • @sIippo
    @sIippoАй бұрын

    Great video! You started small and worked up to some really cool demonstrations. Thank you for doing this all in shadertoy too, so I could quickly try it out for myself.

  • @hekuli
    @hekuli5 ай бұрын

    You really have the best tutorials on the topic. Very well done explaining complex topics in easy to understand terms.

  • @randomystic218
    @randomystic2183 ай бұрын

    This is an absolute gem. Please keep making more of such videos

  • @seanloughran6714
    @seanloughran67145 ай бұрын

    Had to pause in the middle of the video and say, that Milky Way comparison was amazing, funny and instructional. This is an awesome video, well done!

  • @SuboptimalEng
    @SuboptimalEng5 ай бұрын

    I wish this video existed when I started learning Ray Marching (earlier this year) because it would've saved me weeks of self-studying. Really amazing work!

  • @NoBody-pf2nv
    @NoBody-pf2nv2 күн бұрын

    Absolutely incredible! I hope to see more videos on shaders from you! 🎉

  • @puntig.1187
    @puntig.11875 ай бұрын

    I just decided to get into shaders, as a self-taught "creative coder". Your videos are absolutely stunning, highlighting an incredible production value. Be sure that I am going to follow your every move ;) I think you just convinced me to become a Patreon.

  • @Nosikas
    @Nosikas5 ай бұрын

    Oh my gosh, you're back! These videos are phenomenal.

  • @pekka8605
    @pekka86054 ай бұрын

    10/10 Nothing to add. Very clear yet concise explanation and visualizations.

  • @Elmo-uu3cb
    @Elmo-uu3cb5 ай бұрын

    Wow amazing! Thank you for sharing all those great lessons 😎🔥

  • @JakeDownsWuzHere
    @JakeDownsWuzHere4 ай бұрын

    double thumbs up for the Quaternion videos you linked, they're invaluable in understanding what at first can be a very opaque and confusing construct

  • @motbus3
    @motbus35 ай бұрын

    This is absolutely amazing. Please keep doing it!

  • @Cigam_HFden
    @Cigam_HFden5 ай бұрын

    Excellent run down of a lot of concepts and aspects of ray-marching. I have been experimenting with raymarching and SDF shapes in the godot engine. I am not sure how performant that will be, because I am still working at making the code for it. However, I will definitely be looking forward to your future videos. Cheers!

  • @gdthatbigderp2375
    @gdthatbigderp23755 ай бұрын

    The legends said that some day, kishimisu will return!

  • @marvinkruger4559
    @marvinkruger45595 ай бұрын

    Thank you so much for another wonderful video!!

  • @juanloutech2864
    @juanloutech28644 ай бұрын

    Very, very interesting and very well explained! Thanks for this introduction to the huge world of shaders!

  • @4.0.4
    @4.0.45 ай бұрын

    Absolutely amazing content. I can vouch for The Art of Code too, his videos are long but very easy to follow.

  • @neokortexproductions3311
    @neokortexproductions3311Ай бұрын

    Thank you! You inspired me to get back into coding and creating generative art, looking forward to future tutorials🤝

  • @rimonsade-jd3id
    @rimonsade-jd3id5 ай бұрын

    That is beyond great content. Truly mesmerizing.

  • @januskane1978
    @januskane19785 ай бұрын

    I enjoy the AI voiceover, it's calm and to-the point! Very nice!

  • @AlexMoreno-zj7po

    @AlexMoreno-zj7po

    4 ай бұрын

    same, had no idea it was AI

  • @najlitarvan921

    @najlitarvan921

    4 ай бұрын

    to be frank it is one of the better AI voices

  • @michaelcheverie7579
    @michaelcheverie75795 ай бұрын

    Just this afternoon I was messing around with applying rotation matrices to conic sections in the Desmos graphing calculator. Cool to see that technique used in shaders!

  • @Not_Even_Wrong
    @Not_Even_Wrong5 ай бұрын

    Amazing, awaiting the next videos eagerly!

  • @shinomitsu7798
    @shinomitsu77985 ай бұрын

    Thank you. Can't wait for the next video

  • @MrBerserkPoo
    @MrBerserkPoo5 ай бұрын

    im so glad you're making more content

  • @dumbo8260
    @dumbo82605 ай бұрын

    nicely done dude. can't wait for the volumetric tutorial

  • @miyu1424
    @miyu14245 ай бұрын

    Finally! I'm so excited!

  • @foxxify1
    @foxxify15 ай бұрын

    This is so cool. I love the exploration into noncartesian space. You can really do so much with just a few lines of code.

  • @viezegast1305
    @viezegast13055 ай бұрын

    Absolute unit of a channel

  • @futurebypatrick
    @futurebypatrick4 ай бұрын

    Great video with great presenting format. Really appreciate. I am not coder at all, but really interested in this type of experimenting now. 😁😁

  • @NedCollyer
    @NedCollyer10 күн бұрын

    Incredible! Thank you :)

  • @migueldc6845
    @migueldc6845Ай бұрын

    Really enjoying your videos! And have recommended them in my developers circle (:

  • @augnix888
    @augnix8885 ай бұрын

    Loved the tutorial!

  • @razu1976
    @razu197611 күн бұрын

    This is such a good video. Well done.

  • @erikjohnson9112
    @erikjohnson91125 ай бұрын

    Great to have you back! Personally I would like to see WebGPU perhaps using wgpu (and engine that supports both desktop and web). Compute shaders & fragment shaders are my top topics (or more precisely areas).

  • @kishimisu

    @kishimisu

    5 ай бұрын

    I might create a video about webgpu in the future to introduce compute shaders. However it may be difficult to fit on the screen nicely as wgsl is more verbose than glsl!

  • @bloom945
    @bloom9455 ай бұрын

    Absolutely legendary video. Subbed.

  • @hordorsok
    @hordorsok5 ай бұрын

    Oh man, you are finaly here thax for video!

  • @vovos00
    @vovos004 ай бұрын

    It helped me a lot!! thank you so much.

  • @mercantilistic
    @mercantilistic3 ай бұрын

    This is completely bananas thank you!

  • @LuigiElettrico
    @LuigiElettrico5 ай бұрын

    Simple yet amazing.

  • @mlecz
    @mlecz5 ай бұрын

    Fantastic Video !, The content of this material is so valuable that the participation of AI as an speaker completely does not bother me. Thank you for your work !

  • @ahsan2649
    @ahsan26495 ай бұрын

    The only raymarching tutorial I ever understood.

  • @10bokaj
    @10bokaj4 ай бұрын

    nice explination, one of the better I have seen

  • @bengt-goranpersson5125
    @bengt-goranpersson51255 ай бұрын

    Thank you kishimisu!

  • @JimmyBrandZ
    @JimmyBrandZ3 ай бұрын

    Wooooow!... Just the thing i've been looking for. 😲

  • @morqanic
    @morqanic4 ай бұрын

    YESSSS ANOTHER VIDEO THANK YOU!!!!

  • @erevanayen
    @erevanayen4 ай бұрын

    My guy is literally teaching magic and asks nothing for it. The production and information value of this video is insane. I'm making a patreon account just to support you.

  • @redsprites5216
    @redsprites52165 ай бұрын

    'Now' I subscribe. Love this!

  • @someguy1428
    @someguy14285 ай бұрын

    Ray marching is such a beautiful technique. Infinite objects with mathematical operations with low computational power.

  • @somewhere-else
    @somewhere-else5 ай бұрын

    ai voice or not the effort that went into this video is obvious and it’s top notch. honestly reminds me of robert penner’s work back in the flash days.

  • @aref2268
    @aref22684 ай бұрын

    Aah shade, here we go again Now I have an awesome toy to procrastinate with. This tutorial is amazing🔥

  • @bitblit
    @bitblit5 ай бұрын

    Never thought I'd learn how to become a lightbender, but this video made it so easy! Universes beware.

  • @dacool_boe4071
    @dacool_boe40715 ай бұрын

    Your videos are amazing bro

  • @jazzhar
    @jazzhar4 ай бұрын

    I found it incredibly easy to understand, you expertly explained not only the goal but also what individual components did without making it confusing. Although it's not shader, but could you tackle cube marching? (Procedural generation) Havent found someone that could explain it well yet.

  • @raulcasquinha
    @raulcasquinha4 ай бұрын

    This is so cool thank you

  • @leonardvanduuren8708
    @leonardvanduuren87084 ай бұрын

    Grandmaster ! The best out here !

  • @ivanmoltini926
    @ivanmoltini9265 ай бұрын

    Babe wake up, Kishimisu dropped a new video!

  • @simonviit4982
    @simonviit49825 ай бұрын

    Thank you, I hope you might consider produce "An introduction to RayTracing" in future.

  • @sleepymushroom9403
    @sleepymushroom94035 ай бұрын

    Funnily enough I was looking for a video to explain raymarching to me, been thinking of implementing in a project lately.

  • @Jellyjam14blas
    @Jellyjam14blas5 ай бұрын

    That is awesome! :D

  • @cyberbemon
    @cyberbemon5 ай бұрын

    Lol this video would have helped me a lot about 2 years ago when I did my computer graphics module. I was struggling to find a good video that broke down Raymarching. Still better late than never, I can use this to revise that shit properly now!

  • @unvergebeneid
    @unvergebeneid5 ай бұрын

    Free you mind, Neo. What you must learn is that these rules are no different than the rules of a computer system. Some rays can be bent. Others, can be curled up like some non-physical strand of hair. Well, I'm pretty sure if Neo had made full use of his ability to bend the rules of a computer system, The Matrix would've been a much different movie. And much more popular with the psychedelics crowd.

  • @eli123ry
    @eli123ry2 ай бұрын

    Amazing Video

  • @RemoteAnimations
    @RemoteAnimations19 күн бұрын

    This is amazing

  • @aimkata
    @aimkata25 күн бұрын

    🔥 Next amazing video please!

  • @JunicoNRC
    @JunicoNRC5 ай бұрын

    goh damn my new shaders course

  • @BlueDog15391
    @BlueDog153915 ай бұрын

    Thanks to you I may finally be able to find a hobby I can commit to

  • @absence9443
    @absence9443Ай бұрын

    THANK you!

  • @lkhprime
    @lkhprime3 ай бұрын

    Very Clear

  • @Fikretov
    @Fikretov17 күн бұрын

    Pure gold.

  • @ethanwimsett
    @ethanwimsett3 ай бұрын

    Brilliant!

  • @prathampatel6357
    @prathampatel63575 ай бұрын

    Nice work

  • @gaeel330
    @gaeel3304 ай бұрын

    You shouted out Leon Denise! He's the one who introduced me to raymarching. Really cool dude! He organises amazing demoparties and live-coding events with Cookie Collective, check them out if you're into all this stuff!

  • @user-nq5un4zn8e
    @user-nq5un4zn8e5 ай бұрын

    Great content

  • @a1000joys
    @a1000joys5 ай бұрын

    This is magic.

  • @andreicn0
    @andreicn05 ай бұрын

    wow you're back

  • @GergoErdi
    @GergoErdi5 ай бұрын

    Since SDFs are combined using both left- and right-compositions (i.e. some transformations are preprocessing, some are post), I think a higher-order language (i.e. where you can pass functions around as arguments) is the right abstraction for raymarching-based scenes, instead of what you have in this C-ish language. And of course for a given static scene description, it should be trivial to flatten that into a first-order program, so it could even generate ("transpile") into this C-like language.

  • @NoTengoIdeaGuey

    @NoTengoIdeaGuey

    5 ай бұрын

    This is written in WebGL(or GLSL, or HLSL - all virtually identical), it's literally the language the DirectX API is written in. If you're writing shaders this is THE language it's in. That or you're just writing the assembly manually.

  • @GergoErdi

    @GergoErdi

    5 ай бұрын

    @@NoTengoIdeaGuey yes, thanks GLSL, that's that name I just couldn't remember. So yeah, what you want is a higher-order language that transpiles to GLSL. Maybe something like LambdaCube 3D?

  • @TiagoTiagoT
    @TiagoTiagoT5 ай бұрын

    Is it possible to correct the space distortions mentioned in the end to avoid the artifacts?

  • @parkedhampster212
    @parkedhampster2124 ай бұрын

    We did it, fellas - we reinvented the CRT in the virtual world

  • @briansheldon9401
    @briansheldon94012 ай бұрын

    Incredible video. Could someone please explain why at 7:27 the ray direction is given as normalize(vec3(uv, 1)) and not normalize(vec3(uv, 3)) for a camera 3 units from the screen? Shouldn't the direction be normalize(vec3(uv, distanceFromScreen)) for this setup?

Келесі