A 3-D software rasterizer written from scratch in nothing but JavaScript

itch.io • Play in the browser

Tmp3D is a 3-D software rasterizer written from scratch in nothing but plain-old JavaScript, just for kicks. It makes use of the 2d graphics context of the HTML5 <canvas> to draw some graphics primitives and is heavily inspired by OpenGL sub-routines.

The project is still heavily a work-in-progress and in its very early stages, so you may take it as it is and expect many more features to follow very soon.

It currently supports

• a first-person camera with 2 degrees-of-freedom: yaw and pitch
• perspective transformations
• near & far clipping planes
• back-face culling

and plans to support

• frustum culling, i.e., triangle clipping
• depth-sorting
• flat-shading
• affine & perspective-correct texture-mapping
• occlusion culling ( 😩 )

Why?

My main motive for undertaking this project was that it'd be educational, recreational, and entertaining. I may or may not try and make a game with it at some point if I'm satisfied with its progress. So, the fact of the matter is, have some fun while re-inventing the wheel.

Setting up

Requirements

• Node.js
• ejs
• express

After cloning the repository, navigate to the root folder and install the dependencies using npm.

$ npm install

Once all the dependencies are installed, you can start up an Express development server with:

$ npm run start

To enable the debugging features, run:

$ npm run start:debug

Controls

Action	Keys
Movement	W A S D
Free-look	↑ → ↓ ←, or the mouse*
Change elevation	Q E, or *

^* You should first click on the canvas to activate mouse controls.

Live Demo

You can check out the live demo here!

Trivia

The project is named after the fact that I'm too lazy to come up with an original name, so I make up a placeholder name to keep me going until the first-ever public release of the project, by which time I had already grown accustomed to the placeholder name and it's too late to come up with a new name, so I decide to go with it thinking I can pretend it is a deliberate choice of a name so I can make some silly backronyms with it.