Noclip.website is no ordinary gaming site.
Instead, the 2018 site acts as an online model viewer that lets you explore models and environments from various video games, ranging from Luigi’s Mansion and Super Mario Sunshine all the way to Super Mario Odyssey and the Legend of Zelda Breath of the Wild. It’s a technical marvel to behold, and one of the most impressive browser based projects we’ve seen in a while.
And it’s also got us wondering:
How does it all work anyway? What kind of black magic goes on behind the scenes to keep this Boundary Break esque app going in just HTML, CSS and JavaScript?
Hence today, we’re gonna get some answers to these questions, in our exclusive interview with site creator JasperRLZ. Starting with the question of why the site exists to begin with…
So Jasper, what’s the origin story for Noclip.website?
A long time ago, I made a tool called bmdview.js, just to see if I could. I wanted to see if Mario’s Faceship from Super Mario Galaxy 2 would work here. This was a lot of fun, so I did this for a few more games until I had enough of them to combine them all into a single website.
The original inspiration for Noclip
Either way, it started turning from a silly little thing into something I put a lot of time and effort into, so I gave it a cool name and set it live on the world. A year later, people found it and enjoyed it, and the rest is history.
Okay, makes sense. So, how do you decide what games to add here?
The games chosen are just games I played and felt would be fun to explore the environments of. I play a lot of Nintendo games, and think that they have a special penchant for worldbuilding, so that’s my bias seeping into the game selection online there.
Also, the GameCube/Wii has a bizarre architecture that just so happens to be decently easy to make models for.
What Luigi’s Mansion REALLY looks like
And how do you get the models for the games you feature anyway? Many of them don’t seem to be available anywhere else…
All the models actually come from the original ROM data. I load the original file formats directly in JavaScript in your browser.
No third party models and rips are used here, because most of them are far from accurate.
As for the games in which the community hasn’t figured out the model format, well I’ve reverse engineered it myself.
Wow, impressive to know that you rip all these models yourself. Either way, are you sometimes surprised your site can handle some of them? Rendering Super Mario Odyssey kingdoms in a tool like this is insane…
Well, Odyssey doesn’t run spectacularly well. I do have a good idea about why this is (it’s the number of textures rather than the number of triangles), but it needs some extra work none the less.
Nintendo games do tend to be quite well-built though. Odyssey for instance, actually runs better than Metroid Prime just because the ways the scenes were built.
The fact that Mario Odyssey kingdoms like this work in a browser based viewer is incredible
Speaking of well-built games, what were the most difficult games to get working in this tool?
Psychonauts was probably the game I spent the most time implementing. I had to reverse engineer the entire format from scratch, and it’s not an easy format to reverse engineer by any means. A ridiculous stroke of luck made it all possible.
Psychonauts was one of the trickier games to get working
Any games you found surprisingly easy to get working here?
I’d say Odyssey. Modern Nintendo formats are nice to work with, and super well organised.
Either way, let’s talk programming now. What JavaScript libraries did you decide to use for this project?
There are very few JavaScript libraries used here. Instead, almost all of the code (including the whole renderer) was written specifically for the project. That’s because a lot of third party JavaScript code is not very performance focused, and I pride myself on 60fps in your browser in an era where Gmail runs at 2fps.
Makes sense, given how performance is paramount for something like this, which is presumably why you use WebAssembly so much. Do you use that often?
WebAssembly was interesting. Generally though, I don’t use it much (mostly for small components shown in profiles) and I only use it a specialised manner – with my own hardcoded memory heap layout, my own loader, etc. The components are written in AssemblyScript, which was quite nice to get working.
Is there a server side component to any of this?
The app runs in the browser, the only thing on the server is the data, the HTML file and the JavaScript file.
And excuse me for asking this, but… where are you hosting this site? Bandwidth can’t exactly be cheap for something like this…
Bandwidth is not cheap no.
Still, did you ever expect it to take off like this?
No.
What’s it like seeing all those news stories pop up about your project anyway? How does it feel to know your pet project has hit the mainstream?
Well, I was too busy answering tech support and worrying about bandwidth bills to have emotions.
Seriously though, it’s been awesome. When you work on something for in isolation for 6 years, it’s easy to think that nobody cares about what you do. But then suddenly everyone does care.
It’s nice to have that kind of validation.
That said, I wasn’t expecting it to go global though. If you search Noclip.website on Twitter, you’ll see posts in German, in French, in Spanish, in Russian and in Japanese among many others. That’s awesome.
Moving away from the press now, this site always reminded me of Boundary Break on YouTube. Are you a fan of that show?
Of course I’m aware of Boundary Break. I love the show, and I doubt anyone would find this kind of thing cool without the audience created by it.
Are there any other people working on this sort of thing that you feel are doing interesting work right now?
There are always people doing interesting things, and there are plenty of people who have done Noclip like things in the past too. My work is based on the miles of work done by other people in the reverse engineering scene.
Check out halospawns.com for a good example.
Oh cool, there’s definitely some neat stuff there. What’s your experience been with the reverse
engineering/hacking/modding scenes for these games?
Well, the Resident Evil community has been awesome to work with. I don’t consider myself part of the modding community (since I’m not interested in making editors or converters), but they have been great to work with none the less. I’m just more interested in taking apart games to see how they work than putting them back together.
Finally, what games are you planning to add to the site later and why?
I have my own private list of games I’m working on, but I’m not saying anything. The Trello board has the requests list, and that’s all I’ll say about it.
Well that’s a bit disappointing, but it’s an understandable answer none the less. You just don’t know what games will be easy or difficult to rip models from overall, and you don’t want to put too much pressure on yourself to deliver the impossible down the line.
Either way, it’ll be interesting to see what games make it to the site next, as well as what the future holds for the service in general. Will it lead to an uptick in new Boundary Break esque YouTube channels, or replace them entirely? Will it inspire more people to rip video game models and upload them to sites like the Model’s Resource?
And hell, what will companies like Nintendo do now this project has gone mainstream?
We can only wait and see.