I Made A Blob Shooting Game With Ray Marching

Рет қаралды 38,058

Жыл бұрын

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

Пікірлер: 66

@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 10 ай бұрын

blue (the color of the c++ logo)

@shaak_s 5 ай бұрын

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 7 ай бұрын

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 7 ай бұрын

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 10 ай бұрын

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 10 ай бұрын

Gotcha. I'll try that one too thanks.

@DiThi 10 ай бұрын

@@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

@ThePouetman 6 ай бұрын

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

@visionary_3_d 6 ай бұрын

Glad you liked it

@gabrielecocchieri7588 5 ай бұрын

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

@CharlesVanNoland 8 ай бұрын

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 6 ай бұрын

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 😄

@Splarkszter 10 ай бұрын

This is incredible. What an amazing awesome thing.

@visionary_3_d 10 ай бұрын

Thank you. You are awesome 😄

@miguelmyers8929 11 ай бұрын

keep it up cant wait for the next video👍

@SomeRandomPiggo 10 ай бұрын

Awesome video! I hope the algorithm god blesses your channel

@visionary_3_d 10 ай бұрын

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

@suvetar 6 ай бұрын

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 6 ай бұрын

are you using adventure time slang in normal conversation

@suvetar 5 ай бұрын

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

@Trooperos90 5 ай бұрын

Thats the most awesome thing i saw for a long time

@visionary_3_d 5 ай бұрын

Thank you!

@yacinezahidi7206 2 ай бұрын

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

@thebenezer 11 ай бұрын

Cool video, my friend! 🤩

@visionary_3_d 11 ай бұрын

Thanks For Watchinnnnng ❤

@randospawn7495 5 ай бұрын

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.

@mykle2890 6 ай бұрын

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

@gokhancakr661 10 ай бұрын

you deserve more vievs. good job

@visionary_3_d 10 ай бұрын

Thanks. Glad you liked it.

@neut_ro 6 ай бұрын

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 6 ай бұрын

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.

@maxsch.2367 9 ай бұрын

cool stuff!

@visionary_3_d 9 ай бұрын

Thanks.

@gravity_mxk5663 5 ай бұрын

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

@visionary_3_d 5 ай бұрын

Glad you liked it.🙂

@privatenope 5 ай бұрын

no way its the cave johnson who invented gels

@jostasizzi818 Жыл бұрын

Amazing 😊

@visionary_3_d Жыл бұрын

Thanks! Glad you liked it.

@stephendaedalus7841 10 ай бұрын

How did you add physics to the virtual objects?

@visionary_3_d 10 ай бұрын

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 10 ай бұрын

@@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 10 ай бұрын

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

@clonkex 10 ай бұрын

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

@Zi7ar21 6 ай бұрын

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

@androwaydie4081 6 ай бұрын

12:40 it's synced to the music

@miguelmyers8929 3 ай бұрын

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🧐

@xnasunimc 6 ай бұрын

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

@StellarWeb008 11 ай бұрын

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

@visionary_3_d 11 ай бұрын

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 ).