Learning WebGL

[wipfli]

I would like to learn more about WebGL. If anyone has tips for good tutorials and other resources, feel free to share...

[wipfli]

https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial

[wipfli]

https://engineering.monstar-lab.com/en/post/2022/03/01/Introduction-To-GPUs-With-OpenGL/

[ghost]

I would like to learn more about WebGL. If anyone has tips for good tutorials and other resources, feel free to share...

In general, I'm not sure if the maplibre-gl-js repository is the ideal place for this, it affects many different projects, so I expect that other platforms have collected resources to learn WebGL already. Why duplicate the effort?

---

Anyhow, here are some recommendations (somewhat advanced topics though):

https://webglinsights.github.io/index.html is a go-to resource for oddities with WebGL implementations.

I also recommend https://github.com/Microsoft/angle/wiki/Getting-Good-Performance-From-ANGLE

Note that both resources linked above aren't 100% true anymore. It still gives some food for thought - always keep in mind that the majority of your userbase won't run WebGL through WebGL or even OpenGL drivers - there's a lot of abstraction which can add considerable overhead.

I also recommend reading the OpenGL / WebGL specification - pay attention to the minimum limits of features (= the absolute minimum an implementation has to support). Many implementation only implement the bare minimum. ANGLE abstraction sometimes causes weird limits, too (as some host features are partially required for the implementation).
There are some oddities in the OpenGL spec; example: vertex textures are required, but it's allowed for the implementation to support 0 of them (meaning the feature exists, but its unusable).

Regarding graphics programming in general, I can recommend the following:

Also I try hard to push premultiplied alpha: so read up on that https://github.com/dtrebilco/PreMulAlpha

A good font rendering technique is in https://steamcdn-a.akamaihd.net/apps/valve/2007/SIGGRAPH2007_AlphaTestedMagnification.pdf

Some good math is in https://www.youtube.com/watch?v=GpsKrAipXm8 and https://www.youtube.com/watch?v=mr5xkf6zSzk

I also liked https://www.youtube.com/watch?v=YPy2hytwDLM because it focuses on complexity from simple concepts (= good performance).

Tool wise, I can recommend these:

As a WebGL debugger (= a debugger which specifically focuses on your usage of a WebGL canvas / WebGL commands), use https://spector.babylonjs.com/

I'd also recommend https://github.com/mrdoob/stats.js/#bookmarklet to get a rough idea about the performance (or the browsers performance monitor; although I have had trouble with dev tools slowing the website down, so the bookmarklet helps).

I also can recommend the Chrome JS debugger a lot over the Firefox JS debugger - this isn't specific to WebGL, but still important. Note that I'm still unhappy with Chrome JS debugger, too (compared to native tools like gdb).
The Chrome devtools also has a "Rendering" section which has some useful features which helps with debugging non-WebGL portions of a website (in maplibre, this might affect things like popups / HTML markers).

[wipfli]

Thanks, @JannikGM :)

[wipfli]

This website is also quite fun. It sort of shows you the state of the different webgl things...

https://webglfundamentals.org/webgl/lessons/resources/webgl-state-diagram.html?exampleId=triangle#no-help