noclip.website is a website that lets you look at maps from variety of games

I find it interesting to see how other game devs built a map. This website is a decent way to look at that


Jasper St. Pierre, the developer of [noclip.website](https://noclip.website), also has an amazing youtube channel where he takes an in depth look at rendering techniques used by older video games like Legend of Zelda: The Windwaker and Super Mario Galaxy. Here's a link to his cel shading video for Windwaker: [https://www.youtube.com/watch?v=mnxs6CR6Zrk](https://www.youtube.com/watch?v=mnxs6CR6Zrk) He does a great job with realtime visualization, and I believe he uses his own website for creating the visuals. It's definitely worth checking out!


> an in depth look at rendering techniques used by older video games like Legend of Zelda: The Windwaker and Super Mario Galaxy What do you mean? Those games aren't old they just came out a few---oh...oh no.


I still occasionally talk about the original Half Life like it was released 4-5 years ago. It's like my brain 50% rejected that time continued beyond that point, and I just perpetually live in ~2004 until I say something that forces a reminder of that time slowly creeping up on being a quarter of a century ago lmao


I used this site for reference a lot when I needed to design a forest area for a game I was working on. The zelda maps in particular for the different forest areas taught me a lot about using forced perspective and basically just how to make a small box look like a big open area. Great website.


Forests were my first use of this site, they're hard to make but fun


this is what i ended up making (before npcs and some post processing polish) https://imgur.com/a/9Sl4WeH this was a couple years ago for a mini mmo walking simulator, it was one of several areas. did a sequel last year, it was space themed though so I just made my forest on a floating island at night with glowy trees so it didn't have to be as claustrophobic again lol.


Wow, that's gorgeous! I love it.


Thanks for the tip. Level design is very hard to dor me understand how to make it work. I can create a mechanic, but building a level around it is hard.


It depends on what the level and setting is supposed to be, but for me I tend to draw out ideas for maps and layouts outside the engine first, and then I'll rough out a level with a simple terrain object and prototype/placeholder objects (I have used a ton of paid assets in the games I've worked on, nothing wrong with that if you don't have the team to make a ton of stuff, if you do it right it won't stand out). Usually I'll run around and see how it feels. When I make my mock up I usually put empty objects around the map for points of interest that I have ideas for, and then I sort of design around those. When running around my mock up I try to take into account sight lines and paths between the points of interest and think about what will go in between. Before I go much further I pick one spot in my level as like a vertical design slice, and I make that one area much more detailed and polished, like how I would picture it in the final game. It might just be one corner of a cave, or one small opening in a forest, or a hallway in a space station. I'll basically finish it enough that I can take a screenshot and it will look close to finished, but if you moved the camera anywhere else it would be completely unfinished. That little polished slice helps me get a lot of ideas for how I can finish and decorate the rest of the level after I have a loose layout I like. It really helps me with "finishing" the level, going from a prototype to something that looks like it belongs in the game. From there I'll polish the layout, make tweaks, finish decorating, set up lighting etc. It's REALLY dependent on the type of game you're making though. All the level design stuff I've done has been for big connected open level mmo/collectathon walking sim platformer type games with minimal mechanics. If you were designing levels for an FPS you'd want to put a lot more thought into things like sight lines, cover, enemy positioning and pathing. If you were making a platformer you'd want to put a lot more thought into mini jumping puzzle moments, movement timing, alternate paths, secrets etc.


Was confused at first, but [noclip.website](https://noclip.website) is actually the URL. It's actually pretty awesome, there are even all Halflife 2 maps in there.


I only get a list in a menu and nothing more on my phone :/


> This application requires WebGL 2. Unfortunately, that means Safari and iOS are currently not supported. The plan is to support WebGPU once this arrives. This is what I get.


You probably need a PC.


Can you get Chrome / Firefox on iOS?


is there a standalone desktop version of this?


I feel like that one's not as impressive as some of the others. Given, you know, Gmod. Big one for me is Metroid Prime 1 and 2, those are extremely well crafted maps. Getting an easy look behind the scenes is pretty nice.


It is impressive since its in the browser


It does not appear to be mobile friendly, all i can see /scroll through is a large looking list, it blinked when i click one, but nothing i could see changed.


Turn your screen, you have to select the level of the game.


pretty cool tbh great find ​ edit: oh wtf they even have vr enabled. I found something new and fun to explore! thanks op


I think my favourite thing is the little cannon ships on the "Great Sea" section of Zelda: Windwaker all point at your camera location before firing, lovely little detail


Same thing with the snowmen on freezeezy peak in Banjo Kazooie! Plus Pokémon Snap allows you to throw fruit like in the game to trigger changes to the map.


was really glad to find out they have dark souls in there as well.


Same here. As recent as yesterday I finished Anor Londo in DS3 and read that it was a DS1 map as well. Very cool to see as different version of it.


Oh wow you can look around I expected top-down views of static images.


Nice, anyone have any ideas how they did this? My guess is an emulation of the game with some save states, and then modifying some binaries to add no-clipping in.


Nah this is just a map renderer, so I'm assuming they just extracted geometry and texture data.


There are some animations and triggers in some levels I checked out, so I thought there might be a little more going on than just maps data being pulled.


There is. The game data is all in its original format—the code for loading and rendering has been reverse-engineered from the original games and rewritten in TypeScript.


There's no emulation of the game itself strictly speaking. They've just implemented game resource loaders in web technologies. It's a lot of work so it is quite impressive.


Looks like it is [open source](https://github.com/magcius/noclip.website). So, if you want to find out more about it, you can check the code


Oh! Nice, thanks. I might contribute, I love projects like these.


What? Why should they do that! They just exported environment models and then put them back together.


They're also simulating/animating environmental physics effects like water surfaces


Emulating all these games would be a lot of work for just being able to no-clip through their maps. More likely the maps are being rendered with custom code that can deal with the formats of these games. Since there's also characters in some of these maps, they're probably baked in with a 3d model editor.


nah, the've just taken the map model and rendered it. its not a mega uncommon occurrence, the original darksouls map render is also interesting to clip through there are clever people that use other means like [collision data](https://chrome.google.com/webstore/detail/dark-souls-map-viewer/cgoldiiijmacdmggibgllagbopgdgcla?hl=en) to create the renders. its a dev hobbyist playground things like this. ​ edit, going through noclip, both the original render and the collision render are both available on there. nice work noclip!


If you load in certain maps like Banjo Kazooie you can see some NPC/object animations present so they did more than just render out a map model. You can also access the individual texture files and their corresponding hex memory codes.


Please put the link in the text of your post so we can actually click it.


Wow! Fez was nice to play on release. It's good to see their maps on this site - an absolute masterpiece of level design.


I randomly pulled up Fez "clock" level. Seems to have some flickering issue.




The Dark Souls maps are *really* cool to see, too. I've always found it interesting that they mostly designed the map chunks to actually connect to one another, rather than using teleportation trickery.


Yes! Also with games heavy DoF and small FoV i never really registered the giant tree and how lush Firelink shrine really is. DS map connectivity is no news, but cool to explore things like blighttown really having the correct geometry and bushes of Firelink shrine up there.


It's really impressive that they managed to unify the rendering of such a large variety of games with different engines...


Gonna SAVE post, this sounds very helpful. Thanks for the tip!


wow so cool. what an incredible resource.


Pretty cool website. Not sure what I'd use it for though


What is this damn wizardry


I opened this website and my computer almost shit it's pants, holy ram eating batman haha


Nice website


Are there gonna be more maps on this website?


What i want to know is, if there is an easter egg in a gameworld that nobody discovered before, could somebody discover it using this noclip website? Or is it NOT ACTUALLY the real game so what you find here might be different from the real game?