OpenGL Learning resources, beginner to master

Here are the learning resources I have been using for OpenGL in work & self study.

Learn as a beginner

Video Tutorial: (For domain knowledge)
The Cherno OpenGL series: https://www.youtube.com/playlist?list=PLlrATfBNZ98foTJPJ_Ev03o2oq3-GGOS2

The best OpenGL Tutorial so far. Explanations are clear and accurate, babysat me through the headache times:)

No need to follow every coding part as he was doing, since the version of OpenGL may be different. (My work is mainly focus on OpenGL ES). The main idea is understand how graphics pipeline works, understand the meanings of the main terms like VAO, VBO, EBO, and get familiar with common APIs for draw shapes or textures.

Website: https://learnopengl.com/

Best learning website with all needed knowledge and codes. Have been following this website to do all the practices. Each lesson includes detailed explanations and corresponding codes that I can directly have some hands-on test.

Learn from your favorite applications

Graphics technology is widely used in different kinds of applications, especially in games. To understand how your favorite application is rendering beautiful scenes on the screen, here are 2 main tools(Open source project) you can refer：

1. Gapid

Github link: https://github.com/google/gapid

Document page: https://gapid.dev/about/

Powerful tool developed and maintained by Google.

2. Renderdoc

Main page: https://renderdoc.org/

Github link: https://github.com/baldurk/renderdoc

Document page: https://renderdoc.org/docs/index.html

Note that for both tools, only supported API can be captured. They have great support in some kinds like Android mobile games developed in Unreal or Unity, but not all applications are easy to captured.

After getting a trace, you can review the opengl function calls and see how they are drawn and rendered as the final result.

Where to find more sample projects?

If you google OpenGL examples, you will only find some old, simple and duplicated examples, even the https://learnopengl.com/ website can offer better examples. But if you want to draw something very fancy, with very complicated effects, there is a special kind of OpenGL ES called WebGL, which uses pretty much similar APIs like real OpenGL shaders but slightly different.

By opening WebGL applications, it will render the shaders in your browser(Or other platforms like VS codes). There is a website that stores many WebGL projects that you can easily see the codes and final results with real-time rendering on web pages:

ShaderToy: https://www.shadertoy.com/

Exmaple:

ShaderToy provides tons of beautiful projects that can be running on your computer by a single click! This is also a very good tool for shader coders that they can see the render scenes in real-time. Also, you can transform it easily back to traditional OpenGL shaders easily, by using WebGL shaders as fragment shader and putting a passthrough vertex shader.(Some changes on API is needed)

Those are some resources helping me a lot in my daily work and study. It’s 2021 and thanks to the internet I don’t need to buy a textbook or pay for a course. I Feel free to leave a comment if you find some other resources that really helpful in studying OpenGL or useful in your daily work. I will keep this page updated while I find new things that improves my skills.