Тёмный

3D in TypeScript using Ray Casting 

Подписаться
Просмотров 35 тыс.
% 1 065

Offline Session
More Episodes: ru-vid.com/group/PLpM-Dvs8t0VZ08cYW6yqNTWLKqLssw0nm
References:
- Lode's Computer Graphics Tutorial - Raycasting - lodev.org/cgtutor/raycasting.html
- Tsoding - Raycasting in Typescript - github.com/tsoding/raycasting
- The Emacs extension I use - github.com/ananthakumaran/tide
Support:
- BTC: bc1qj820dmeazpeq5pjn89mlh9lhws7ghs9v34x9v9
- Pay for my VPS: zap-hosting.com/en/shop/donation/2038e94867b5e65cab2e72abf8ad956c/

Наука

Опубликовано:

 

19 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 131   
@atxorsatti
@atxorsatti Месяц назад
Can your C do that?
@SolathPrime
@SolathPrime Месяц назад
YES
@tafadzwamuzira1697
@tafadzwamuzira1697 Месяц назад
Yes actually implemented it myself
@UnrealCatDev
@UnrealCatDev Месяц назад
Paper was in C...
@atxorsatti
@atxorsatti Месяц назад
It's true what they say about c programmers I guess, they really can't C a joke
@UnrealCatDev
@UnrealCatDev Месяц назад
@@atxorsatti or you can't make a joke ;3
@omnicoinv2
@omnicoinv2 Месяц назад
2:28:30 0.5 (the common factor) is being “factored out” with the distributive property of multiplication
@houssembousmaha3615
@houssembousmaha3615 Месяц назад
Watching mista azozin in a 13 hour bus trip
@Pyronimous
@Pyronimous Месяц назад
It's just 3 hours tho, better watch it at 0.25x to extend it for the whole trip
@astrixx
@astrixx Месяц назад
nah 1.75x and watch it 7 times
@hedlund
@hedlund Месяц назад
Did you survive?
@ValentinoFilipetto
@ValentinoFilipetto 20 дней назад
To achieve the speed of thought of this man is my dream
@dfl0-
@dfl0- 29 дней назад
Also not too sure if someone mentioned this already, I believe the problem you were having when trying to calculate the stripHeight was that you were assigning t = canvasHeight/perpWalldistance, and then multiplying that by the canvasHeight to get the stripHeight. However, you in fact calculated the stripHeight needed when calculating t, which looking at the values that are divided, is describing the direct proportion of the screen height to the perpendicular distance to the wall; aka. the larger the distance from the wall, the larger the value dividing the screen height so the smaller the strip. I very much like the solution you came up with as well with the dot products. I didn’t even think of that at first, but it is very elegant!
@user-bw2vq9lp2v
@user-bw2vq9lp2v Месяц назад
You're the one responsible for making me enjoy programming and math, thank you so much
@rubyciide5542
@rubyciide5542 29 дней назад
Oh really, he made me rethink my life's decision of being a programmer 💀
@loic.bertrand
@loic.bertrand Месяц назад
29:02 You can also define an iterator on Vector2, so you can spread the object directly : class Vector2 { constructor(x, y) { this.x = x; this.y = y; } *[Symbol.iterator]() { yield this.x; yield this.y; } } const p1 = new Vector2(5, 9); doSomething(...p1);
@loic.bertrand
@loic.bertrand 28 дней назад
Oops, I think there is no way to type this correctly in Typescript (to indicate the number of elements returned by a generator) :/
@SolathPrime
@SolathPrime Месяц назад
A mista azozin doing raytracing on an old soviet refrigerator next
@11WicToR11
@11WicToR11 Месяц назад
2:47:30 ....that null check with assignment, this exact thing will be fixed in next version of typescript that already has RC. We had to wait for this just 10 years, so if you have some other issues wait for twenty-forties xD
@rubyciide5542
@rubyciide5542 Месяц назад
Zozin OS wen?
@JohnWasinger
@JohnWasinger Месяц назад
Love your topic choices! Next up ray casting in the TI-84 calculator basic language. I actually wrote a hidden line horizontal 3D plot program for that calculator. 3D plotting was natively supported in the later TI calculator models.
@kamilogorek
@kamilogorek Месяц назад
That was impressive AF, not gonna lie. Well done!
@wagsman9999
@wagsman9999 Месяц назад
The coding speed is uncanny. It would have taken me a month to figure this out. Lol. Cool stuff.
@TsodingDaily
@TsodingDaily Месяц назад
I actually already explored some of the implementation space of this problem on Twitch live up until the introduction of the snap() function. So it may look pretty fast at first because I roughly knew what I needed to implement, but later as I entered a more unfamiliar space (and also got noticeably tired) I started to slow down.
@wagsman9999
@wagsman9999 Месяц назад
@@TsodingDaily Still, very impressive!
@levvayner4509
@levvayner4509 Месяц назад
Ray casting almost got me to give up on programming. It was one of the first books I acquired when first starting to learn C. I was like 14 and the book "Tricks of the Game Programming Gurus" was a really well written book aimed at someone with a few years of C development. I tackled ray casting much later in life, and it was still pretty hard.
@Simon-kw6rq
@Simon-kw6rq 14 дней назад
incredible video once again
@DivineDarknesss
@DivineDarknesss 29 дней назад
thanks for the honesty toward the end of the video
@kirillvoloshin2065
@kirillvoloshin2065 Месяц назад
Легенда! я как раз недавно считал дельты и арктангенсы для канваса)
@bigmiraclewhips
@bigmiraclewhips 28 дней назад
another banger video
@101abuse
@101abuse Месяц назад
Finally! Another video 😄 You are my favourite coding channel, i always love to watch your videos they are my only content i watch here on RU-vid alongside with shorts haha ❤
@movization
@movization Месяц назад
Wow, a perfect bedtime story just in time!
@meanmole3212
@meanmole3212 25 дней назад
That is a long ass bedtime story.
@bhaveshverma8629
@bhaveshverma8629 Месяц назад
Very very impressive 🎉
@norm6096
@norm6096 29 дней назад
I will try to implement the same with tweaks, thank you, for inspiration and awesome video good sir. :)
@michabay2066
@michabay2066 Месяц назад
(2:28:25) The opposite operation of distributing is called factoring.
@snatvb
@snatvb 19 дней назад
1:02:00, you know x,y and you can calculate this cell with col/row when you know cell size, when you know cell - you can get cell bounds, in fact, you can use an algorithm similar to line drawing here
@Stroopwafe1
@Stroopwafe1 Месяц назад
I definitely learned something from this stream. I always thought you needed matrix math to map 2D and 3D
@TsodingDaily
@TsodingDaily Месяц назад
I personally view matrices as just a compact way of encoding operations that you could've performed without them.
@itsmeagain1415
@itsmeagain1415 Месяц назад
@@TsodingDaily brother, math from a computer science pov is just a collection of methods for encoding operations and arithmetic computations in unified frameworks like linear algebra or calculus or whatever field of math
@niceguy2097
@niceguy2097 Месяц назад
just loved it
@royalzsoftware
@royalzsoftware Месяц назад
Great video ❤ Next up ray casting in terminal with escape codes?😂
@dfl0-
@dfl0- Месяц назад
Perhaps you were talking about the extension Tide for emacs rather than Tidy?
@TsodingDaily
@TsodingDaily 29 дней назад
omg yes! Thank you so much! I'll add it to the description...
@meanmole3212
@meanmole3212 28 дней назад
TS + Canvas is actually pretty cool platform for old-school graphics programming. It is like a modern version of QBASIC where you can prototype graphics before doing implementations with more involved languages and environments.
@henrikholst7490
@henrikholst7490 23 дня назад
You can use the implicit form ax + by + c = 0. (a,b) is a normal to the line. Finding an intersection beteen two lines becomes easy as solving a 2x2 system. No special case for k=0.
@abhishekXpanda
@abhishekXpanda Месяц назад
TYPESCRIPT LETS GO!!
@desertfish74
@desertfish74 Месяц назад
Classic fish eye effect rears its ugly head again. It took me a long while to find the cosine solution for it in my raycaster code as well.
@justfly1984
@justfly1984 Месяц назад
That was interesting!
@domprivat3955
@domprivat3955 29 дней назад
Great Vid!
@tamantaman
@tamantaman 29 дней назад
I can't stop come back to watch it again and again it's extraordinary with such a shitty language. It's really is a question of passion for programming. Hat's off sir /o.
@gmjammin4367
@gmjammin4367 Месяц назад
the DDA algorithm! Its a classic.
@mattshu
@mattshu Месяц назад
I like the new thumbnail ;)
@user-ej8um9yg1r
@user-ej8um9yg1r 29 дней назад
I’ve only been watching you for 1 month, but I’m increasingly interested in what Linux distribution will you use?
@rnoba1
@rnoba1 21 день назад
i had a hard time keeping up with the math :(. does anyone have any resources for me to study?
@postmodernist1848
@postmodernist1848 10 дней назад
1:14:35 why not just check if it's exactly equal to ceil/floor and if so, add 1. This way you can avoid the imprecision introduced by eps (what if p2 + eps is in entirely different cell)
@hamiltonianpathondodecahed5236
@hamiltonianpathondodecahed5236 Месяц назад
Are we not alive today ?
@TsodingDaily
@TsodingDaily Месяц назад
No
@cobbcoding
@cobbcoding Месяц назад
@@TsodingDaily rip zozin
@RandomGeometryDashStuff
@RandomGeometryDashStuff Месяц назад
01:14:30 will if(Number.isInteger(x))return x+Math.sign(dx); work?
@danielcarloschavesboll5156
@danielcarloschavesboll5156 Месяц назад
Zozin time!
@acquite
@acquite Месяц назад
2:28:42 its called "factorisation" where you pull out a "factor" out of the expression
@RunningRay9
@RunningRay9 Месяц назад
i would say "factoring out" is more apt
@hubstrangers3450
@hubstrangers3450 26 дней назад
Thank you...
@josbexerra8115
@josbexerra8115 22 дня назад
Excelente....se nota que eres un gran progamador
@lengors7327
@lengors7327 20 дней назад
Any reason to define epsilon instead of using the builtin (into Number) one?
@luandkg
@luandkg Месяц назад
ZozinTime ✅
@catmium7974
@catmium7974 Месяц назад
Cool
@halfsourlizard9319
@halfsourlizard9319 22 дня назад
2:29:00 ish, ahhhh, yes, the perspective-warping problem! The best part of ray-casting wats ... Literally everyone who's done this from-scratch has facepalmed through this exact situation.
@halfsourlizard9319
@halfsourlizard9319 22 дня назад
Interesting that you solved it with linear algebra (dot product) rather than trig (cos) ... Obv, your way is cheaper to compute!
@RenderDragon
@RenderDragon Месяц назад
May I ask, what happened, why these two streams got removed on twitch? Something was leaked or so?
@TheMelopeus
@TheMelopeus Месяц назад
They weren't very good quality so Zozin considered it's better to remove them in order to keep the quality of the vods high
@RenderDragon
@RenderDragon Месяц назад
​@@TheMelopeusHuh, okay
@kotofyt
@kotofyt Месяц назад
The coolest thing is my app crashes when I have more than 10 instances in tlas in vulkan
@Mozartenhimer
@Mozartenhimer 29 дней назад
Didn't these things used to be implemented with interger steps?
@ratherbyexploring4898
@ratherbyexploring4898 Месяц назад
Mista azozin you gotta try Julia as a dynamic language. it's soo nice
@remrevo3944
@remrevo3944 21 день назад
I think the playlist is out of order. This should be the first entry, but is the second!
@TsodingDaily
@TsodingDaily 21 день назад
Thank you! Should be fixed.
@remrevo3944
@remrevo3944 21 день назад
@@TsodingDaily Thanks!
@Gers217
@Gers217 21 день назад
I didn't know that duckduckgo had access to AI models
@053radadiyanikunj4
@053radadiyanikunj4 Месяц назад
Which text editor is it?
@Stroopwafe1
@Stroopwafe1 Месяц назад
Emacs
@justbill9293
@justbill9293 Месяц назад
Im in history
@Marhaenism1930
@Marhaenism1930 Месяц назад
let me in ...
@manucaouette
@manucaouette Месяц назад
2:09:41 voidf is coming 👀
@rogo7330
@rogo7330 Месяц назад
"Pure C" sounds dumb. I propose C will be called "C" and C++ will be called "HereC".
@Kitulous
@Kitulous Месяц назад
as opposed to HolyC I presume?
@SolathPrime
@SolathPrime Месяц назад
I said that before and I'm not afraid to say it again "C is divine anything else is blasphemy"
@skilz8098
@skilz8098 Месяц назад
@@SolathPrime Assembly: Hold my instructions can't you C I'm managing the stack!
@skilz8098
@skilz8098 29 дней назад
@@SolathPrime Assembly: But I hold the keys to all of the pointers.
@skilz8098
@skilz8098 29 дней назад
@@SolathPrime Assembly: When you pop from my stack frame through the kernel, Korn starts playing. "Life Is Peachy".
@enjoyit4273
@enjoyit4273 Месяц назад
next video : porting doom to html canvas
@11WicToR11
@11WicToR11 Месяц назад
isnt it amazing to have and actual editor that helps you? i mean, i use neovim i dont wanna sht on your emacs, its just that i dont understand why wouldnt you use lsp ...you are apparently liking it as well. So why not on other languages? I understand that compiler does the same thing, but i think its much harder to fix things you wrote minutes ago when editor can tell you instantly as you finished that line or even lets you jump through issues in a buffer
@TsodingDaily
@TsodingDaily Месяц назад
The only reason you are asking about lsp is because you are literally incapable of understand the rest of the video. Ponder upon this fact and consider doing something about it.
@11WicToR11
@11WicToR11 Месяц назад
@@TsodingDaily ye, why wouldnt you insult me for asking question (even with a silly typo like that), and i am still watching ...i would forget to ask if i waited to the end of the video. Very low blow, sad to see you are like that
@TsodingDaily
@TsodingDaily Месяц назад
Sorry... It's just I spent a lot of time and effort trying to bring interesting and meaningful sessions only end up receiving lots of surface level questions about frameworks, editors and fonts which do not matter. A single question like that is ok, but over time this is a death by thousand cuts and I can't stand it anymore.
@11WicToR11
@11WicToR11 Месяц назад
@@TsodingDaily taken, if you dont like answering some category of questions, then ...dont? I mean you are not obligated to do so. Its just that you approach to coding is very different from most of the tech youtubers and reason why you doing so is in some sense even more interesting than raycasting (for me), which I ve already seen ton of. But i understand how this instantly leads to whole "ricing your setup topic" which is taken waaaaaaay too serious for no reason, where most of it doesnt make a difference.
@TsodingDaily
@TsodingDaily Месяц назад
Thank you for understanding my friend. And sorry again for my reaction. 🫂
@Blazing_Hotmagma
@Blazing_Hotmagma День назад
1:50:00
@catmium7974
@catmium7974 Месяц назад
Game Dev is one of the hardest shit I guess
@Zedv.0.0.1
@Zedv.0.0.1 Месяц назад
I fear you Mr Azozin have Stockholm's syndrome for JavaScript/Typescript
@atxorsatti
@atxorsatti Месяц назад
Seeing you program in js with you c voice is mind fucking
@TsodingDaily
@TsodingDaily Месяц назад
wtf is c voice? are you ok?
@atxorsatti
@atxorsatti Месяц назад
@@TsodingDaily listen this is wild I would have never thought I'd see you centering a div
@atxorsatti
@atxorsatti Месяц назад
​@@TsodingDaily Also may I ask why you do ++x and not x++ in for loops?
@vk-hm6te
@vk-hm6te Месяц назад
@@atxorsatti ++x is more efficient (think about what ++x and x++ actually mean); of course, modern compilers optimize x++ and ++x to the same code, but its a good habit nonetheless
@sirynka
@sirynka Месяц назад
It basically boils down to the way x++ is computed when you're assigning it to a variable. x = 0 a = x++ print(a, x) // 0, 1 To make it work like so you need to create a copy of x and return that copy, so when you are incrementing the actual value of x in ram, your 'a' won't change. But it doesn't really matter in the for loop (as long as you're using x++ as the third param) Note, if it's the second param, the behavior of loops would be different. for(int i=-5; i++;) print(i); // 4, 3, 2, 1, 0 for(int i=-5; ++i;) print(i); // 4, 3, 2, 1 P. S. I've omitted minutes as was lazy to type them. Hope I've not overcomplicated the explanation, and it does make some sense.
@elvis_gastelum
@elvis_gastelum Месяц назад
First
@drsensor
@drsensor Месяц назад
i've conflicting feeling about typescript
@TsodingDaily
@TsodingDaily Месяц назад
It's an alright language given the substrate it has to work in.
@EMEKC
@EMEKC 29 дней назад
Personally I've had a nicer experience in general with TS when using Deno, maybe that could help, but I can't guarantee anything 🙃
@araz911
@araz911 29 дней назад
ur ts goes in trash can together with ur c all that bloat ware, move towards real programming in python 👌
@freddie224
@freddie224 22 дня назад
C bloatware?
@araz911
@araz911 22 дня назад
@@freddie224 YESCISBLOATWARE. so what?