├── 001_triangle ├── README.md ├── webgl.html └── webgpu.html └── README.md /001_triangle/README.md: -------------------------------------------------------------------------------- 1 | # WebGL 2 WebGPU - 001 - Triangle 2 | **Description**: 3 | In this first video, We're going to break things down into distinct functions and show mirror examples 4 | in WebGL and WebGPU. The areas are Init, Shader, Ubo, Mesh and Render. We'll learn how to setup each 5 | bit that we need to get a simple triangle rendered on screen. 6 | 7 | KEEP IN MIND. WebGPU is still being developed as I write this, so the code contained here may break at 8 | some point when the api gets changed around. This happened in the middle of developing this first lesson :) 9 | 10 | 11 | ### Links of Interest 12 | https://www.google.com/chrome/canary/ 13 | 14 | https://gpuweb.github.io/gpuweb/ 15 | https://github.com/gpuweb/gpuweb/ 16 | https://github.com/gpuweb/gpuweb/wiki/Implementation-Status 17 | https://github.com/gpuweb/gpuweb/tree/master/design 18 | 19 | https://redcamel.github.io/webgpu/ 20 | https://github.com/redcamel/webgpu 21 | 22 | https://github.com/austinEng/webgpu-samples 23 | https://developers.google.com/web/updates/2019/08/get-started-with-gpu-compute-on-the-web 24 | 25 | https://vulkan-tutorial.com/Drawing_a_triangle/Graphics_pipeline_basics/Introduction 26 | 27 | https://github.com/SaschaWillems/Vulkan/tree/master/data/shaders 28 | https://github.com/SaschaWillems/Vulkan/blob/master/examples 29 | 30 | 31 | ### Links 32 | * [Lesson on Youtube]( https://youtu.be/nLe4QMieQYs ) 33 | * [Youtube Series PlayList](https://www.youtube.com/playlist?list=PLMinhigDWz6f5Nm_GYGREYnaf9mzoNdjX) 34 | * [Twitter](https://twitter.com/SketchpunkLabs) 35 | * [Patreon](https://www.patreon.com/sketchpunk) -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # WebGL 2 WebGPU - Youtube Tutorial Series 2 | 3 | **Purpose** : 4 | This series is designed as a companion to my "Fun With WebGL 2" video series. The main 5 | series focuses on various topics related to building a game engine from scratch and all 6 | it's sub systems. This series will focus mostly on learning how to use the WebGPU API 7 | for rendering. With each lesson I plan to show both a WebGPU and WebGL2 8 | version of the same code to illustrate the differences and similarities between the 9 | two graphic APIs. The idea is to help transition our WebGL 2 knowledge into something more 10 | in tuned to WebGPU. 11 | 12 | As a driver for the series, We'll work on creating an Abstraction layer that will allow us 13 | to write a single 3D application with the ability to render to either API. The first being able 14 | to animate a 3D Skinned mesh on either API. This will become an example of how to build a framework 15 | that supports multiple graphic APIs. 16 | 17 | This can lead to further developments using WebAssembly where we can port the framework to rust so 18 | we can have a single code base that is able to support 3D Graphics on the web plus extend graphics 19 | support to handle a desktop API like Vulkan. 20 | 21 | 22 | **Youtube Playlist** : 23 | https://www.youtube.com/playlist?list=PLMinhigDWz6f5Nm_GYGREYnaf9mzoNdjX 24 | 25 | 26 | ### Fun With WebGL 2.0 27 | 28 | **Youtube Playlist** : 29 | https://www.youtube.com/playlist?list=PLMinhigDWz6emRKVkVIEAaePW7vtIkaIF 30 | 31 | **Lesson Git Respository** : 32 | https://github.com/sketchpunk/FunWithWebGL2 33 | 34 | **Fungi 3D Engine** : 35 | https://github.com/sketchpunk/Fungi 36 | 37 | 38 | ### SketchpunkLab Links 39 | * [Twitter](https://twitter.com/SketchpunkLabs) 40 | * [Patreon](https://www.patreon.com/sketchpunk) -------------------------------------------------------------------------------- /001_triangle/webgl.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 252 | 253 | -------------------------------------------------------------------------------- /001_triangle/webgpu.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 353 | 354 | 355 | --------------------------------------------------------------------------------