4 ms·

i think the degree to which Three.JS has allowed programmers access to the world of modern 3d is severely understated. If you haven't tried it, go to threejs.or

by ixtli 9y ago

i think the degree to which Three.JS has allowed programmers access to the world of modern 3d is severely understated. If you haven't tried it, go to threejs.org/examples/ and copy and paste some source, it's _incredibly_ simple to start hacking.

ixtli 9y ago
Though i think to fully appreciate this you would have had to have bashed your head against the wall of platform dependent opengl in the past...
- cirowrc 9y ago
  When I was still going to computer graphics classes the ThreeJS source code helped me learn a bunch - the code is pretty straightforward when it comes to the basic to at least get a scene and an OBJ loader working with some shaders.
aidos 9y ago
It's a world I'd like to enter more myself but I've found it's a little hard to get started. With a degree in maths / comp sci, I have a pretty good understanding of linear algebra. 20 years experience coding means I'm quite happy to hack away. Thing I've struggled with is all the background. People talk about shaders and launch straight into the details, but I've barely been able to find any background information that sets the scene. Last night I made a game with Unity, which was fun and pretty simple to start with and I'd like to understand more about it all. Where does someone with plenty of comp and maths knowledge but no 3D experience (other than tinkering with the likes of Blender) go to learn about it quickly?
- HammadB 9y ago
  To learn about shaders, I've found that some reading up on the graphics pipeline. Along with https://thebookofshaders.com/ https://thebookofshaders.com/ was been very helpful on giving me a foundation for shader programming. I was also like you, solid bg in CS/Linear Algebra but intimidated by the seemingly steep learning curve of graphics. I dabbled with Unity and now I've started to play more with shader programming and understanding GPU's.
- accatyyc 9y ago
  The way I learned was by figuring it out myself through hacking. I decided to start with a program that could set the color of a single pixel, then tried to figure out how to draw a line from that, and from that to a triangle. After that, try to use the Z value of your points to draw a box from lines with some kind of perspective. With a good background in math, most of these algorithms should be relatively simple for you to figure out. After that, you’re not too many lines of code from rendering full 3D models. Doing it this way, I learned how shaders work by having to figure out manually why they are actually needed. Here is my project, which can now render textured objects in real time with multiple light sources: https://github.com/accatyyc/c-3do https://github.com/accatyyc/c-3do I still have no idea how to do “correct” perspectives. This is just something I hacked together until it looked good. I can very much recommend doing a project like this. You will naturally figure out how 3D graphics work, and it’s simpler than it appears.
- dyarosla 9y ago
  I've found this is a great learning resource: https://webglfundamentals.org/ https://webglfundamentals.org/ Relevant shaders link here: https://webglfundamentals.org/webgl/lessons/webgl-shaders-and-glsl.html https://webglfundamentals.org/webgl/lessons/webgl-shaders-an...
- westoncb 9y ago
  Part of why it's difficult is that there are a tons of concepts belonging to 'real-time rendering' which three.js is built on top of. These are things like how a 3D scene is projected from a particular viewpoint using a 'camera', how lighting works, the split in vector/raster techniques for representing 3D shapes vs their surfaces, the role of shaders in modern GPU architectures etc. I'd recommend the book 'Real-time Rendering': https://www.amazon.com/Real-Time-Rendering-Third-Tomas-Akenine-Moller/dp/1568814240 https://www.amazon.com/Real-Time-Rendering-Third-Tomas-Akeni... Edit: I'd also add: I wouldn't bother learning much OpenGL/WebGL to begin with (except shader programming in GLSL, since there's no good alternative abstraction for that). If you end up liking working with 3D graphics, go back and learn some about it since it'll help you understand performance concerns better—but meanwhile, knowing it is just an optimization you don't need yet. It's true three.js is built on top of it, but the significant principles you need to use three.js effectively fall under real-time rendering, not OpenGL.
- khedoros1 9y ago
  At just a basic level: 15-ish years ago, 3D rendering APIs used what is called the "fixed function pipeline". Texture mapping, 3d-to-2d projection, and so on were limited to the specific functions implemented in the hardware of the video card and exposed by the 3D API you were using. The programmable pipeline requires you to define some programs called "shaders" that run on the graphics card and replace the previous fixed pipeline functions. Example: Say you feed a bunch of geometry information into the API (a list of vertices, faces that use those vertices, coordinates for textures, etc). The "vertex shader" receives 3D vertex coordinates (and possibly other values) and needs to output 2D screen coordinates. The hardware calculates which screen pixels will actually show which part of which face, and passes some coordinate information to a "pixel/fragment shader". The basic job of that shader is to read texture, color, and lighting information and decide what color should be output to the screen for a specific pixel (replacing the functionality of the lighting and texturing functions that were used in the fixed-function pipeline). I think that three.js adds another level of abstraction on top of the actual graphics APIs. Coming from a CS background, with a few years "in industry", I started by reading about the history of computer graphics, read some fixed-function 3D graphics tutorials, built a few toy programs, then moved to the shader pipeline, and built a few more toy programs with the things that I learned. Read theory, experiment to see how it maps to practice, refine your understanding, and then go back to reading, if necessary. If I'm remembering correctly, I mostly ended up using http://www.opengl-tutorial.org/ http://www.opengl-tutorial.org/, liberally supplemented with Wikipedia articles and random mathematics articles, as necessary. (obviously, this isn't focused on WebGL and Three.js, but the core concepts apply. It might make more sense to go for tutorials in the ecosystem you'd like to learn, rather than learning one system, then having the time and cognitive overhead of learning to map the concepts to a new system).
- z3t4 9y ago
  Engines hide all the fun stuff. It's nice when you just want to get a game made, but if you want to get into 3d you can start by making your own soft 3d engine, eg. no 3d api, only cpu. Hand code the 3d to 2d (screen) transformation. Write your own code that decide what color the triangles should be in. Then when you understand the domain, you can look into the low level 3d hardware api layer eg. WebGL for the web.
- Jach 9y ago
  You might be interested in https://github.com/ssloy/tinyrenderer/wiki https://github.com/ssloy/tinyrenderer/wiki
  - aidos 9y ago
    Good shout, thanks. I had that on my reading list a while ago but never got around to it. Thanks for the reminder.

by ixtli 9y ago

ixtli 9y ago

Though i think to fully appreciate this you would have had to have bashed your head against the wall of platform dependent opengl in the past...

cirowrc 9y ago
When I was still going to computer graphics classes the ThreeJS source code helped me learn a bunch - the code is pretty straightforward when it comes to the basic to at least get a scene and an OBJ loader working with some shaders.

aidos 9y ago

It's a world I'd like to enter more myself but I've found it's a little hard to get started. With a degree in maths / comp sci, I have a pretty good understanding of linear algebra. 20 years experience coding means I'm quite happy to hack away. Thing I've struggled with is all the background. People talk about shaders and launch straight into the details, but I've barely been able to find any background information that sets the scene. Last night I made a game with Unity, which was fun and pretty simple to start with and I'd like to understand more about it all. Where does someone with plenty of comp and maths knowledge but no 3D experience (other than tinkering with the likes of Blender) go to learn about it quickly?

HammadB 9y ago
To learn about shaders, I've found that some reading up on the graphics pipeline. Along with https://thebookofshaders.com/ https://thebookofshaders.com/ was been very helpful on giving me a foundation for shader programming. I was also like you, solid bg in CS/Linear Algebra but intimidated by the seemingly steep learning curve of graphics. I dabbled with Unity and now I've started to play more with shader programming and understanding GPU's.
accatyyc 9y ago
The way I learned was by figuring it out myself through hacking. I decided to start with a program that could set the color of a single pixel, then tried to figure out how to draw a line from that, and from that to a triangle. After that, try to use the Z value of your points to draw a box from lines with some kind of perspective. With a good background in math, most of these algorithms should be relatively simple for you to figure out. After that, you’re not too many lines of code from rendering full 3D models. Doing it this way, I learned how shaders work by having to figure out manually why they are actually needed. Here is my project, which can now render textured objects in real time with multiple light sources: https://github.com/accatyyc/c-3do https://github.com/accatyyc/c-3do I still have no idea how to do “correct” perspectives. This is just something I hacked together until it looked good. I can very much recommend doing a project like this. You will naturally figure out how 3D graphics work, and it’s simpler than it appears.
dyarosla 9y ago
I've found this is a great learning resource: https://webglfundamentals.org/ https://webglfundamentals.org/ Relevant shaders link here: https://webglfundamentals.org/webgl/lessons/webgl-shaders-and-glsl.html https://webglfundamentals.org/webgl/lessons/webgl-shaders-an...
westoncb 9y ago
Part of why it's difficult is that there are a tons of concepts belonging to 'real-time rendering' which three.js is built on top of. These are things like how a 3D scene is projected from a particular viewpoint using a 'camera', how lighting works, the split in vector/raster techniques for representing 3D shapes vs their surfaces, the role of shaders in modern GPU architectures etc. I'd recommend the book 'Real-time Rendering': https://www.amazon.com/Real-Time-Rendering-Third-Tomas-Akenine-Moller/dp/1568814240 https://www.amazon.com/Real-Time-Rendering-Third-Tomas-Akeni... Edit: I'd also add: I wouldn't bother learning much OpenGL/WebGL to begin with (except shader programming in GLSL, since there's no good alternative abstraction for that). If you end up liking working with 3D graphics, go back and learn some about it since it'll help you understand performance concerns better—but meanwhile, knowing it is just an optimization you don't need yet. It's true three.js is built on top of it, but the significant principles you need to use three.js effectively fall under real-time rendering, not OpenGL.
khedoros1 9y ago
At just a basic level: 15-ish years ago, 3D rendering APIs used what is called the "fixed function pipeline". Texture mapping, 3d-to-2d projection, and so on were limited to the specific functions implemented in the hardware of the video card and exposed by the 3D API you were using. The programmable pipeline requires you to define some programs called "shaders" that run on the graphics card and replace the previous fixed pipeline functions. Example: Say you feed a bunch of geometry information into the API (a list of vertices, faces that use those vertices, coordinates for textures, etc). The "vertex shader" receives 3D vertex coordinates (and possibly other values) and needs to output 2D screen coordinates. The hardware calculates which screen pixels will actually show which part of which face, and passes some coordinate information to a "pixel/fragment shader". The basic job of that shader is to read texture, color, and lighting information and decide what color should be output to the screen for a specific pixel (replacing the functionality of the lighting and texturing functions that were used in the fixed-function pipeline). I think that three.js adds another level of abstraction on top of the actual graphics APIs. Coming from a CS background, with a few years "in industry", I started by reading about the history of computer graphics, read some fixed-function 3D graphics tutorials, built a few toy programs, then moved to the shader pipeline, and built a few more toy programs with the things that I learned. Read theory, experiment to see how it maps to practice, refine your understanding, and then go back to reading, if necessary. If I'm remembering correctly, I mostly ended up using http://www.opengl-tutorial.org/ http://www.opengl-tutorial.org/, liberally supplemented with Wikipedia articles and random mathematics articles, as necessary. (obviously, this isn't focused on WebGL and Three.js, but the core concepts apply. It might make more sense to go for tutorials in the ecosystem you'd like to learn, rather than learning one system, then having the time and cognitive overhead of learning to map the concepts to a new system).
z3t4 9y ago
Engines hide all the fun stuff. It's nice when you just want to get a game made, but if you want to get into 3d you can start by making your own soft 3d engine, eg. no 3d api, only cpu. Hand code the 3d to 2d (screen) transformation. Write your own code that decide what color the triangles should be in. Then when you understand the domain, you can look into the low level 3d hardware api layer eg. WebGL for the web.
Jach 9y ago
You might be interested in https://github.com/ssloy/tinyrenderer/wiki https://github.com/ssloy/tinyrenderer/wiki
- aidos 9y ago
  Good shout, thanks. I had that on my reading list a while ago but never got around to it. Thanks for the reminder.