Modern 3D Graphics Beginner Projects in WebGPU ​

Too long; didn't read ​

I want to know how modern games draw flashy 3D world on my screen. I want to learn 3D Graphics. I know how to program but that's it.

Then you are ready to go. Shut up and start learning and coding now! Lesson 0 Intro.

More descriptions about this "course" ​

This is:

• A series of lessons and precanned projects for a 3D graphics new comer
  • Using WebGPU, a modern graphics API in web (as of 2023), backed by D3D12, Metal, Vulkan, etc.
  • Using Typescript. Here are Tutorials for programmers from other languages.
  • Boilerplates to keep you away from non-graphics related "yak-shaving" details. You can jump in and start programming 3D graphics stuff.
• Providing essential graphics knowledge to start working with real-world applications development, for your next job or your next projects.

This is for:

• People want to learn real modern and practical graphics knowledge used by the industry.

  OpenGL based lessons

  Some "modern" graphics learning projects still use OpenGL. Yes they are modern by the time they came out, but not anymore. OpenGL is an API first launched in 1992. Even its latest version 4.6 was released in 2017. Support for OpenGL on Mac is deprecated by Apple in 2018. The next-gen (well actually cur-gen) API like Vulkan and Metal came out around 2015.

  And it is 2023 now...

  non-GPU based lessons

  Projects from university courses are often based on some GUI framework (Qt) and ask you to write CPU only code (i.e. no shaders). While one can argue that you can learn the algorithm by writing CPU code without using any GPU API, to me it feels like you want to learn computer programming in 2023 but chooses to start with Pascal. Just like that almost no software today you are familiar with is built by Pascal, no games/engines/design tool that you are familiar with is built without using GPU API.

  Modern features missing in WebGPU

  Being a cross-platform and web graphics API that just come out, WebGPU isn't that modern. Features like native ray tracing API, mesh shader, multi-queue etc. are not available in WebGPU, yet. As a beginner you don't have to worry about these.

• People prefer to learn in a project-driven way (like me, as I usually become absent minded during lectures)

• People already know how to program, in any mainstream programming language. (C/C++, Java, C#, Python, Javascript, Typescript etc.) And that's the only prerequisite needed.

• People want to feel ease move on to real-world scenarios after this course.

This is not:

• A thorough tutorial for a specific graphics API: WebGPU in our case
  • webgpufundamentals.org is a good tutorial if you want to learn the WebGPU API specifically.
• A traditional univeristy style lecture-based course covering a more complete set of apsects of computer graphics, usually from professors with research background
  • UCSB GAMES 101 is one of them which is recent and available for public.
• A set of step-by-step tutorials to build ready-to-use 3D apps (Three.js, Babylon.js, Unity, etc.)
  • This lesson and project introduces the general 3D graphics knowledge behind these renderers/engines. You will feel more comfortable playing with those after knowing how they work underhood.

This set of tutorials and projects is initially made by shrekshao and open-sourced under the BSD-3-Clause license. Contributions are welcomed!