Calculating Ray-Sphere Intersections

[@anthonything]

I have re-watched the intro so many times now because its the funniest thing i've ever heard.

[@lb5928]

For all those who where confused on this, he was able to use the equation of a circle to find X because he sliced the sphere in half, through t1, t2 and the center point of the sphere. The circle that touches t1, t2 and the center of the sphere is the circle he used to find the distance X.

[@crs1py751]

It's the 5th or so time I've come to this video inbetween spans of weeks and months. Every time it makes a bit more sense and i get a bit more excited about its potential. Thanks again and lol the intro.

[@TheArtofCodeIsCool]

This is actually a line-sphere intersection since dot(s-ro,rd) can also be negative. This means it will also intersect with things behind the camera. If you don't want that, you have to make sure your t value can not get negative (max0, dot(..))

[@milanstevic8424]

surely you meant line-sphere intersection :)

[@TheArtofCodeIsCool]

@@milanstevic8424 Oww wow... duhh! Thanks for pointing that out! I changed it 🤠

[@milanstevic8424]

@@TheArtofCodeIsCool you know ray-sphere is such a good practice to get into linear algebra and 3d geometry in general. I still remember solving this one on my own, because it's ultimately very easy and logical, but still feels like an accomplishment in the end. I too went from the line-sphere, as it's the most obvious thing to solve, and then you try to to update it to work with a ray as well. when I got to the point of ray marching, it was so much easier to understand the "words" of it. I'm in unity c# btw, but I follow yours and Inigo's channels very closely. good work!

[@TheArtofCodeIsCool]

@@milanstevic8424 yeah it's a fun exercise to try to figure out yourself. Plus sphere intersections come in very handy. Thanks for watching!

[@antoinedevldn]

The most elegant and beautiful explanation I ever felt on!

[@MRconfusedboy]

i need to understand how to calculate ray intersection with a sphere right now, and others after me will find themselves somehow in need to learn this as well, some of us might even question the life choices that led them here.

[@natai777]

hi this vidoe is great and help me a lot but it has 1 bug - in the if(y

[@TheArtofCodeIsCool]

Hmm I don't think so. Are you sure you have the same code as me?

[@DavidsKanal]

Awesomely clear and also simple solution.

[@TheArtofCodeIsCool]

Thanks!

[@GmZorZ]

coming back to this questioning why i have never seen this approach explained anywhere else. I wouldn’t assume it impacts performance that much, it seems better than calculating quadratics.

[@ghostbusterz]

Feeling very confused. If the ray grazes the sphere, the intersection points (or distance along ray t1, t2) will be less than radius distance from the sphere center projected onto (dot product) the ray?

[@ZChen-p4o]

Thank you so much for saving me. You are a hero!

[@konstantinrebrov675]

How do you draw in OneNote so flawlessly? I have tried drawing lines and circles, but only I get irregular figures. I am now using only the pre-made shapes.

[@petrosgiannopoulos112]

Awesome video, and very useful! I was wondering if you can make a video about ray-cone intersection, finding also the exit point (at t2).

[@TheArtofCodeIsCool]

Hmm Ray-Cone... Gotta find out about that! As for finding the exit point. Its just: vec2 exitPoint = ro+rd*t2

[@ur_khaan]

can you show idea of ray tracing if the sphere was half coated with some thickness on one side??. it would help alot thanks

[@jyotikashyap2202]

*Hi, Great videos . Can u share information, how can shader parameters be changed , using c# unity scripts to create dynamic shaders with realtime streaming data. For example realtime 2D graphs*

[@TheArtofCodeIsCool]

Check out the unity shader coding for noobs video. That might help. If not, I should really do a part 2 for that one.

[@deepcanionstudio]

this was so useful thank you so much

[@peacefulexistence_]

Hello, i recoded your glsl code in java, but my sphere is so small its invisible. how can i fix it?

[@TheArtofCodeIsCool]

hmm, how do you know the sphere is too small? If you are not seeing anything, it could be some other error.

[@peacefulexistence_]

@@TheArtofCodeIsCool because when i set rd.z(before normalization) to be bigger then 1, it appears on screen. only one pixel wide. when i set the radius to be 0.01 smaller than s.z, the sphere is there(half your size), but completly unshaded. when i set the radius to be bigger than s.z, the sphere is filling the whole screen. BUT, when i set rd.z to resolution of the screen, i have the same result as you. because java doesnt have normalization method, i coded it like so: length = Math.sqrt((x * x) + (y * y) + (z*z)); x /= lenght; y /= lenght; z /= lenght; i also coded the dot function as so: return a.x * b.x + a.y * b.y + a.z * b.z; the length function is coded like so: return Math.sqrt((a.x * a.x) + (a.y * a.y) + (a.z * a.z)); do you have an idea what is wrong?

[@TheArtofCodeIsCool]

@@peacefulexistence_ Its hard to figure that out like this. Can you post your (entire) code somewhere?

[@peacefulexistence_]

@@TheArtofCodeIsCool alright, i am gonna upload it to github.

[@peacefulexistence_]

@@TheArtofCodeIsCool here it is. github.com/matyklugDebbuged/SphereTracer

[@crs1py751]

Very helpful for a shader and math noob. Thank u!

[@MarkSerena]

Fantastic video and explanation. What was the example video you point to at the end, there is no link to it?

[@TheArtofCodeIsCool]

Thanks! I made this video before making any video that actually makes use of this. I still have to hook that up. Don't tell anyone ;)

[@MarkSerena]

The Art of Code I won't say anything as long as you keep your channel going. Such great content! Planning on doing any distance field or raymarching?

[@GottZ]

honestly you should do all the things.. patreon, the new youtube subscription stuff, …

[@syntaxed2]

How do I pause this thing, I need to take a poop?

[@andrzejbozek]

that is awesome tutorial Martijn! Just as any other of yours :3 But i have a little bit of a problem with my sphere. The thing is, when i rotate my camera around 180deg i can see exact same sphere, but flipped; also if i do not rotate camera but move it forward towards the first sphere, the flipped one also comes closer to the camera from behind - we can't see it yet just till the camera origin reaches surface of the first sphere - and if we continue to move camera futrher, the flipped one becomes visible and starts to go further away from us, but going front - in the same direction as camera (related to world), but twice the speed... Idk if do you know what i mean, but it is kind of hard to describe, but do you have any idea or suggestion what might be causing this behaviour?

[@TheArtofCodeIsCool]

This is actually line-sphere intersection, instead of ray-sphere, because I forgot to discard solutions with a negative t value. If you find a solution with a negative t value, that actually means the sphere is behind you.

[@MichaelJendryke]

This is very helpful! One question: Now that I have t1, what is the vector from the origin of the sphere (0,0,0) to t1? I need to calculate the point on the sphere in polar coordinates rho and phi.

[@TheArtofCodeIsCool]

It would be p=ro+rd*t1 - spherePos (which you can omit when your sphere is at the origin)

[@izuix5629]

I followed along and got the end result (yay!) but then when I tried offset the sphere it got all weird: www.shadertoy.com/view/WsfBRS any advice on how to fix it?

[@balorprice]

Hiya Izuix, I had a fiddle. Couple of things you may not have intended: Line 14, normalize() the raydirection so all rays are the same delta length Line 33, remap01() function mized up the order of the variables That still might not account for all of the weirdness!

[@izuix5629]

@@balorprice thanks! (I can't believe I missed that 🤦‍♂️) it works now!

[@nietaki]

I'm probably getting something very wrong here, but isn't the result of `dot(v1, v2)` a scalar? How should interpret `t` as a point in that case?

[@TheArtofCodeIsCool]

Yes it is scalar. It tells you how many steps of length Rd to take before crossing the surface

[@nietaki]

The Art of Code all makes sense now, thank you!

[@hampusekedahl7309]

what happends if the ray start from inside the sphare and only intersekts one point?

[@TheArtofCodeIsCool]

You would get one t value that is negative.

[@jensmeier8452]

Nice Tutorial, but why is t = dot(s - Ro, Rd)? Is there an explanation?

[@TheArtofCodeIsCool]

It's the projection of the eye ray onto the ray from the eye to the center of the sphere which we use to get the point on the eye ray that is the closest to the center of the sphere.

[@nateshrager512]

Love your videos. Have you ever tried OpenFrameworks?

[@TheArtofCodeIsCool]

Thanks! No I haven't, looks interesting though!

[@petrij7660]

Cool tutorial. Thanks for posting. I really learned a lot about vectors and how to manipulate them. By the way there was some issues with shading of the sphere when translating it away from the center of the screen. I managed to fix it like this: ... vec3 t1p = ro + rd * t1; vec3 sphereToOrigin = normalize(ro - s); vec3 normal = normalize(t1p - s); col = vec3(dot(normal, sphereToOrigin));

[@TheArtofCodeIsCool]

Thanks! Yeah the shading was hard coded to the sphere position. But great to see you figured out how to fix it.

[@prietjepruck]

Great explanation!

[@AinurEru]

Dude, @2:00 you're using the same simbol 't' once to mean a scalar and second to mean a point... Very confusing...

[@TheArtofCodeIsCool]

Not really, t is a scalar. p = ro+rd*t t = dot(s-ro,rd)

[@stayroh]

very good tutorial

[@henrmota]

Just for curiosity do you program outside shaders? Web, server side?

[@TheArtofCodeIsCool]

yeah, mostly unity stuff in C# and a bunch of web stuff, mostly pure javascript.

[@henrmota]

@@TheArtofCodeIsCool just asked because linear interpolation is useful in any kind of development and most programmers don't know about it. Using lerp and ilerp leads you to remap, avoiding messy math to convert between ranges. Plus working between 0 and 1 gives you a lot of power.

[@TheArtofCodeIsCool]

@@henrmota Programmers should really know these basic remapping functions :)

[@catafest]

good tutorial , you need to make one about z axis into shaders world of 3D math .

[@TheArtofCodeIsCool]

Thanks! For simple 3d, check out my "Simplest 3d" video.

[@lksxxtodin5292]

Thank you for the video!!!

[@123Mrchoy]

How did you get t = dot(s-ro,rd) .. shouldn't it be t = dot(s-ro,rd) / dot(rd,rd) ???

[@IGOH4nI]

It's just length of projection. rd is normalized so dot(s-ro,rd) = |s-ro| * cos which is equal to length of projection s-ro into rd

[@IGOH4nI]

btw, dot(rd,rd) will be equal squared length of rd which is 1 so your formula will provide the same.

[@123Mrchoy]

got it thanks!

[@rtcwkillz]

What is dot product and normalize, for what are you using that?.

[@TheArtofCodeIsCool]

The dot product is a way to combine two vectors. dot(a, b) = a.x*b.x + a.y*b.y this also works in 3d and higher dimensions it gives you a number that is a measure of how similar vectors a and b are. A negative result means that they are pointing in opposing directions (away from each other). A positive number means they point in a similar direction, and zero means they are perpendicular. The dot product is very useful for many different things in computer graphics. The normalize function scales a vector so that its length is 1 while keeping its direction the same. I suggest starting at my 'ShaderToy for absolute beginners' tutorial and going through all the tutorials that follow from that one.

[@IsaiahSugar]

thank you

[@陳己見]

Very helpful!

[@galbalandroid]

how come that the dot product gives us the point t? dot product gives us back a scalar

[@TheArtofCodeIsCool]

t is indeed a scalar. It lets us know, on a scale from 0 to 1, where we are between the two endpoints.

[@galbalandroid]

​@@TheArtofCodeIsCool by the two endpoints, you mean t1 and t2 or .. ? sorry, but I couldn't really find any explanation to this online, I found some explanations with the formula (X-C)^2 = R^2 and then we can replace X with the equation of a line going through a point P (and then when expanding the equation you actually see that dot product there) , but not really the intuitive explanation for why we're doing this dot product... The rest of the video actually made a lot of sense and helped me understanding this, but just this one part with the dot product ;( Thanks again!

[@LOLSpellsingerXD]

@@galbalandroid Not sure if you're still looking for an explanation, but try to perhaps draw or think about the following to help you understand. The key part here is understanding that the scalar of a dot product is the value needed to project one vector onto another, which is exactly what you are looking for in this problem. Draw a unit circle. Now, just draw a few unit vectors (so vectors that "end" on the circle). Take the dot product with the vector (1,0). In other words, the vector pointing along the x-axis. As the y component is 0 ,the dot product will simply return the x component of whatever point on the circle you picked You should realize that this scalar is exactly the projecting of the unit vector onto the x-axis. Multiplying the vector (1,0) by this scalar returns the projection This should be obvious, as we are essentially just returning the x component of the unit vector, which is exactly the projection onto the x-axis. Also, this works for things outside the unit circle as well of course, the scalar doesn't have to be between 0 and 1. It simply is if we normalize all vectors. Importantly, this interpretation works in general. The scalar of the dot product is what you need to know the projection of one vector onto another. If you aren't sure why that should follow, i suggest learning about basis vectors and linear transformations. It'll give you the foundations to understand this. For a handwave-y intuitive explanation for why, consider that you could rotate the vectors so that one lands on the x-axis, get the projection, then rotate back. The rotations cancel out, so they were never needed in the first place. Learning about what i mentioned above helps more, but perhaps this might help satisfy. Now, lets consider the original problem: Rd,S and t can all be seen as vectors from the same origin, so it follows that t is the projection of S onto the vector Rd. Because a projection is all this is, the dot product between S and Rd will give us the scalar we need to scale Rd to find t. Hope this helps :)

[@playbyan1453]

So this is basically ray tracer right?

[@TheArtofCodeIsCool]

Yes

[@playbyan1453]

@@TheArtofCodeIsCool I hope you make tutorial about it on future sir.

[@jasonchen625]

thank you ~~~~ I very like your method and accurately explain, hope you can describe how a ray cube intersection, thanks a lot

[@TheArtofCodeIsCool]

Ray-Plane and Ray-Cube are on the list!

[@catboy9377]

Thanks! very helpful!

[@Neon-Geco]

legend

[@davidm.johnston8994]

Thanks!

[@chiefuart3832]

Nice

[@Hunar1997]

THANK YOUUUU

[@TheArtofCodeIsCool]

You are welcome!

[@Hunar1997]

Since you are here 😁 i instantly subscribed because your method (deriving things simply and showing it in shaders) is very good i love it, i hope you do more ray (other shapes) intersection 😇 very useful for someone learning raytracing 😁, you dont have alot of subscribers but your video came first when searched for (ray sphere intersection)

[@TheArtofCodeIsCool]

I'll get to other shapes soon, I promise :)

[@Hunar1997]

Awesooooooome 😊

[@xamogxusx]

Did you casually drink beer whilst making a tutorial? :Д

[@TheArtofCodeIsCool]

Ha! No, that was tea.... in a beer glass ;)

[@visualeugen2838]

“Like” first before watching XD

[@ne4to777]

remap01? Why so difficult? Just write raytrace instead all off yor code.

[@rt1097]

too hard,I don't understand at all

[@TheArtofCodeIsCool]

Aww too bad :/

[@rt1097]

@@TheArtofCodeIsCool but now I find s.z is not sphere's radius when I watch the vedio again and again(T _ T),it should be sqrt 5

[@rt1097]

oh no,not radius,is sphere's surface to ro's length

[@rt1097]

oh no,is sphere's surface to ro's max length,so hard say T_T

[@zenithparsec]

Not your best. Don't do it like this again. Show it as you teach it. much better and easier to understand than trying to draw everything first then doing it again. Also you kept scrolling stuff of the screen and expecting us to remember it. Who remembered that "p = ro + rd*t" when you used it in the 'length(S-p)' ? Given the target audience, fail.

[@MichaelJendryke]

This is very helpful! One question: Now that I have t1, what is the vector from the origin of the sphere (0,0,0) to t1? I need to calculate the point on the sphere in polar coordinates rho and phi.

[@TheArtofCodeIsCool]

Off the top of my head, so I might be wrong ;) First you get the corresponding 3d position: vec3 p1 = ro+rd*t1 - coordinateOrigin; // if origin is at 0, you don't need to do this Then your coordinates should be: vec2 st = vec2(atan(p1.x, p1.z), acos(p1.y/radius)); I hope that helps!