7 ms·
3D graphics rendering pipeline. Implemented in JavaScript. Run in a terminal
- agumonkey 7y agoI cannot deny how much I like asciiart renderings.
- _bxg1 7y agoI'd be curious to see some benchmarks
- th0ma5 7y agoThis is code is very clean... someone should add this to a list of very nice codebases to read.
- kiwicopple 7y agoI agree. Does anyone know how they achieve the alignment of all the ‘=‘ signs? Perhaps a VSCode extension?
- nicoburns 7y agoSublimeText has the AlignTabs extension which can do this.
- kiwicopple 7y agoGreat, thanks for the tip. I managed to find an equivelent in vscode called Auto-Align
- glouwbug 7y agoGraphics pipelines are typically well understood. Software renderers capable of N64 like graphics are not complex to write: https://github.com/glouw/gel/blob/master/main.c https://github.com/glouw/gel/blob/master/main.c But you are right. It does take some ingenuity to make it clean.
- fesoliveira 7y agoThis 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 7y agoThe amazing Michael Fogleman also has https://github.com/fogleman/fauxgl https://github.com/fogleman/fauxgl - a software renderer written in Go.
- TomVDB 7y agoThe title says "JavaScript", but the file extension says ".ts". It doesn't look very Javascript to me. Can anyone clarify?
- malvosenior 7y agoIt's typescript.
- sabrehagen 7y agoThe source code is TypeScript, which once compiled produces JavaScript.
- ashtonbaker 7y agoIt'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 7y agoA more correct word for converting code from one programming language into another is "transpile".
- antisemiotic 7y agoIt'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".
- chrisseaton 7y agoIt's just a more specific word. You can say all words are unnecessary because you can express the same thing using more words.
- Razengan 7y agoAuthor's name "sinclairzx81" and the logo implies an affiliation with the 1980s computer & company. Is there any?
- azabua 7y agoImplemented 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 7y agoSometimes 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.
- enriquto 7y agowhat's the point of rendering into a terminal? why not use a raster framebuffer?
- wayvey 7y agoAs 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.
- lbj 7y agoSomeone please post something cool made with this
- JDiculous 7y agoThis 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 7y agoA 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.)
- packetslave 7y agoYou should DEFINITELY write your own matrix library to learn the underlying principles, but once you want your renderer to actually do something with reasonable speed you'll pretty quickly be replacing your homegrown matrix code with something like Eigen that handles SIMD for you.
- bnegreve 7y agoI'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.
- 7y ago
- gitgud 7y agoIt's amazing it resizes to the terminal perfectly, if you zoom out the terminal the resolution gets much clearer!
- metalforever 7y agoThis is a bad language choice for the problem.