It Takes Two, lava lamps, Raymarching in Godot 4.1.

Sdílet
Vložit
  • čas přidán 9. 07. 2024
  • In this video I spot a lava lamp in It Takes Two and try to recreate it in Godot 4.1 using raymarching. Which turns out to be a bit overkill.
    Chapters:
    0:00 Introduction
    0:31 SDFs
    1:21 What is a Ray?
    1:41 Raymarching explanation
    2:25 Implementing raymarching in Godot
    5:32 Adding surface normal
    6:10 Adding more spheres and animation
    7:34 Booleans
    8:30 Smooth booleans
    9:20 Fixing issues
    10:56 Adding colour
    11:41 Blending between different shapes
    12:06 Finished result
    References:
    iquilezles.org/articles/distf...
    • Coding Adventure: Ray ...
    docs.godotengine.org/en/stabl...
    Me:
    Patreon / bolddunkley
    Twitter / bolddunkley
    itch.io bolddunkley.itch.io/
    Software used for this video:
    (Content)
    Godot 3.1 godotengine.org/
    OBS obsproject.com/
    Kdenlive kdenlive.org/en/

Komentáře • 120

  • @comradestinger
    @comradestinger Před rokem +569

    Haha, I'm the Technical Artist who implemented this effect in It Takes Two.
    You hit it pretty much spot-on with how I did it! It's actually a little bit spooky how similar your code is to the code in the game xD
    Absolutely fantastic video on the topic, easy to understand and follow without skipping much on the details.
    The "cube" transition was originally not intended to be used. Just me playing around with the effect, but I left the blend parameter exposed and one of the designers hooked it up to activate when you press the button.
    Some minor differences in the shader that might be interesting:
    1. My raymarch shader uses the same mesh as the lava lamp instead of a big box. (saves on overdraw)
    2. The raymarch starts at the surface of the object. (saves on march steps.)
    3. I did not think to use a cone SDF to clip the spheres, you can totally see mine awkwardly clipping the edges from this sometimes. x)
    4. To get lighting on the spheres, it's actually a standard "lit" material, and it returns the SDF's normal, base color, emissive, etc to be lit by the engine. Neat trick too make your SDFs look more real if you have lighting already.

    • @MartinDonald
      @MartinDonald  Před rokem +130

      Oh awesome, it's so cool that this actually reached you. Love your work and thank you so much for the insights

    • @Algardraug
      @Algardraug Před rokem +19

      Holy crap, great work with the game!

    • @dzxtricks
      @dzxtricks Před 11 měsíci +8

      Wow... That's a lot of work for something that a lot of players might have missed... But it was beautiful addition when I was playing, I really like the lava lamps and many other weird quirky details in the game world. I was like "WOW it can change shapes damn"

    • @robert_just_a_byte
      @robert_just_a_byte Před 11 měsíci

      If you have the time and patience to answer my question, please, why would this approach be better than just simulating/animating and caching? Thank you. @MartinDonald learned some tricks from your clip regarding color & clipping.

    • @michaelhyman3d
      @michaelhyman3d Před 11 měsíci +3

      @@robert_just_a_byte It saves memory and is dynamically adjustable in realtime. Cached vextex animations are typically large inflexible files.

  • @tiagosr
    @tiagosr Před rokem +131

    Nice stuff! Another thing that can help with performance is to use the surface of the lamp glass (or a proxy surface with the same shape) as the surface to apply the SDF shader to, instead of an "SDF World" overlay - it will reduce the amount of rays to only the pixels that the surface covers.
    And you can also start the marches from the surface (or slightly behind them) instead of doing that from the camera :)

    • @tiagosr
      @tiagosr Před rokem +45

      Another thing that could be added to the shader, as it is rendering a "solid" object (as much as the wax in a lava lamp can be called solid 😅), the SDF calculation should be able to write to the depth buffer via the DEPTH output, and you can then combine it with the world without needing it to be in the transparent pass. The depth lookup is still helpful for culling out queries ahead of time - if the ray start is already past the depth at that fragment, just drop the fragment at that point.

    • @MartinDonald
      @MartinDonald  Před rokem +33

      @@tiagosr you're a genius! I'll update my implementation with exactly these fixes before I publish the project files, thanks! 🙏

    • @MartinDonald
      @MartinDonald  Před rokem +17

      I want to pin this as well but I can only have one comment pinned and I'm afraid the OG author of the lamp absolutely wins first place (soz Tiago). So I'm leaving another comment of appreciation in the hope that the algorithm figures out that this comment needs to also stay near the top 🙏

    • @tiagosr
      @tiagosr Před rokem +8

      @@MartinDonald Hahah all good! 😄Cheers on having it reach the original TA there!

    • @cookieBadger
      @cookieBadger Před 6 měsíci +2

      @@MartinDonald here's another comment to illustrate to the algorithm that this is important for non-participators of this conversation :)

  • @PuffoPufferfish
    @PuffoPufferfish Před rokem +2

    YOOOOOOO its like 5am but still great to see an upload c:

  • @FathomRaven
    @FathomRaven Před rokem +4

    Was literally just looking at your channel and hoping you'd be back soon, and here you are!

  • @gamurarandrei2657
    @gamurarandrei2657 Před rokem +3

    wait a sec. Did you just post after 3 years? NICE

  • @ELEMENTLHERO
    @ELEMENTLHERO Před rokem +3

    The legend returns!

  • @sinus4784
    @sinus4784 Před rokem +27

    You're back!!
    I hope you make some more, I absolutely love your videos!

  • @pixstatic200
    @pixstatic200 Před rokem +55

    From the clips in your video I'm not sure the lava lamp in It Takes Two is anywhere near as sophisticated as this one. I always love seeing creative applications of ray marching, though. Nice job

  • @nicks4727
    @nicks4727 Před 11 měsíci +2

    He's back!! I'm happy your back making videos!

  • @hterrorarchive2393
    @hterrorarchive2393 Před rokem +3

    I’ve missed your videos!!

  • @polygonalcube
    @polygonalcube Před rokem +12

    Glad to have you back. Your videos are very inspirational for aspiring technical artists!

  • @conradrobinson7941
    @conradrobinson7941 Před rokem +2

    YES YOURE BACK AAAA

  • @MrSefsdf
    @MrSefsdf Před 5 měsíci +1

    One of the most effective explanations of ray marching I've come across on YT.

  • @BrutalStrike2
    @BrutalStrike2 Před rokem +3

    Dude you back🎉

  • @indiemini
    @indiemini Před rokem +3

    some of the best technical art information in the world. thank u!!

  • @BramwellWilliams
    @BramwellWilliams Před rokem +2

    The king has returned! 🥳 fantastic as always ^^

  • @GIRGHGH
    @GIRGHGH Před rokem +2

    Watching raymarching always makes my brain happy

  • @n41sd
    @n41sd Před rokem +1

    oh! Nice news you are back! 😀

  • @nemene8585
    @nemene8585 Před rokem +7

    These videos are insanely entertaining and educational, i hope you continue making them :D

  • @stealcase
    @stealcase Před 11 měsíci +5

    This (as well as your other videos) are incredibly valuable and high quality in content and production value.
    I'm shocked that you're not bigger on youtube, but maybe this is a very niche domain. I want you to keep making stuff and be sustainable, so putting my money where my mouth is and subscribing to your patreon later today.

  • @Ninja1Zombie1Master
    @Ninja1Zombie1Master Před 11 měsíci +1

    Glad you're back!

  • @AnttiVesanen
    @AnttiVesanen Před rokem +2

    Good to see you again, I loved your snow video!

  • @tezza48
    @tezza48 Před rokem +4

    Signed Distance Fields can be generated from signed distance functions, so they are interchangable anyway.

    • @bread8176
      @bread8176 Před 4 měsíci

      Exactly... a signed distance function maps a point in space to a distance value, and a signed distance field maps a point in space to a distance value. I was a bit baffled when they came up as different things

  • @frankerzed973
    @frankerzed973 Před rokem +3

    Love your videos! Glad to see you back ;)

  • @Algardraug
    @Algardraug Před rokem +3

    Incredible making the whole lava from a shader, well done! Took a peek at your channel and your other videos are from 2 years ago. Hoping for some more videos like this in the nearish future, great work!

  • @lewisnorth1188
    @lewisnorth1188 Před rokem

    new martin donald video is the biggest event in the past year

  • @Asdayasman
    @Asdayasman Před rokem +1

    It's definitely good enough for a prop, and a great excuse to talk about ray marching, but I honestly think this is a hammer creating nails situation. You're great at shaders, and ray marching is fun, so anything that can be, must be.
    ... But a physical simulation would do this so much better. In real life, lava lamp wax blobs don't anticipate meeting another blob and smoothly deform into them, they collide, _then_ merge, then surface tension drags them together based on their inertia, and when equalised, the momentum is shed by rippling oscillations of the new sphere.
    When a blob splits, it looks a bit smooth-SDFey until it gets far enough apart from itself, then the connecting strand breaks in interesting ways dictated by surface tension. If the strand is long enough, surface tension can't keep the two halves of it together enough to incorporate it entirely into the two new blobs, and you get a couple little bloblets in the middle. Again, the momentum of the strand shooping back into the parent blob causes oscillations.
    It goes without saying that there also aren't a defined number of blobs in a lava lamp.

  • @XtremeZero
    @XtremeZero Před rokem

    It's been forever, welcome back champ

  • @OldRaspy
    @OldRaspy Před rokem +1

    dude thank u so much! i was recently trying sdf-s but i wasn't able to get them to work properly because i was following unity tutorials.

  • @JackTheFoxOtter
    @JackTheFoxOtter Před rokem +2

    This looks really good! I will have to play with raymarching shaders myself when I find the time for it. Thanks for making this!

  • @amyshaw893
    @amyshaw893 Před 11 měsíci +1

    I did some work on raymarching at uni, and Inigo Quilez really was a godsend. Love that guy so much. He even demonstrated how to make it all work in 4 dimensions, which formed the backbone of the my work. I also added some stuff from soem videos codeparade has done on the subject, and added in things like glowing edges and (almost) phong shading. 10/10 rendering method

  • @realpattywhack
    @realpattywhack Před 11 měsíci +1

    THE LEGEND RETURNS (thank you for your snow video btw, I'm using the approach you described for a game I'm working on atm)

  • @hardtofinduniquename
    @hardtofinduniquename Před 11 měsíci

    Thrilled to see you're making videos again! Or maybe I need to adjust my expectations for how long it takes to put these together while having a life...

  • @sanyi9667
    @sanyi9667 Před rokem

    so good to have you back!

  • @Seventyy
    @Seventyy Před rokem

    Yoooo, you are back! And you are using my favourite engine!

  • @tatapnhob
    @tatapnhob Před rokem +1

    wow, i just browsed this channel yesterday and thought if it's going to be active again any time soon... turned out to be more soon that i'd imagined
    great video! i think the final result is even better than in it takes two

  • @arctodus1
    @arctodus1 Před 11 měsíci

    It's been a while. Great to see

  • @cristinocanga
    @cristinocanga Před rokem +1

    Man, i thought you wouldn't upload again, i've searched everywhere else to see if you had some new content, twitter, linkedin, facebook, etc
    It's good to see you back. If you could make a video talking about this career and some resources that we can use it would be awesome!
    Congrats

  • @mikkelens
    @mikkelens Před 11 měsíci +1

    I missed this video on release because it had been such a while since your last upload, but wow I really hope we see more videos because I've missed these a lot.

  • @S-I-T
    @S-I-T Před rokem +1

    Splendid video Martin. Thank you.

  • @Styrac
    @Styrac Před rokem

    Return of the King 🙌🙌🙏

  • @sapah8945
    @sapah8945 Před rokem

    oh im glad youre uploading again!!

  • @psycl0n3
    @psycl0n3 Před 11 měsíci +1

    insane level of quality on this one - subscribing and love the content

  • @dotvhs
    @dotvhs Před rokem

    Seeing a video from you in my subscriptions made my day. It's a great one as usual, thank you!

  • @andreas.ranman
    @andreas.ranman Před rokem

    Nice breakdown! Can confirm it was raymarching, sent it to collegue who made it

  • @AgnisNeZvers
    @AgnisNeZvers Před rokem +1

    I'm really happy to see new video from you! Master of knowledge dropping.
    My first solution idea was using 3D meshes + depth buffer.

  • @laneknauff2500
    @laneknauff2500 Před rokem

    Love your videos! Im ALWAYS hype when you drop a banger of a video (which is everytime!) :)

  • @wooliii
    @wooliii Před 11 měsíci +2

    great video ! you did a really good job breaking down the steps, as well as expanding on the methodology that is often documented for fx like this.
    The only critique is variable naming. In the shader-programming/shadertoy world, there's this weird code-golf-like tendency to have very very short variable names to describe things. This is fine when you're making demo scenes that need to fit into very small files, but for tutorials/education and documentation it would be very helpful to use actual names for variables instead of abbreviations. For example, defining `ray_origin` and `ray_distance` instead of `ro` and `rd` immediately provides necessary context when reviewing the source code.
    Keep up the good work, I'm really loving the videos you're making and the topics you're covering !

  • @yvanvan3729
    @yvanvan3729 Před rokem +1

    A very great tutorial, very well explained. Thanks for doing it !

  • @mathkrGames
    @mathkrGames Před 11 měsíci

    yay, you're back! :)

  • @BlazertronGames
    @BlazertronGames Před 11 měsíci

    Hope you make more videos! These are amazing.

  • @BeauSeymour
    @BeauSeymour Před rokem

    The king is back! I'd never normally ask another CZcamsr to post more often given how much effort it is, but 2 years is 2 long ^^

  • @mathiasdev8523
    @mathiasdev8523 Před rokem

    You're back ❤

  • @nightfr09
    @nightfr09 Před rokem +1

    Man I was expecting you to say '' ripping the games code'' at :41 lmao
    nice code i've been kinda miffed at some of the lava lamps I've seen in other games (take like Stray for example, they appear frequently but just use a moving gif / texture atlas for the effect) Or in other games where they use a particle engine.
    This looks cleaner and I like the effect better. Thanks for the code :)))))

  • @sigitsatriap6505
    @sigitsatriap6505 Před 9 měsíci

    I know i would love your videos, subscribed

  • @cookieBadger
    @cookieBadger Před 6 měsíci +1

    I'm not entirely sure why I ran into that issue because I never saw it happen in the video, but in case anybody else is struggling to get the depth test to work:
    The calculated distance d depends entirely on the position of the camera, and is unaffected by its rotation. This is however not the case for the depth buffer. When the camera turns, the depth of some objects that are now to the edge of the view has decreased. Now, when comparing the distance of a pixel from the raymarching that is far off to the corners of the camera, it might be greater than the depth of an object closely behind, so it doesn't show. This can be fixed by calculating the depth of the raymarched pixel with this line:
    float z = (PROJECTION_MATRIX * VIEW_MATRIX * vec4(ro + d*rd, 1.0)).z;
    Now take ALPHA = step(z, min(MAX_DIST, linear_depth)) and your problem should be solved!
    I was trying to get the project files to verify if this error happens in the original project as well, but they weren't available yet on Pateron. :(

  • @tozzo6481
    @tozzo6481 Před rokem +1

    NEW VIDEO LESGO

  • @bean_mhm
    @bean_mhm Před rokem

    Awesome video

  • @YoguiTheYoshi
    @YoguiTheYoshi Před 11 měsíci

    Fantastic 💙

  • @Magnogen
    @Magnogen Před rokem +2

    Loved watching this video! Fragment shader coding is a fantastic hobby of mine. Another way to render an SDF is to use Marching Cubes. Could definitely be something you might like, as you can reduce the quality and still get a good result, rather than a low Res version with Ray Marching. You might like having a look at that, given your background in vertex shaders!

  • @HRZN-xj9um
    @HRZN-xj9um Před rokem

    Welcome back

  • @colinbrown7947
    @colinbrown7947 Před rokem +9

    Really great video! It would be really nice to see more descriptive variable names though! Having so many single or 2 character variables makes the code very hard to understand at a glance, which when going through the code quickly like you do for a video makes it easy to get lost in the explanation. Also, glad you're back!

  • @wheat7258
    @wheat7258 Před rokem

    He returns!

  • @magnuspedersen5751
    @magnuspedersen5751 Před 3 měsíci

    This is super cool

  • @OshidaBCF
    @OshidaBCF Před rokem +2

    oh yeeeeeeeee

  • @OLIV3R_YT
    @OLIV3R_YT Před 11 měsíci

    Awesome!

  • @cookieBadger
    @cookieBadger Před 6 měsíci

    thanks for this video, it really saved my a*s for a prototype assignment :)

  • @blacklistnr1
    @blacklistnr1 Před rokem

    The smooth minimum is pretty easy to understand:
    The normal one goes AAAABBBB due to the 'if' switching abruptly between the two.
    To make it smooth, you detect the corner (A and B closer than K) then you go
    AASSSBB, where S is how you want your corner to look like from A+k=B to A=k+B
    If I remember correctly, the one in the video was a parabola, but you can pick a sin or whatever other funky transition you want.

  • @NycroLP
    @NycroLP Před 11 měsíci

    Im really glad you are back. I really mean it. Having said that, i know its unrelated but i wasnt given any help and im really desperate. I have an offtopic question regarding VAT:
    Im using a character mesh which is uses an armature. This will lead to complications once there is bovemovent/rotations . Is there a way to ignore the bone movement while baking the VAT?

  • @CharlesVanNoland
    @CharlesVanNoland Před rokem

    The lava is likely just some signed distance function blobs moving up/down, so that you get a metaballs effect, and they're just raymarching that.

  • @dortuff
    @dortuff Před rokem

    awsome

  • @halimghani
    @halimghani Před 10 měsíci

    Hope you a healthy, wealthy, happy life

  • @JustDezz
    @JustDezz Před rokem +1

    Cool video! I hope, next one won't take another two years 😳

  • @jeyko666
    @jeyko666 Před rokem

    nice, just did water shader using this. Will use it for parallax occluded grass in a pixel art style 3d game!

  • @OfflineOffie
    @OfflineOffie Před rokem +1

    To improve performance, instead of using separate spheres and roundboxes, use just the roundboxes and change the roundness parameter until they become a sphere! This way you avoid marching and having to union 4 extra shapes that might never even be used!

  • @araghon007
    @araghon007 Před rokem +1

    I was looking for a way to use rasterized depth with raymarching for a while back when I was working on my own thing, but it turns out there's an implementation in Godot's documentation of all places?

  • @DogeisCut
    @DogeisCut Před 6 měsíci

    Im trying to implement raymarching as the main thing in my game using Godot, and im running into issues when using Mod to try to loop space, and also, objects appear bugged in various ways when applying other transformations on them

  • @roydash5657
    @roydash5657 Před 11 měsíci

    Unreal engine 5 & Godot 4 really amazing Engine's.

  • @betalars
    @betalars Před rokem +1

    Wow I've just made a lava lamp myself. ^^
    But it's actually based on metaballs, so i think it costs a bit less performance.
    It obviously does not hold up as good as yours up close, but it does not have to. ^^

  • @TiagoTiagoT
    @TiagoTiagoT Před rokem +2

    Isn't the function and the field just two sides of the same thing, the function returns the value at a given coordinate in the field?

    • @MartinDonald
      @MartinDonald  Před rokem

      More or less yes, the difference is when I hear "field" I assume some kind of precalculated result stored in a texture or something like that which is being looked-up, and when I hear "function" I think of an equation that returns the distance to a primitive shape.

  • @seanmeyer6436
    @seanmeyer6436 Před 2 měsíci +1

    I'm new to godot and maybe I missed something but I cannot figure out how the GRADIENT portion works at the end of the video. Is this a separate node I need to create myself and somehow plug into this shader? Thank you for the video, it was fun to follow along

    • @MartinDonald
      @MartinDonald  Před měsícem +1

      Thanks for watching! I'm just using the procedural gradient texture that Godot ships with. You can create one by clicking on an empty texture slot and selecting "New GradientTexture1D".

  • @user-kz4pf2uz1n
    @user-kz4pf2uz1n Před 6 měsíci

    The Art of Code

  • @Nikolajnen
    @Nikolajnen Před 7 měsíci

    Your version actually looks way better in my opinion

  • @shadamethyst1258
    @shadamethyst1258 Před 11 měsíci +1

    I'm confused as to your statement that signed distance fields are different from signed distance functions. Your function is in `R^n -> R`, which is no different from a n-dimensional scalar field. Is there a semantical difference I'm missing there?

    • @MartinDonald
      @MartinDonald  Před 11 měsíci +1

      You're absolutely right. The difference for me is that when I hear "field" I assume some kind of precalculated result, usually stored in a texture, which is being looked-up, and when I hear "function" I think of an equation that returns the distance to a primitive shape. This use may be gamedev or even studio specific.

  • @asyncasync
    @asyncasync Před 9 měsíci

    How in the does this SDF work? If it has to loop over every object in the scene and check the distance to each based in the distance to the center of each and its rotation and what shape it itself is then this is no more efficient than normal collision detection.
    Maybe efficiency is not the point, but accuracy?

  • @jehree9850
    @jehree9850 Před 5 měsíci +1

    Great video.. but man, people who use 1 or 2 digit variable names are a different kind of chaotic haha

  • @michaelhyman3d
    @michaelhyman3d Před 11 měsíci

    I find it funny your mentioned the difference between sdfs and sdfs at the start if you would have released this video 2 years ago if would have saved an argument or two for me haha. Im not a low level guy in any way but could you tell me what this was written with? Its prolly a fairly fast language if your sending out all those rays.

  • @luigidabro
    @luigidabro Před rokem

    Fun Fact: Lava Lamps actually give true randomness, because it is unknown, how and when the Bubbles will appear

  • @angryzor
    @angryzor Před rokem

    Isn’t a signed distance field basically the same as a signed distance function, just in 2D and baked into a texture?

    • @jcm2606
      @jcm2606 Před 11 měsíci

      Yes, though signed distance fields can also be 3D, too.

  • @imaginingPhysics
    @imaginingPhysics Před rokem +1

    If the ray marches back in time as it marches in space (finite speed of light you know) one gets a relativistic raymarcher:
    czcams.com/video/Ix1XlxF66Zk/video.html

  • @philippk7554
    @philippk7554 Před 11 měsíci

    Hey, I would love to play with this code. Is there any chance of you publishing your work?

  • @Antagon666
    @Antagon666 Před 11 měsíci

    Fellow mate which also uses single letter variable names 🤣

  • @RooterDelWifiXs
    @RooterDelWifiXs Před 5 měsíci

    Sir, a function over a space is a field, is the same thing

    • @MartinDonald
      @MartinDonald  Před 5 měsíci +1

      You're not wrong! But if you were saying "function" to refer to a texture sample I'd be confused.

  • @arseniykucherenko4960
    @arseniykucherenko4960 Před 9 měsíci

    It would be fantastic if you could create a video tutorial on how to craft game physics akin to the ones in this Mercury game (czcams.com/video/hFm5iwOGJlg/video.html) using Godot 4.x. 🎮 The physics depicted have a whimsical similarity to the flow of a lava lamp, yet with a heightened level of sophistication. 🌋 Your expertise showcased through a tutorial could be immensely valuable and enlightening. Thank you! 🙏

  • @lemonjumpsofficial
    @lemonjumpsofficial Před 6 měsíci

    well an sdf is and sdf that was saved into an array lol

  • @zxcaaq
    @zxcaaq Před rokem

    I've missed you bby!

  • @asterixus
    @asterixus Před měsícem

    Hi Martin, I really love your videos and they're so insightful ❤️! I'm a beginner tech artist at the very start of my journey and I don't think I've heard about raymarching until now 😅 I guess my question would be: how do you even begin to look for a solution to something like this, if you wouldn't have known about the concept? And if it's supposed to be common knowledge for a TA.. can you recommend any resources on sort of "here's what you should know about this topic" kind of way? (At least to mention the subjects, i guess it's easier to dig then if you know what you're looking for) Or how do you learn new stuff as a TA? It feels like there's so much out there it's confusing to know where to start 🥲