Live data from Hacker News

3D graphics rendering pipeline. Implemented in JavaScript. Run in a terminal

github.com

31–40 of 52 posts

Re: 3D graphics rendering pipeline. Implemented in JavaScript. Run in a terminal

#31

Earlier quoted context omitted.

> "Transpilation" and "compilation" describe the exact same concept. No I think transpile implies compiling from one level of abstraction to another similar level of abstraction, which is quite different in theory and practice to compiling to a much lower level of abstraction. It's a useful word to have in your communication toolbox.

I agree with your overall definition. In fact, the dictionary definition of compile does also suggest that you are transforming to a 'lower level' so, in strictness, there is a need for a word to fill the void that you suggest transpile provides. But I do wonder about the actual usefulness of the distinction. If someone says that they compile Typescript to Javascript, I'm not sure that anyone is going to be confused…

'This is a transpiler' gives me a massive amount of additional context compared to 'this is a compiler' - likely structure, implementation techniques, output. Not all transpilers will fit this usual structure, but if they do you can tell me by changing this one little word. Powerful communication tool, I think.

Re: 3D graphics rendering pipeline. Implemented in JavaScript. Run in a terminal

#32

Earlier quoted context omitted.

I agree with your overall definition. In fact, the dictionary definition of compile does also suggest that you are transforming to a 'lower level' so, in strictness, there is a need for a word to fill the void that you suggest transpile provides. But I do wonder about the actual usefulness of the distinction. If someone says that they compile Typescript to Javascript, I'm not sure that anyone is going to be confused…

'This is a transpiler' gives me a massive amount of additional context compared to 'this is a compiler' - likely structure, implementation techniques, output. Not all transpilers will fit this usual structure, but if they do you can tell me by changing this one little word. Powerful communication tool, I think.

But neither 'this is a transpiler' or 'this is a compiler' provide any meaningful information without specifying the compatible inputs and outputs. Once the inputs and outputs are specified then it is already reasonably known if the operation is transpilation or compilation, making the distinction between transpiler and compiler redundant.

Re: 3D graphics rendering pipeline. Implemented in JavaScript. Run in a terminal

#34

Earlier quoted context omitted.

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

SublimeText has the AlignTabs extension which can do this.

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

Re: 3D graphics rendering pipeline. Implemented in JavaScript. Run in a terminal

#35

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?

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

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.)

Re: 3D graphics rendering pipeline. Implemented in JavaScript. Run in a terminal

#38
post #35

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?

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 The next step up from that is to then render meshes…

You 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.

Re: 3D graphics rendering pipeline. Implemented in JavaScript. Run in a terminal

#39
post #35

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?

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 The next step up from that is to then render meshes…

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

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

And then, learning about matrix multiplications makes sense.

Re: 3D graphics rendering pipeline. Implemented in JavaScript. Run in a terminal

#40

Earlier quoted context omitted.

"Transpilation" and "compilation" describe the exact same concept. From user's perspective, readable code is translated into runnable code. From theoretical perspective, code in a more complex language is translated into a less complex language while preserving semantics. From a compiler writer's perspective, it's a totem pole of compilers, with at least one middle-level language usually. Plenty of people use the ter…

> "Transpilation" and "compilation" describe the exact same concept. No I think transpile implies compiling from one level of abstraction to another similar level of abstraction, which is quite different in theory and practice to compiling to a much lower level of abstraction. It's a useful word to have in your communication toolbox.

Fine, but by that logic, gcc with -O0 is a transpiler, and becomes a compiler again with -O2. Similarly, TS transpiles to JS, but, say, ClojureScript compiles to JS. And if a compiler is built with something like Nanopass, it's a sequence of transpilers that somehow become a compiler along the way.
Post reply on HN