MarioKart.js Blew My Mind (Open Source + React + ThreeJS)

[@z_0968]

Nintendo is 100% going to DMCA this if/when they find out. My advice take a page from Palworld, instead of calling it MarioKart, with Mario the iconic Italian plumber. You call MasayoshiKart, and make him a japanese electrician.

[@BooleanDev]

yeah, it was extremely dumb to use the mario kart name. its basically begging Nintendo to send a dmca

[@1234minecraft5678]

Idk why ppl think they would cone thru. Maybe he wants the fuzz and changes it after dmca

[@BooleanDev]

@@1234minecraft5678 if the dmca demands you shut it down, changing the name isnt gonna get you out of it

[@eveykhan]

Palrio Kart 🤝

[@ermilburn02]

@@1234minecraft5678 Yes, because we saw how well that worked with Mario Royale

[@anttihilja]

Nintendo will take this down faster than theo can say he doesn't like Remix :)

[@gilgamesh9735]

*Flutter

[@anttihilja]

@toparamennoodles9652 Shut up, Remix is great

[@wlockuz4467]

I think they have a bigger fish to fry at the moment, Yuzu.

[@mohammadalrefaai4377]

After 10y, React for quantum physics

[@DaffyDuckTheWizzard]

I believe we're on the cusp of a new "flash games" kinda of era

[@seeibe]

Wasn't that the .io games?

[@ADarnSmore]

3d browser games have been a thing for a while. this is just worse.

[@Raidar29]

@@ADarnSmore why is this worse?

[@seb4690]

Missed opportunity to say, "MarioKart.js in the Bowser"

[@spageen]

Can react fix my broken marriage?

[@t3dotgg]

Only if it can render to canvas

[@svict4]

Render me like one of your french girls

[@erifetim]

Can you try to hot reload?

[@boomshakalaka656]

Yes the compiler can

[@jaspreetmaan121]

Maybe your component didn't mount

[@shomriddhosworld5587]

After 20y, A Os Built With React

[@t3dotgg]

jQuery is getting an operating system soon so this checks out timeline wise (more context coming soon)

[@VivekYadav-ds8oz]

​@@t3dotggW H A T

[@xetera]

Hey reactOS technically already exists

[@lordbeerus9532]

​@@t3dotgg whaaat ? How? When ? Where ?

[@JinseokSeo-p8q]

m.kzbin.info/www/bejne/gH3KpJyFgM2tb7M This guy is a genius

[@johnmagbag2711]

Didn't expect I'd be a game dev in 11 minutes.

[@IHighscoredYourGirl]

Don't worry, you won't

[@Iamfafafel]

@@IHighscoredYourGirl 😂

[@J3R3MI6]

@@IHighscoredYourGirlyou’re right… with AI it will take 5 mins

[@alskidan]

I adore watching JS developers rediscovering scene graphs :-D

[@mieszkogulinski168]

Uaing React to create any type of graph, not only HTML, is actually an awesome idea

[@cherubin7th]

That this changes show up in the game imminently was so awesome. I just had to tried this in Godot too, and it does this too. I didn't know that.

[@ivanrenescorcia]

ThreeJS is really powerful, we should give it more visibility!

[@jerondiovis6128]

Is this guy already in jail because Nintendo lawyers saw this?

[@James.Engineer]

Amazing open source idea!

[@KaroLiul]

Everything that can be written in javascript, will be written in javascript

[@tanvirhasan4912]

Nintendo would arm themselves with lawyers to go after 8 year olds pirating pokemon.

[@dshappir]

It's always worthwhile remembering that React JSX nesting is just functional composition.

[@Hapkumdo]

Drei is german for Three - the more you know.... xD

[@tangrumser]

Zustand is also German for State. It’s super weird to hear non German speakers pronounce it like it’s just an English word 😄

[@markflakezCG]

"zsuständ" xd

[@EvanEdrok]

So it’s react-three-three?

[@minhuang8848]

@@tangrumser thank God he showed the word, I would never in a million years made the leap susstend

[@mieszkogulinski168]

Long time ago I made a project at work that uses react-three/fiber to display visualizations of scientific data. react-three/fiber is awesome, the idea of displaying 3D object as React components is great

[@AndersonMancini]

Funny to see my face and name during your code review 😅. I just worked with Fire glsl Shader but looks like I changed a lot of other things.

[@joshbedo8291]

You can even take this a step further and run it in XR so you can play it on a quest in virtual reality. Could even add a new camera mode for VR so you are in the driver seat and can throw items 😄

[@TheMASTERshadows]

Now do it with htmx

[@smthngsmthngsmthngdarkside]

Please leave the internet

[@Roboprogs]

Trivia regarding long ternary operator chains: format them like else-if’s. Cuz that’s what they are. See also: (COND …) in Lisp, or if/else/… in Ruby.

[@tgoyer]

I always thought of them more like complicated switch statements. But yeah, "if" is probably a better mental model.

[@ElLevidente]

Feel like it would be a lot more accurate just to say it's made with Three.JS -- React-three-fiber is really just a wrapper to provide Reacts delcarative syntax and components structure for Three

[@AScribblingTurtle]

While the tech is impressive, it is unfortunate they didn't adapt something like Super Tux Kart instead. Nintendo will kill this inspiring thing before you know it. They went after someone remaking a terrible 30-year-old game, that barely anyone cared about, what makes you think remaking one of their greatest cash cows would be handled with less vigor? Heck, if the Devs would have gone for a Sonic variant, they may would have even gotten a Job from Sega. Now all this will get them is a DMCA Takedown, And we all lose yet another cool piece of tech.

[@matt1988ish]

I'd love a polished game engine made out of this. As someone who dabbled in game dev for over a decade, I could get behind this architecture for small projects.

[@ricky2629]

Could something like this get used with Electron to make it behave more like a game with it's standalone executable?

[@mattmmilli8287]

Yes. Many 2D games on steam are really headless browser games

[@theavazov]

I like the idea of recreating the most lovely games from our childhood, good thing is on browser)

[@finn3163]

btw "zustand" translates to state from German, so that might make it a little more clear to understand

[@wlockuz4467]

Finally some good content that isn't about reinventing the same thing or AI. Really enjoyed this one, threejs never fails to blow my mind.

[@SteelSkin667]

I mean this is about reinventing the same thing, the novelty is that it's built with React.

[@wlockuz4467]

@@SteelSkin667 I was mainly talking about how JS frameworks have been lately lol

[@Destide]

RIP the dev enjoy the Donkey Kong themed salt mines

[@guppy13]

please keep react away from game development

[@Nekroido]

Nintendo's nukes the project in 3... 2... 1...

[@yedeng0]

oops... you don't need React to do this at all... It is so scary to look at React people wrap Three.js or Phaser.js, and code a game in a "React way" Please don't abuse React that is already unnecessarily complex enough...

[@igoralmeida9136]

does this use WebGL or WebGPU?

[@rkgkjr]

TBH, as someone with a games industry background... I don't see what's particularly impressive about this demo? The guy ripped some models from the mobile Mario Kart Tour game and threw them into a 3D library and added some janky cart controls on top - this is the kind of thing that even beginner gamedev students could throw together in an afternoon using Unity. The only mildly interesting thing here is using react-three-fiber for scenegraph management, but any game project codebase inevitably ends up as a spaghetti hellhole and I feel like that would only be exacerbated by bringing JSX into the mix.

[@MdNazrulIslam-o9u2m]

What's your VS code setup? Can you share? It's neat and I like it.

[@EEBDivyanshgupta]

I once read an article or something that riot games uses react to display splash screens in there games(ig it was about Valorant). Crazy to think about the potential React has!!!!

[@LajosHarangi]

Nintendo's lawyers are writing the DMCA as we speak.

[@totalpr0st]

zustand es heißt ZUSTAND.. good video and very cool project tho

[@STaSHZILLA420]

Pokemon Revolution Online (fan-made pokemon mmo) made all their stuff from scratch. As a result, they can't be stopped. The same thing can happen here if they alter the name a bit.

[@randerins]

Oh nice, just like playing it on Yuzu 🙂

[@tehArgento]

Well, everybody fork it before it gets taken down XD

[@BennyS6502]

Very impressive and a great showcase for React-three-fiber! To be fair though, this has nothing to do with React being fast or slow. At the end of the day, the whole thing is rendered in a canvas element on the GPU using WebGL. As you said in the video, React-three-fiber is a wrapper around Three.js, which is a wrapper around WebGL. However, the level of abstraction and ease of use makes React-three-fiber a good choice if you want to be productive. 3D programming is hard...

[@xbmarx]

Every day we stray further from God.

[@anonymouscommentator]

sorry im not a web dev and dont know react so probably im missing something but why is building a simple car game impressive? they have existed for literally decades and game engines like unity can export your game into a web environment as well for ages now.

[@Fupicat]

It's just fun! Front end web dev and game dev are usually very different technology-wise, so using React, a tool primarily used for websites, to make a 3D game, is a fun way to showcase what's possible with the technology, while also giving web devs a little peep into game dev using a language and concepts they understand. It's like when people make Doom run on stuff it's not supposed to, because it's a fun challenge.

[@anonymouscommentator]

@@Fupicat i see, thanks for the explanation :)

[@LanceBryantGrigg]

This is legit proof that eventually everything will be written with Javascript.

[@jakejoyride]

This looks like crap and works like crap

[@Kaczucha888]

Defining game world using JSX is just dumb. You have duplicated this one box 3 more times and now you read them top to bottom and may expect that their order in JSX will accually have a meaning when in fact you just position them trough prop and JSX structure has nothing to do with that. Nesting? Cool. Structuring? Dumb. Lets stick with react for 2D UIs

[@AnnasVirtual]

react component as objects? that's fun that's interesting that they can do SceneGraph with react components usually you do scene.AddChild(new ItemBox(position = new Vector3(1, 2, 3)));

[@molesarecoming]

you do that with the dom as well: node.appendChild(createElement("div)). react expresses imperative systems declaratively. that's why react-dom is not named react-html, it is merely a form that instructs react about the dom: divs, spans, appendChild, insertChild etc. react-three-fiber is the same for threejs, a small form that instructs react about the platform. react itself remains platform independent.

[@OGUnusualHat]

Making the code open source isn't the line to cross when it comes to legal response from Nintendo, just posting videos with the character being in it is enough for them to claim copyright, as he is essentially benefiting from advertising with Mario in his video. He just needs to parody a character like Mario, and name it something less specific to Nintendo's brand.

[@DildaarAbrahams]

Nintendo should be proud of this fan as he made mario kart for the browser

[@alegwartney1962]

God I give it three weeks to dcma.

[@LiberaMeFromH]

Nintendo getting ready to lawyer up

[@RobertFletcherOBE]

Nintendo wants to know your location.

[@DeusEx3]

Yes, Nintendo, this video right here.

[@pauloeduardo1461]

In Bowser!

[@IanBoyte]

In browser? More like Bowser.

[@NoName-gc9tu]

Yet we’re worrying about putting a form on the server…

[@FrostsorrowGaming]

this is a like a new era of "flash" style games. Yea i know its way more powerful then flash, but it was the only other thing that came to mind when it comes to browser based gaming that did have some neat games for its time out there. Having full 3D space and running so smoothly is pretty great. Also the openness of it is great as well.

[@Nocare89]

This is kind like modifying a camry into a truck to haul goods with $60k & used truck parts instead of just spending $30k on a new/used truck. The amount of time that was spent to figure out how to piggy-back off react functionality instead of just writing the functionality.... I'm sure he learned a lot more about react though.

[@geralddd.g]

What theme are you using on vs code?

[@xtanion]

++

[@ignskeletons]

Love it, but Nintendo ninjas are 100% going to take it down. Fork it / Download offline copies while you can of the source code

[@MrSongib]

Better than Roller coaster Excel. xd

[@shafiq_ramli]

JS ftw 🎉

[@NullPasha]

I love this, but my brain hurts

[@mcgjk]

What VSCode theme is that? It looks nice :)

[@aleksd286]

So we all just became game developers overnight

[@markhaus]

Is really tragic that Nintendos legal team are so malicious

[@burnsy96]

Nintendo will take this down faster than you can reach the finish line.

[@Kas-tle]

Yeah this is over. Nintendo will take this down. They've even taken down stuff that merely has a Nintendo theme, so of course they'll take down a 1:1 recreation of one of their games...

[@echobucket]

Great, React Brain has infected game dev now.

[@patrickdevaney3361]

This is really cool. But I think it would be more practical to do Rust and WASM for a browser game.

[@UnitCodesChannel]

Nintendo right now: Call The Lawyers

[@marcpanther8515]

Is my assessment correct: things still look clean and declarative because most of the game logic is probably in another repo? This feels like just "initialization" codes for the game.

[@MaisieSqueak]

Well I'm sure this with do wonders for Nintendo's already smashed street cred. Going for the low hanging fruit I guess.

[@Awesomo4000]

Nintendo will DMCA this, as they should. How hard is it to ask someone to make a 3D model of a generic guy in a go kart? And call it anything else than Mario Kart.

[@callibor3119]

We need everything free that we can safely get to help us with basic living. We needed an open source-based community since the internet became so popular around the globe. I’m tired of prices on the internet being so expensive than when you are getting groceries. You don’t need a live service to groceries and cook your own foods.

[@callibor3119]

We need more open source projects to help us with language learning, programming language learning and help with basic living, even. Open source is the public domain of the internet and we need all the free things we need ti bring happiness abd unity back into our lives.

[@MaksimBronsky]

Drei and Zustand are german words meaning "three" and "state" :-) Drei is pronounced more like dry and zustand lik tsoostand (long a)

[@DevGio]

"Devin, make Mario Kart 9 from Threejs and Reactjs"

[@rocksalt636]

Problem with browser games is if you ever need to crouch (ctrl) and move forward (W), well…

[@MrJonathandsouza]

Nintendo lawyers incoming

[@IamSH1VA]

1…2…3 here comes *the LAWSUIT* Isn’t Nintendo just sued Yuzu Emulator’s team 🤦‍♂️🤦‍♂️ *Impressive work, doing all that 3D in browser is insane. Also, he made it open source makes this project IMMORTAL*

[@theomegamale5335]

React....this is the perfect example of using the wrong tool for the job....but i get doing it just to do it. But yea, engines are a thing so shit like this doesnt happen.

[@im9yro178]

2050 : react phone

[@tljstewart]

just don’t name it Mario or use Mario chars. Mania Kart … with custom characters like palworld

[@kyanhluong]

Great job Now quick !, archive this page

[@Gahlfe123]

i fucking love this

[@effeKtSVK]

Everyone clone this repo now, it’s going to be DMCA’d in a day

[@wayne8797]

Nintendo take down notice in 3...2...1.... but this is cool af

[@mirabilis]

Here comes Nintendo with their ban hammer!

[@CrateSauce]

Not as impressive as when we used pure js and opengl to replicate mario 64 in browser from the pc port lmao

[@RueGoG]

can't wait to nintendo lawyers to sue all of the development team

[@UnitCodesChannel]

Nintendo: Hold my Lawsuit

[@vantadaga]

The browser it not the place for games.....

[@insu_na]

inb4 the developer is found hanged with his own entrails and a nintendo-goon-shaped hole in his door

[@Naeem2460]

Nintendo on it's way to charge life load of legal debt on the dev.

[@maxk6655]

man I just play Half life in jquery :D

[@adrianscarlett]

Just wait untill you see wasm with webgpu in action.

[@wlockuz4467]

Someone already opened a PR for TS support lol