project-image

Coding History: 3D from Mode7 to DOOM

Created by Eniko

A video series teaching the code behind the early evolution of 3D.

Latest Updates from Our Project:

Pause in production
2 months ago – Fri, Mar 08, 2024 at 01:28:37 AM

I have been dealing with the potential unrightful deportation of my husband in violation of my rights as an EU citizen which is taking all of my time and energy. This means I'm unable to work on videos until we can get this settled. I'm very sorry. I'll try to keep you updated.

New episode! 3D 101 (or: make a 3D engine without math)
5 months ago – Wed, Dec 20, 2023 at 11:08:14 AM

Hey everyone! Sorry for the delay in the update, but I really wanted to get the episode done before posting anything. And here it is, just in time for Christmas!

Those of you who have access to digital downloads will also be able to get the download via your Backerkit account.

Anyway, please enjoy the video. I hope you all stay safe, have happy holidays, and a happy new year. I'm going to be taking my 2 weeks a year off from work after this week, so the next update probably won't be until sometime in early February.

3D 101 part 1 preview now up for early access backers
6 months ago – Thu, Nov 02, 2023 at 12:38:51 AM

Hi everyone! I didn't get as far as I hoped with the 3D 101 episode, but I did get the 1st part of it done, and that should be the hard part. I've uploaded a preview of it to Backerkit for those with the early access tier and if you're in that tier you should have an email about it. Please let me know if you have any thoughts so I have a chance to incorporate them into the final product.

Part of what slowed down part 2 is that part 2 is going through the code that powers the concepts touched on in part 1, but it was much harder to record a code view than I expected. I looked through a bunch of services that offer pretty, editable code, but they either didn't offer the features I needed for this project, or had terms disallowing commercial use (and I don't know if that applies here but I definitely don't wanna tango with that), or both.

So, I made my own! I used the code-input library with prism to get an editable HTML widget with code highlighting. Then I added a bunch of tweaks to make it look nice in fullscreen, including a bunch of javascript for features that would make it easier to record the code being displayed.

Bright code text on a gray box with rounded corners and drop shadow, set on a cornflower blue background.

It turned out really nice in the end and will really speed up future video production, but it took a surprising number of hours to pull it all together. And yes, I did create a "big mouse cursor" custom cursor so that it'd be easier to follow the cursor on small screens. Also yes, that is cornflower blue.

Anyway, the code section should hopefully go pretty fast now I have this, so I'm hoping to have the rest of the video done by the end of the month.

To elaborate on the features I added to this: it has a default font size but if the text doesn't all fit in the box it'll autosize it as lines are added so that all of it fits. There's two problems with that:

  • If the text is much smaller than the default, people on small screens won't be able to comfortably read it anymore.
  • If the text has been automatically resized, then adding or deleting lines will prompt another resize, which is not what I want if I'm live editing code on camera.

To remedy the second issue I added a "lock" to the size. This displays a border around the gray box to let me know that the text size is currently unlocked. I can lock/unlock the text size with CTRL+L. Then to remedy the first issue I color the border based on the text size. If it's full-size the color is green. If it's kind of on the edge then the color is yellow. Otherwise, the text is probably too small for people to comfortably read on small screens, so the color becomes red, telling me that I should strongly consider splitting up the code more.

On top of that I added a trimming shortcut (CTRL+S) which removes any leading and trailing blank lines, and which also removes redundant indentation from the code. This means that I can paste code from my actual code project and then use that shortcut to make sure I'm using the minimum amount of space needed to show it on camera.

September update and release schedule for the rest of 2023
8 months ago – Wed, Sep 20, 2023 at 05:54:44 AM

Hi all! I'm happy to report that I've locked down the script for the 3D 101 video. There is a little bit I still have to write, but that involves going through the code in the 2nd half of the video, and the code isn't quite 100% finished. Mostly because I found some things I need to change to make the concepts involved clearer once I completed the script.

The 3D 101 video will be split into two parts. The first will go through all the concepts involved to get from a top-down 2D view to a 3D perspective, because the concepts are really simple to understand. Then the 2nd part of the video will walk through the actual code that performs the translation, rotation, clipping, and perspective division.

I'm hoping to have the early access version of the video up by the end of October. If all goes well and people aren't reporting that they find the concepts impossible to follow I'll start on the first person 3D dungeon (or blobber) video straight after that. Unlike last video there won't be a delay because all the crediting work at the end of the video has already been handled, so it's a five minute job now to plug that in.

We take time off around Christmas and NYE at Kitsune Games so I'm aiming to have the early access version of the blobber video up before 2024.

Digital download, and a word about stretch goals
9 months ago – Fri, Aug 11, 2023 at 02:15:35 PM

First off: it seems when I launched the video I somehow forgot to put up the digital download. That's now fixed and you should have an email notification if you backed at that tier.

With that out of the way; while I continue to work on the script and sequences for the 3D without math video, lets chat about one of the stretch goals, the 3D engine.

Earlier this year while I researched the voxel terrain video and was recreating the method seen in Comanche's VoxelSpace engine I had an idea. What if, while rendering the terrain voxel by voxel, I combined that with a sort of tile-based raycasting engine? By casting the rays for the voxel terrain one at a time, rather than scanning horizontally on the same depth as the tutorial I linked does, I could track when a ray enters a new 16x16 space. If there was a tile set to the tilemap, instead of drawing the color of the voxel downwards as I would normally do, I could use the tile's height and its wall texture to draw a wall strip instead. That approach worked and resulted in this: 

Cubic texture mapped 3D structure inside voxel terrain

I felt pretty pleased with the result. I did some more tinkering and decided to add some height to the grass, and came up with these images, which felt really nice to me:

I played with it some more, adding billboard sprites, and optimizing the renderer using threading and SIMD and got it rendering at ~3,000 frames per second. Then someone mentioned that I could use two height/tile maps, one inverted for the ceiling, and that means you could make convincing indoor spaces.

I'm thinking of going with this concept for the 3D engine I said I'd made for the stretch goal. I've given it a lot of thought, and I think this is a lot more interesting than just retreading the DOOM or Build Engine style renderer, especially when things like ZDoom and all of the amazing tools that go with it already exist. This would at least be something different and unique.

Also while working on this approach I realized that technically it wouldn't even need to have a tile map, technically each pixel on the voxel grid could have its own associated wall texture, but I feel like maybe that's a bit too granular? Or I guess there could just be a stamp tool and you could grid-align that as an option, alongside a freehand brush tool to paint wall pixels on top of the terrain.

I'd like to know what y'all think about this direction, so feel free to leave a comment if you have strong feelings either way.