
3D graphics rendering pipeline. Implemented in JavaScript. Run in a terminal - bwidlar
https://github.com/sinclairzx81/zero
======
fesoliveira
This is awesome! As an enthusiast of 3D graphics, I appreciate how clean and
easy to read the source is. We have very few examples of how the graphics
pipeline works in code, tinyrenderer [1] by ssloy being one of the most famous
and easy to follow. This should enter the awesome-graphics list as a must read
code!

[1] -
[https://github.com/ssloy/tinyrenderer](https://github.com/ssloy/tinyrenderer)

~~~
zellyn
The amazing Michael Fogleman also has
[https://github.com/fogleman/fauxgl](https://github.com/fogleman/fauxgl) \- a
software renderer written in Go.

------
th0ma5
This is code is very clean... someone should add this to a list of very nice
codebases to read.

~~~
kiwicopple
I agree. Does anyone know how they achieve the alignment of all the ‘=‘ signs?
Perhaps a VSCode extension?

~~~
nicoburns
SublimeText has the AlignTabs extension which can do this.

~~~
kiwicopple
Great, thanks for the tip. I managed to find an equivelent in vscode called
Auto-Align

------
TomVDB
The title says "JavaScript", but the file extension says ".ts". It doesn't
look very Javascript to me.

Can anyone clarify?

~~~
ashtonbaker
It's TypeScript! It is "a strict syntactical superset of JavaScript, and adds
optional static typing to the language." [1], and compiles to standard
JavaScript.

[1]
[https://en.wikipedia.org/wiki/TypeScript](https://en.wikipedia.org/wiki/TypeScript)

~~~
ludston
A more correct word for converting code from one programming language into
another is "transpile".

~~~
antisemiotic
It's always "from one language to another", sometimes the destination is
machine language. The output is generally not meant to be meant to be human-
readable in any case. "Transpile" is an ugly and unnecessary word, please
don't push it as "more correct".

~~~
brianzelip
> It's always "from one language to another“

Hmmm, sometimes it’s “from one version of a language to another version of the
same language”. As is the case with Babel[0] and JavaScript.

[0] [https://babeljs.io/](https://babeljs.io/)

~~~
LordDragonfang
I mean, arguably ES6 and TS are as close or closer to being "the same
language" than ES6 and Babel targets.

------
Razengan
Author's name "sinclairzx81" and the logo implies an affiliation with the
1980s computer & company. Is there any?

~~~
rwallace
In most cases like this, the affiliation is that of former user with fond
memories.

------
JDiculous
This is awesome, very well done.

As someone with very little knowledge of computer graphics, are there any
resources anyone would recommend in order to learn how to build something like
this?

~~~
cbhl
A smaller subproblem to get you started is to build a matrix multiplication
library (with matrices, vectors, and the ability to multiply them).

Note that when you're building test cases, matrix multiplication is not
commutative.

My high school teacher literally just pointed me at the Wikipedia article and
said go:

[https://en.wikipedia.org/wiki/Matrix_multiplication](https://en.wikipedia.org/wiki/Matrix_multiplication)

The next step up from that is to then render meshes using some form of
projection (isometric or perspective). You'll need to figure out how to
actually map the drawing to the screen at that point. (In high school we just
used the built-in 2D methods in Java. Some of my classmates then went on to
shading and textures, but I didn't quite get that far.)

~~~
bnegreve
I'm not sure linear algebra is the best way to get into 3D graphics. I'd
suggest, starting with old fashioned 3D renderers such as ray casters.

[https://en.wikipedia.org/wiki/Ray_casting](https://en.wikipedia.org/wiki/Ray_casting)

Of course it has more to do with raytracing than with 3D projections (which is
most often used for real time 3D rendering). If you want to learn about 3D
projections, first you should understand what linear algebra has to do with
projecting a 3D model on a 2D screen. This is probably a good start.

[https://en.wikipedia.org/wiki/3D_projection](https://en.wikipedia.org/wiki/3D_projection)

And then, learning about matrix multiplications makes sense.

------
azabua
Implemented in ~JavaScript~ TypeScript FTFY ...

Also nice to see a Douglas Crockford book (who is not a fan of TS BTW) ...

Anyways I star'd this repo ... very impressive +1

~~~
knowThySelfx
Sometimes I think TS was made for Java/C# crowd coming to JS. TS is clean,
have to agree. But not much of a fan.

This project is awesome though.

------
gitgud
It's amazing it resizes to the terminal perfectly, if you zoom out the
terminal the resolution gets much clearer!

------
enriquto
what's the point of rendering into a terminal? why not use a raster
framebuffer?

~~~
wayvey
As far as I can see the terminal rendering is one of the main points that's
showcased with this project. Sure you could do this with a raster framebuffer,
but that's been done loads of times. The fact that it looks this good in a
terminal is marvelous imho.

------
metalforever
This is a bad language choice for the problem.

------
agumonkey
I cannot deny how much I like asciiart renderings.

------
lbj
Someone please post something cool made with this

~~~
exikyut
Already done.

(See: Recursion)

~~~
lbj
Recursion?

------
_bxg1
I'd be curious to see some benchmarks

