Ask HN: Resources for Learning Graphics Programming

[dbetteridge]

Hey HN

I've predominantly always worked in Web dev but always had an interest in 3D graphics, modelling and games.

What are your best resources for me to go from 0 to being able to write my own (basic) graphics renderer, eventually I'd like to get to the point of rendering scenes but understand that might be a long haul.

[amne]

I see it's still up after 20+ years: NeHe at https://nehe.gamedev.net/

In 2005-ish I followed what is now called "legacy tutorials" and I just learned a lot about how rendering pipeline works in OpenGL + some basic 3d math and physics. The rope tutorial (https://nehe.gamedev.net/tutorial/rope_physics/17006/) was my favorite.

Also, my highschool math teacher was in awe when I was so familiar with vector math and matrices and it was so easy to grasp the concepts in class because I could visualize everything. This is a nod to a previous post here on HN: https://news.ycombinator.com/item?id=40983734

[user432678]

Sorry, no offence, but this is a terrible resource to start learning graphics. First of all good luck downloading those examples (most of the links are broken), then compile them (many examples were made for Visual C++ 6.0 or some niche IDE from 2000s). I loved NeHe around 2005 as well, learned a lot from it, even though later switched to web development and never used that knowledge. But this days better to choose something like https://learnopengl.com at least. Or better yet any resources on WebGL, since OP is a web dev. Concepts around shaders and modern programmable graphics pipeline still translates well compared to immediate mode OpenGL samples from NeHe.

[e19293001]

Thank you for this. I am planning to start teaching my 5-year-old mathematics now, just as I began teaching him to read when he was 2 years old. Now, he reads a lot, and his teacher has no difficulty explaining instructions during quizzes because he already knows how to read!

[sky2224]

I think the best place to start is by getting your hands dirty with a real deal API. https://learnopengl.com/ is a great place for that. Oh and the best part is that the book is FREE.

You'll need to be comfortable with C++, but even without in-depth knowledge of the language, the tutorial takes you quite far.

[rkharsan64]

https://learnopengl.com/ is a super popular recommendation, but I found it a bit lacking when trying to understand how things work. I tried using a college book instead, Computer Graphics Programming in OpenGL with C++ and found it more approachable.

[thomasikzelf]

I really liked https://webglfundamentals.org/ for learning the webgl api coming from a web background as well. The state diagram was also useful to understand the complicated api. There is also https://webgpufundamentals.org/ for the newer api.

[emmanueloga_]

+1 this is a great resource, and learning graphics with a web browser lowers a lot some barriers of entry.

Learning the lower end of graphics can be fun and a goal of its own, but you can also accomplish a lot and push more interesting things to your screen faster by using some readymade engine. As a web developer you may enjoy this (paid but very polished) ThreeJS course [1].

--

https://threejs-journey.com/

[cgg1]

This is the most thorough resource I’ve found: https://www.scratchapixel.com/

Though admittedly it is a bit chaotically organized.

That one combined with the ray tracing in 1 weekend series is a good start.

[johnnyanmac]

ScratchPixel's articles are some of the best mathmatical breakdowns of rendering I've seen all these years, along with perfect diagrams, charts, and formula noations. Defiitely worth its weight in gold if you approach topics from a logics/proof standpoint.

But man, I feel I was waiting for that path tracing article for 8 years now? It's not even on their recent roadmap. Treat the unreleased sections as wishlists instead of a "upcoming" section.

>Though admittedly it is a bit chaotically organized.

looks like they completely revamped the website (and their roadmap seemed focused on revamping existing articles over making new ones). The beginners section now seems to make enough sense if you were following a college raytracing course. The other sporadic articles are pushed farther down to prevent confusion.

[kristopolous]

I like this too. I even found a mistake and the authors were open to correcting it which is always a good sign

[qingcharles]

These courses always looked fantastic to me:

https://pikuma.com/courses/learn-3d-computer-graphics-progra...

[atan2]

That would be my recommendation as well. this was the first resource that made me really grok 3d graphics in an easy and approacheable way. the course is mostly speaking about cpu rendering but the math foundation is all there and it's nice to also be able to code a simple implementation together.

Good one.

[kinow]

I thought about Pikuma's courses when I read the title. Glad it was already mentioned here!

[DeathArrow]

I took the road the other way around, from being a game and graphics programmer to web development and never been happier.

That said I would start by learning three things in parallel: a game engine like Unreal, Unity, Godot, a graphics API like DirectX or Vulkan and algorithms and math. I quiet stress the last part: learning algorithms is very important to build something, understand how game engines work and being able to improve what you already have.

[dbetteridge]

Ugh I know, I did plenty of linear algebra, matrices and high level maths in uni and then basically lost all knowledge of it once I graduated and started in web-dev.

Time to bust out the khan academy courses I suppose.

[calebjosue]

Maybe You'd want to give a try to.

https://courses.edx.org/courses/course-v1:UCSanDiegoX+CSE167...

[rpcope1]

Even though some people will tell you old school OpenGL fixed function pipeline is bad or out of date or whatever, I still really liked learning from Lighthouse3D (http://www.lighthouse3d.com/tutorials/) and Edward Angel's book OpenGL: A Primer (https://www.pearson.com/en-us/subject-catalog/p/opengl-a-pri...).

[arnearne]

I can recommend https://m.youtube.com/playlist?list=PLplnkTzzqsZS3R5DjmCQsqu... for beginners. It's aimed to understand the basics of Rendering at the beginning and ends in some neat advanced topics. I would highly recommend doing the exercises. Just watching this is not enough and will get you to a point where you will feel like you are very capable, but you are probably not.

[luaKmua]

I'm a little surprised no one has recommended the Frank Luna books. They're great introductory books. I used the DX9/DX10 books during my education when writing my game engines. I haven't read the DX12 book, but DX9/10/11 were basically the same structure only updated for the new APIs.

https://www.amazon.com/Introduction-3D-Game-Programming-Dire...

[thewanderingben]

If textbooks are more your vibe, OP, I’d also look into Real Time Rendering. Solid foundations with later chapters delving into modern techniques. They keep their editions fairly fresh too!

[theoa]

https://mrdoob.com/projects/htmleditor/

;-)

[tehfonsi]

This is nice and pretty useless at the same time ^^

Running the same code in a stackblitz or codesandbox environment would give you syntax highlighting, auto completion and so on

[Cadwhisker]

This suggestion is not a step-by-step education resource, but Jendrik Illner has a great blog page which has a weekly roundup of graphics programming articles.

It can be quite a rabbit hole when you find that he's up to 38 pages of weekly roundup links going back to 2017.

https://www.jendrikillner.com/#posts

[timostrating]

Me and a friend build our own Graphics engines based on https://learnopengl.com I can highly recommend this to everyone who gets started with computer graphics. It is a lot of new information but not the most modern Graphics library, but the information will help you understand the field and pickup any other graphics library quicker. Once I had a small project up and running I started looking at https://emscripten.org/ to combine it with some web experiments and more easily share my work with other over the web. I also started looking at https://vulkan-tutorial.com/ and https://webgpufundamentals.org/ to experiment with geometry shaders.

Next to Realtime Graphics you could also dabble into the world of Ray-Tracing. Personally I'm still quite new to this field but my master thesis supervisor also gave lectures at an other university where they recoded a lot of lectures during Covid. Advanced Computer graphics at the UU for example https://ics-websites.science.uu.nl/docs/vakken/magr/2021-202... The course recommends https://raytracing.github.io/ as a resource to students, and I can also recommend this.

As a small note to end with, the website(s) of professors giving computer graphics are a true tressure trove of information: https://jacco.ompf2.com/ https://www.3dgep.com/cpp-fast-track-1-getting-started/

[badpun]

Check out graphicsprogramming sub-reddit, people ask that question there fairly frequently. Writing a real-time renderer basically comes down to learning a graphics API like Direct3D and then implementing various tricks and techniques from books like "Real-time Rendering".

[brudgers]

There are raytracing tutorials going back to the early 1990's at least (because there is one in Graham's Ansi Common Lisp).

Here is one in Lisp I googled: http://www.ulisp.com/show?2NWA

[johnnyanmac]

If I could ask a tangential question within this topic: How's the professional side of graphics programming these days? Maybe not right this moment since nothing in tech is great, but just the vibes and changes over the last decade. I got some 8 years in gaming, but would still like to one day turn my hobbyist toy renderers I do on the side into a chance to dig into some professional grade engines.

My current vibe is that it just seems impossible, with 30 different ways a graphics programming interview can go, and positions are shifting more to Unity/Unreal engine devs over someone who can manage/maintain a shader pipeline or dig deep into optimizing buffer queues and draw calls.

[chadcmulligan]

Povray source is available (povray.org), if you'd like to look at the source for a nice ray tracer, or things like ogre 3d (http://www.ogre3d.org) etc have source available.

[weinzierl]

POVRay is a great source for learning. I haven't looked at it for years, so I don't know how it aged, but it basically taught me C and graphics programming.

[johnnyanmac]

huh, so Pov ray is still updating after all these decades. I used that in a college course a decade ago and it felt dated. But it's a small but fully featured tool, so you can't really go wrong with it as a learning jumpstart. Good starting step and you can jump into pbrt later to see how a "middle grade" ray tracer operates.

I'm a bit less sure about Ogre3d. Another very old repository, but it's been through quite a few revisions over the years. I don't know how clean the code would be for a beginner approaching it. But if you learn by reading and changing code, it sure would be the exact challenge you are seeking.

[gield]

If you want a deep-dive into the mathematics as well, I really liked Ray Tracing from the Ground Up by Kevin Suffern [1]. The book focuses on the theory and mathematics of ray tracing, and uses C++ to build a ray tracer. The code however is simple and explained really well so you could adapt it to the programming language of your choice.

[1] https://www.oreilly.com/library/view/ray-tracing-from/978149...

[yogrish]

I found this one to be useful. OpenGL GUI based demos: http://www.songho.ca/opengl/

[ggambetta]

If you're interested in understanding the graphics algorithms and implementing them yourself, as opposed to using an engine or a library, check out https://gabrielgambetta.com/computer-graphics-from-scratch It guides you through writing a software rasterizer and a raytracer, and most of what you learn can be applied to GPU programming.