sinclairzx81 / zero

A 3D renderer written in JavaScript and rendered to the terminal.

Zero

A 3D renderer written in JavaScript and rendered to the terminal. No GPU required.

# start the demo in ascii mode (default)
$ npx zero-demo@latest

# start the demo in 24-bit true color mode (experimental)
$ npx zero-demo@latest --color

Overview

Zero is a small graphics demo that implements a 3D renderer in JavaScript and renders it's output to a terminal via nodejs' stdout. Zero was written for fun and to push JavaScript performance. ASCII rendering has been tested on Windows, OSX and Linux terminals. ANSI 24-bit true color rendering has been tested on Cygwin (Windows) and Linux Mint terminals, but should work on most terminals that support true color.

This project and associative materials are offered as is to anyone who may find them of use.

Zero implements:

• Programmable Vertex and Fragment shaders (in JavaScript)
• Perspective Z-Correct Texture Mapping
• Per Pixel Depth Buffering
• Adaptive Resolution on Terminal resize (TTY only)
• Support for 24bit true color (terminal must support 24-bit color)
• Matrix and Vector math libraries.
• A Scene Graph

Licence MIT

Building Locally

Clone this project and run the following from the terminal.

$ npm install
$ npm run build
# run it
$ node index

zero's Issues

Notify the NPM folks that "peak NPM" has been achieved.

Thanks. Amazing work, BTW. My favorite novelty app in forever.

https://www.reddit.com/r/programming/comments/djeycp/real_time_ascii_3d_renderer_for_nodejs_terminals/f46jxwb/

This is running perfectly on my 8-year-old Dell Latitude E6500 with 4GB RAM and Intel HD graphics and unremovable Windows Vista sticker attached via molecular annealing.

[Feature] Color support?

The current demo is amazing and crazy enough in itself. Frankly looking at it, I have this certain disbelief that I'm looking at an actual terminal window with 3D graphics.
That said, is there any chance to push it even further with colors? Really just wondering, awesome work already!

Support sixel graphics

While it would move away from being an ASCII renderer, sixel is not entirely unlike a standard for rendering graphics to the terminal.

Consider using setImmediate instead of setTimeout in the render loop?

Hello!

This is a very cool project and also an impressive job!

I've been tinkering with the source code a little and I've noticed that in the render loop using Node's function setImmediate to set up the next iteration really outperforms setTimeout in my text environment (Node.js 13.0.1).

The line I'm referring to is index.ts:79, instead of

setTimeout(() => loop())

I've

setImmediate(() => loop())

or

setImmediate(loop)

with a substantial performance increase (on 120x28 the demo went from avg. ~65fps to ~250fps, on 237x70 it went from avg. ~30 fps to ~64 fps).

Functions set to run by setImmediate respect I/O events and their callbacks like setTimeout ones do. In this implementation it allows for the event handler that changes the rendering scene resolution to run on terminal window size change just like setTimeout.

Other tests I did were with a while(1) inside the loop function, converting the loop function to an async function and having it's callback call it again, and having the next iteration of the function set up to run with process.nextTick. All of those are also faster than setTimeout, but they seem to hang the process on the loop and disallow other event handlers and callbacks to run.

Is there a reason for why setImmediate isn't used in the place of setTimeout ?

Related:

• This StackOverflow thread on NodeJS' setTimeout(fn,0) vs setImmediate(fn)

• Node's Timers, setImmediate

Thank you for reading and for the good job!

action？？

Are there any practical scenarios for this NPM package?🤔

vector multiplication bug

I was casually browsing through the code out of curiosity, and it looks like the "mul" method in the fixed-dimension vector classes was accidentally copied from the "sub" method instead of containing the actual multiplication logic like in the variable-dimension vector class.

Use as three.js renderer

Hey, how difficult do you think it would be to add this as an alternative renderer for three.js?

How to export from blender