I Made A Blob Shooting Game With Ray Marching

Today we're going to create a blob shooting game with raymarching / sphere tracing 🎃.
I'm going to share my learning journey with you with as much detail as possible.
Final Game Play:
raymarching-engine.netlify.app/
Source Code (have fun):
github.com/visionary-3d/three...
Corrections:
At 07:10 : I said that we're calculating the world position of the intersection point.
But we're not. The cameraToPixel vector is relative to the camera.
So it's not the world position of the intersection point.
BASICALLY Everything in this video:
Clouds:
www.shadertoy.com/view/3l23Rh
Rain Forest:
www.shadertoy.com/view/4ttSWf
Counter Strike 2 Smoke:
• Counter-Strike 2: Resp...
Smooth Min With Colors:
www.shadertoy.com/view/tscBz8
Smooth Min Algo:
iquilezles.org/articles/smin/
Raymarching visualization:
www.shadertoy.com/view/slGfz1
Enhanced Sphere Tracing:
erleuchtet.org/~cupe/permanen...
Unreal Engine Footage:
• Unreal Engine Distance...
Water Footage:
• ASMR Nature Sound [WAT...
• ASMR Nature Sound [WAT...
Support this channel 💖
ETH Wallet:
0x61621F0cE4665789863569C6211af4Ea7e08FC82
Chapters:
00:00 Intro
00:38 Basic Setup
01:09 Sphere Tracing
03:38 Magical Number
04:20 Same Cubes Wrong Images
07:51 The Power Of Ray Marching
08:47 Lets Make It Look Good
10:38 Physics
11:00 Making It Fast
12:40 Final Result
13:03 Outro
--------------------
Visionary 3D:
Follow me:
x.com/visionary_3_d
Discord Community:
/ discord
Shaders Crash Course:
• Three.js Shaders (GLSL...
My Shaders Playlist:
• Shaders
My VsCode Config:
github.com/visionary-3d/vscod...
Three.js Boilerplate:
github.com/visionary-3d/three...
#raymarching
#raytracing
#shaders
#threejs
#3d
#3danimation
#glsl

[@visionary_3_d]

What color is your game engine ? Ok, I know that this isn't even close to being a game engine. But it's a cool hybrid rendering workflow which I'm definitely going to use in the future. Hope you enjoyed. 🙏 Corrections: At 07:10 : I said that we're calculating the world position of the intersection point. But we're not. The cameraToPixel vector is relative to the camera. So it's not the world position of the intersection point.

[@americanhuman1848]

blue (the color of the c++ logo)

[@shaak_s]

short question - why you choose three.js vs babylon.js?

[@visionary_3_d]

@@shaak_s Now I'm choosing my own rendering engine haha 😁 But for your question, there are more three.js tutorials out there than babylon.js. That's all.

[@delphicdescant]

Here are a couple things I especially appreciate about your video: 1. Music choice is interesting, contrasting with the bland upbeat "I'm selling you something" music in a lot of other gamedev and graphics programming videos (especially in the ones where you can tell the author is very full of themselves) 2. You refer to all these existing techniques without subtly (or blatantly) implying that you invented them, contrasting with a lot of other graphics programming videos (especially the ones where you can tell the author is very full of themselves - noticing a theme here). 3. You aren't playing up the fact that you made a rendering engine as somehow being a cosmic miracle of an achievement that proves your own genius, again contrasting with "those" people, who I don't have to describe yet again. So thank you for not being an obnoxious egomaniac. It feels like that's getting rarer and rarer the more I talk to people with custom engine projects. Especially any engine projects relating to unconventional rendering, or voxels, or... well, I'll end up actually naming people if I go on too long.

[@visionary_3_d]

Thank You! I'll keep all of those in mind... I think a little bit of Ego is ok though. Especially when you're building something entirely new. I don't mind it when the product is actually great.

[@DiThi]

7:17 To avoid as many computations as possible you can just provide a vector of one corner from the engine (or two opposite corners if the FoV may not be asymmetric) to the shader, and just do a normalize(mix(corner0,corner1,vec3(coords, 0.0))) (where coords are 0,0 with corner0 and 1,1 with corner1)

[@visionary_3_d]

Gotcha. I'll try that one too thanks.

[@DiThi]

@@visionary_3_d Now that I see this again I realized you can do the vec3 conversion after the mix, saving one multiplication in scalar gpus

[@CharlesVanNoland]

Thanks for making a video to get these demoscene techniques out there to inspire gamedevs. I've been so tired watching indie gamedevs keep making the same stuff for the last 10-15 years, not exploring what's actually possible. Even with raymarching, this is just scratching the surface of what's possible with such a highly parallelized compute resource as a GPU. I predict we'll start seeing some really awesome stuff that could've been done at any point over the last decade, but nobody had the idea for it before. Like a boxy Minecraft voxel world - that likely could've been done 23 years ago, but nobody thought of it back then. Indie devs, especially, should be exploring the unexplored, and pioneering new stuff that nobody has seen in an interactive game before. I feel like VR is also a great new gaming medium that is thoroughly untapped as well. More indies need to get into VR, because it's the future, and it's indies that will build it - not AAA devs.

[@o1497]

The problem with VR is the game engines that indies used, since it’s not an in house engine, is pretty complex and hard to do, and this is without talking about the problems of the engine itself. The engines are not very advanced yet unfortunately

[@Monkeymario.]

cool video! tho the transitions between screens could be better perhaps decrease the delay and also maybe make the corners less rounded also i notice a pattern that artifacts mostly happen at edges image compression creates artifacts at edges spheretracing creates artifacts at edges and i notice artifacts when i look at the (probably lcd) screen at a angle perpendicular to the screen normal :)

[@visionary_3_d]

Thanks! You're right. Thanks for the suggestions. I'll try to fix the ray marching artifacts at some point 😄

[@ThePouetman]

Damn that's quality content, I feel like you always post stuff I'm interested in, good job!

[@visionary_3_d]

Glad you liked it

[@gabrielecocchieri7588]

hey, you're really good at explaining and you are concise, keep it up.

[@randospawn7495]

The magic number was literally the first two non-zero components of the perspective projection matrix which I almost immediately recognized after trying for one year to make a 3d engine on my own.

[@miguelmyers8929]

keep it up cant wait for the next video👍

[@Splarkszter]

This is incredible. What an amazing awesome thing.

[@visionary_3_d]

Thank you. You are awesome 😄

[@SomeRandomPiggo]

Awesome video! I hope the algorithm god blesses your channel

[@visionary_3_d]

Thanks for the kind words 😄 This means a lot to me.

[@suvetar]

Thank you for this; I won't even pretend to claim that I''ve grokked this all on the first attempt, but I'm feeling a lot happier about how this works now and am already starting to build a bit of an intuitive mental model now - Thank you for this, can't wait to learn more!!

[@jeed4119]

are you using adventure time slang in normal conversation

[@suvetar]

@@jeed4119 Nope? Grokked comes from Grok Law, folks did awesome legal research for Google vs Oracle

[@yacinezahidi7206]

Love the content !!! Too bad the music is super stressful

[@Trooperos90]

Thats the most awesome thing i saw for a long time

[@visionary_3_d]

Thank you!

[@thebenezer]

Cool video, my friend! 🤩

[@visionary_3_d]

Thanks For Watchinnnnng ❤

[@mykle2890]

Nice work ! Lately I've heard of another method of achieving similar results as ray marching but faster, If I remeber correctly it's called cone marching or cone tracing, maybe you could gain even more performance with it

[@privatenope]

no way its the cave johnson who invented gels

[@maxsch.2367]

cool stuff!

[@visionary_3_d]

Thanks.

[@Zi7ar21]

0:22 actually maybe 1 or 2, marble marcher being a one-time demo but there has been some since then, there is one where you explore I forgot what it was called

[@gravity_mxk5663]

Wow, this video is like a cold drink of water in a sea of KZbin garbage. Thank you this video was really great!

[@visionary_3_d]

Glad you liked it.🙂

[@gokhancakr661]

you deserve more vievs. good job

[@visionary_3_d]

Thanks. Glad you liked it.

[@clonkex]

This is cool. Comment for the algorithm because a lot of effort went into editing this and the result is great!

[@neut_ro]

Thank you for making this you inspired me to make my own engine! I have been kinda depressed and frustrated lately especially BCS I started to feel not being able to work with the current engine I am working with (Roblox studio) BCS of it's limitations and kind of BCS of the lack of my knowledge but this for sure cheered me up. Also since I am still learning C++ and idk typescript...I will be using python, any tips or suggestions to help me

[@visionary_3_d]

Thanks for watching. My suggestion is to start small... and perhaps try to copy other people's projects on your own. That helped me a lot at the start.

[@jostasizzi818]

Amazing 😊

[@visionary_3_d]

Thanks! Glad you liked it.

[@stephendaedalus7841]

How did you add physics to the virtual objects?

[@visionary_3_d]

Well. You create a separate physics world which the library that I’m using provides. And then each frame you update the position and quaternion of the virtual objects to match their clones in the physics world.

[@paschalasobirionwu1183]

@@visionary_3_dis that by using cannon.js or are you aware of any other web libraries that to the same better ?

[@visionary_3_d]

@@paschalasobirionwu1183 Rapier.js ( written in rust, compiled to wasm )

[@miguelmyers8929]

i wanted to know how you got the correct ray march scene depth to mix with the regular scene so it dosen't look like its drawn on top🧐

[@androwaydie4081]

12:40 it's synced to the music

[@xnasunimc]

12:39 did you sync the shoots with the music, it was cool

[@StellarWeb008]

We would like to learn this in details in a step wise tutorial

[@visionary_3_d]

Hey. Thanks for the kind suggestion. Projects like these take a while to create and also code. There are lots of steps involved and I have to say it's near imposibble to code this step by step from start to finish.... However I'm confident that I've put every piece of code you need ( pretty much ) in the video. You just have to do a lot of pauses and also maybe look at the source code ( which I'll publish tomorrow ).

[@theman7050]

Do you believe some webgl raymarching stuff is ok for web development? I mean performance wise.

[@visionary_3_d]

Depends on what you’re doing. In some cases if you optimise correctly it might make sense … Cloud rendering is an option for instance.

[@paradox8425]

I'm confused. Do you use Unreal Engine or not?

[@visionary_3_d]

Nope. I’m using three.js which is using webgl.

[@EndroEndro]

nice 2fps animation on that page. but looks good

[@visionary_3_d]

haha. thanks. depends on your hardware tho! runs at 160fps for me. ( rtx 4070 ti )

[@profhua3341]

There is a game called "Claybook".

[@visionary_3_d]

Yeah It’s pretty cool.

[@vk8a8]

3 jav scipt

[@Jake-kb2le]

I would rather call it raymarching renderer rather than engine. Engine has bunch of other shit as well.

[@visionary_3_d]

Yeah you're right ! It's not even close to being an engine 😆