Ask HN: How to self-learn graphics programming?

[Flex247A]

[zffr]

Linear algebra is really important for graphics programming, but there's really only a handful of concepts you need to get started (vectors, matrix operations (rotation, translation, scale)). This course is relatively short and should give you a good background on these topics: https://www.youtube.com/playlist?list=PLZHQObOWTQDPD3MizzM2x... . For me, I learned more from the course than my college level linear algebra class.

Other important things to learn are what Vector and Fragment shaders are. I think this course is a good intro for it: https://github.com/ssloy/tinyrenderer

Lastly, when you are ready to start writing real graphics code, you might want to consider using something like Metal if you are on macOS. I have found it to have a much better API than OpenGL. Here's a good book on the topic: https://gumroad.com/l/metalbyexample . I haven't used DirectX, but I imagine its probably much better than OpenGL too.

If you do want to use OpenGL, I found these to be good resources: https://open.gl and http://learnopengl.com/

[threatofrain → zffr]

IMO 3B1B's course for linear algebra is not good for Learning linear algebra, but it is great for Augmenting your geometric intuition. I don't believe his course ever claims any different.

I'd recommend instead Gilbert Strang, who teaches a full and well reputed course over at MIT.

https://www.youtube.com/watch?v=Cx5Z-OslNWE&list=PLUl4u3cNGP...

[arduinomancer → zffr]

Just to add here I wouldn't recommend TinyRenderer for beginners without first doing a normal graphics course.

I recently completed it and found the explanations really lacking for a lot of stuff. I had to do a lot of Googling outside of the course material to understand why we were doing things certain ways, and this is from someone who has already taken a few graphics classes in the past.

It's good as a guide on implementing a renderer from scratch though if you already know what's going on.

I would say for beginners: Linear Algebra --> graphics course --> tiny renderer if interested

[zffr → arduinomancer]

Interesting! My experience was a little different. I've never taken a formal graphics course, and was struggling with understanding shaders while self-teaching myself graphics programming.

For me, I couldn't really understand what vertex/fragment shaders were or why someone would design graphics libraries to use them until going through TinyRenderer. What helped me was being able to see an actual implementation of a vertex/fragment shader (and the renderer that used them) in regular code that I could understand/inspect.

[Flex247A → zffr]

Thanks!

[neonological]

Wait a bit until your done with mechanics in physics and you've finished Calculus and Linear Algebra. Then you will have the necessary foundational background required to pick up the math from just reading that cg book.

Don't worry about "getting the math background" these courses should be required at any university for any engineering major, so you'll be getting the necessary math regardless of your interest.

[tkinom → neonological]

It is ok to interleave programming with Math class.

By play some Unity Game tutorial along with Geometry, Trig classes, you will likely see math come alive in front of your eyes.

You will want to know more on how and why.

[sxp]

You can start from the bottom up or the top down. You will need a good math background for bottom up work, but you could also try learning graphics by starting from a high level framework and getting lower in the stack.

E.g, learn an open source 3D framework like three.js and build stuff with it. Once you get good building 3D scenes and apps, learn how to extend three.js with custom functionality. Then learn the low level WebGL APIs the three.js is built on top of and implement your own graphics framework. Since three.js is open source, you can learn quite a bit by just examining the code.

You could also do something similar with the Godot Engine or any other open source 2D/3D framework.

[kilojool]

It's possible you'd benefit from the GameDev.tv course on Math for Video Games. Available on Humblebundle at the €1 tier for 24 more hours. ;) https://www.humblebundle.com/software/learn-unity-game-devel...

[superbcarrot]

> Can you recommend me some primer books on graphics programming which do not assume much mathematical background?

Why not get the math background first? You're at university, now is the best time to take some math classes.

[bogwog]

The math is the main hurdle for this kind of thing for most people, but luckily it's not that hard. You don't need to be a mathematician, and can survive with a working knowledge of it. Also, the math you use in graphics programming is what you need to know anyways for most other game programming.

Ray tracing is a good way to start IMO, because it's easier to understand than rasterization, it's easy to write your own simple ray tracer, and it relies almost entirely on the math. So I definitely recommend finding some tutorials for that.

Peter Shirley's "ray tracing in one weekend" book is a popular one.

You could also look into doing ray marching instead of ray tracing, which is slightly more complicated, but fundamentally the same, you can actually see them in realtime on most hardware, even on mobile (examples: https://www.shadertoy.com/)

[hgs3]

You might like this video series [0] which explains how to write a simple 3D software renderer with only basic algebra and trigonometry.

[0] https://www.youtube.com/watch?v=Y_vvC2G7vRo&list=PLEETnX-uPt...

[bananicorn]

I know it's not what you asked for, but these articles helped me a lot with linear algebra - which you will most probably need in any case:

http://blog.wolfire.com/2009/07/linear-algebra-for-game-deve...

http://blog.wolfire.com/2009/07/linear-algebra-for-game-deve...

http://blog.wolfire.com/2010/07/Linear-algebra-for-game-deve...

[Flex247A → bananicorn]

Thanks! I just came across this website a few hours ago!

[jml7c5]

See https://www.realtimerendering.com/books.html#recommended

The RTR site is an incredible resource for anyone interested in the field. Note that their book ("Real-Time Rendering") is not an introductory text, but an intermediate overview that is best read after you've made yourself comfortable getting a few triangles on the screen using whatever API you prefer.

[max_]

Been wanting to get sometime & finally publish a graphics project too.

I think in 2021 if your looking to get in to graphics, your expected to at least know some ray tracing.

There is this ray tracing series I would recommend [0]

[0]: https://raytracing.github.io/

[100-xyz]

I was in a similar journey while working on my startup ToonClip.com which deals heavily with graphics.

There are 2 different areas. One is the geometry and the math. Second is the libraries that make the graphics.

What was fun for me, was thinking of an idea eg. make a circle move along a given path. Then evaluating the different libraries to see how to achieve it. Then, when the libraries themselves needed modification, jump into the mathematics, geometry and algebra. I did not read books but just looked up articles and videos that cover the topics of interest.

Its a lot of fun that combines math, art and programming.

Wish you lotsa success and fun :-)

[Flex247A → 100-xyz]

Thanks!

[ear7h]

As others have mentioned, having some formal math knowledge is good, in particular linear algebra and multivariable calculus (usually calc 3). Though that's not very practical...

I find that the hardest part of graphics programming is understanding all the boilerplate, setting up GPUs, buffers, etc. So I'd recommend skipping this part as you're learning since it's hardly rewarding. If you just want to draw pixels on a screen there's a few libs that do the heavy lifting and give a frame buffer to write to:

https://crates.io/crates/pixels https://crates.io/crates/minifb

Writing to a pixel buffer is the most low level way to do graphics programming, but it can also be the slowest in comparison to sophisticated libraries or using a GPU. I'd recommend doing some sort of experiment on a frame buffer to get familiar with it since it never goes away, just abstracted.

The next step up in complexity would be using a 2d or 3d rendering library. These provide primatives like circles or spheres that you can put together to make a larger scene. Here's some I've used:

http://raylib.com/ https://crates.io/crates/tiny-skia

You can put things together pretty easily with these libs. And they also let you skip the gpu boilerplate (I should note that tiny-skia works only in the CPU).

Lastly, you have shader programming (OpenGL, Vulkan, etc.). If you're writing "production code" you'll have to do some setting up of the GPU, and the actual graphics code will be in a separate shader language. Shader languages are similar to C but with restrictions that allow for a high level of parallism, making it extremely fast. If you want to get started with this I'd recommend playing around on a site like shadertoy[1] where you can start writing shaders right away. I haven't done much of this myself but as far as Rust goes I've seen a lot of references to the gfx crate:

https://crates.io/crates/gfx

I hope this helps

[1] https://www.shadertoy.com/

[Flex247A → ear7h]

Sorry for the late reply, but your comment is very helpful!

[theandrewbailey]

I was sort of at the same place at one time. I found a presentation years ago that would have helped, so here you go:

Steven Wittens: Making WebGL Dance https://www.youtube.com/watch?v=GNO_CYUjMK8

It doesn't actually get into the math until about 12 minutes in, but it might be illuminating. Matrixes, vectors, and how they are multiplied with each other are the fundamental magic of 3D graphics.

[jonsen]

I see you love computers. Falling in love with computer graphics implies loving some math too.

[giomasce → jonsen]

After all, computer science is basically a branch of mathematics.

[Flex247A → jonsen]

This made me smile :)

[atoav]

For a very low level entry (in the sense of maybe you never even programmed before) I'd totally recommend going through nature of code [1] and also playing around with the processing.org examples.

Once that reaches it's limits I'd go to something closer to the metal. A lot of the lessons/intuitions learned will be useful here as well.

[1]: https://natureofcode.com/

[O_H_E]

I have heard good things about The Book of Shaders https://thebookofshaders.com/

Their editor is pretty cool: http://editor.thebookofshaders.com/

[flipcoder]

As far as the math is concerned, 3D Math Primer is the book I always recommend starting with:

https://www.amazon.com/Math-Primer-Graphics-Game-Development...

[pcestrada → flipcoder]

This is an excellent book, and real breaks down the math into bite-sized chunks that can be easily consumed.

[ArtWomb]

Good thread! As many have voiced, the math is necessary for mastery. I can recommend Justin Solomon's lectures. Target audience is MIT students. High-level, but rather clear. Starts with a gentle linear algebra review and then into very tractable concepts behind Bezier curves, NURBS, etc.

https://www.youtube.com/playlist?list=PLQ3UicqQtfNuBjzJ-KEWm...

To learn from code instead dive right into the ThreeJS examples

https://threejs.org/examples/

Best of Luck!

[yawnxyz]

I saw this post and it gave me horrible flashbacks back to Computer Graphics class back in undergrad.

We had to build our own simple ray tracer from scratch. Those were some long, long all-nighters. I learned the hard way that you have to offset the rays ever, ever so slightly or you get some super bizarre effects that drove me crazy...

looking through other posts, there were definitely few or no tutorials back then, sigh.

Now I'm a UX engineer in health tech ;)

[kleer001]

> wanting to learn graphics programming

Can you be more specific about what graphics programming means to you?

Why get specific? It's an industry with dozens of specializations along the technical spectrum.

[Flex247A → kleer001]

Sorry for the late reply, but I am looking to understand how applications like Blender / Godot / Unity work at a lower level, specifically how they render 3D objects.