Full 3D rendering pipeline running entirely in software. Written in Typescript by
@skoda, modified from
DigiPen graphics coursework.
W-A-S-D move
↑↓←→ look (or click above)
tap to move
What
Real-time, fully software based 3D rendering pipeline. Using no external libraries beyond
what's native to JS in browsers (a few Math functions and DOM objects), render-pipeline
can render triangle based 3D primitives directly to pixels in an HTML Canvas element.
When and Where
It came out of my DigiPen coursework, particularly from CS200 and CS250 courses on
rasterization and 3D graphics in the early 2000s. Around 2010 I cobbled together that work
into a version
rendering a single cube while I was
learning JavaScript. In 2023, I rebuilt it
as a library while learning
Typescript to add some functionality I'd always wanted to build, like multiple triangle
streams and primitive types, triangle clipping, depth buffering, and others.
Why
Typescript and the JavaScript virtual machine are a terrible fit for a rendering pipeline,
but it's fun to see how performant browsers have become. Maybe someone will learn
something about 3D graphics from poking around. It's one of a few pet projects I kick
around when picking up new tools and technology to use, and computer graphics has always
been an area of interest to me.
How
Most of my learnings on graphics is dated, but much of it was from classes at DigiPen in
the early aughts. What gaps were left from classes were largely filled in a few readings
of Real-Time Rendering which is still a
fantastic resource for anyone interested.