WebGL 2: Hardware Bugs, UBOs & Arrays

preview_player
Показать описание
Upload array data using Uniform Buffer Objects isn't hard, but it can lead to rendering bugs on some hardware. This video will step through the process of using UBOs and show you how to avoid any buggy renders, no matter what hardware your program is running on.

Other videos referenced in this tutorial:

You can find supplementary materials on this video series' GitHub page:

This series on WebGL 2 was produced for anyone who, like me, had major problems getting a firm understanding of WebGL's intermediate and advanced concepts. Every video is focused on a single concept. If I've done this well, you shouldn't really need to "get up to speed" before watching any of these videos. There are no external libraries. I'm not building up to a custom API or injecting any abstractions. And I don't expect you to have watched from episode #1 to get "how I'm doing things with WebGL."

Complete playlist:

Videos:

I really hope someone out there will find this series helpful.
  1. Andrew Adamson
  2. webgl
  3. webgl 2
  4. uniform buffer objects
  5. arrays
  6. hardware bugs
Рекомендации по теме
WebGL 2: Hardware 0:16:03

WebGL 2: Hardware Bugs, UBOs & Arrays

WebGL 2: Framebuffer 0:19:43

WebGL 2: Framebuffer Objects (The Basics)

WebGL 2: Uniform 0:15:59

WebGL 2: Uniform Buffer Objects

WebGL 2: Framebuffer 0:15:03

WebGL 2: Framebuffer Objects (The gnarly details)

WebGL 2: Transform 0:28:35

WebGL 2: Transform Feedback (for Particle Systems etc)

WebGL 2 Quickie: 0:03:21

WebGL 2 Quickie: Precision

WebGL2: Multisample anti-aliasing 0:19:52

WebGL2: Multisample anti-aliasing (framebuffer object technique 4)

WebGL 2: Objects, 0:05:52

WebGL 2: Objects, Targets & Binding

A Hardware Bug 0:00:42

A Hardware Bug

WebGL 2: Variable 0:24:25

WebGL 2: Variable Gaussian blur (framebuffer object Technique 3)

WebGL 2: Object 0:19:11

WebGL 2: Object Picking (framebuffer object technique 2)

WebGL 2: Element 0:08:51

WebGL 2: Element Arrays & drawElements()

WebGL 2: Directional 0:33:19

WebGL 2: Directional diffuse lighting

WebGL 2: Texture 0:17:39

WebGL 2: Texture Atlases or Sprite Sheets (Textures Part 3)

WebGL 2: Deferred 0:15:04

WebGL 2: Deferred rendering (framebuffer object technique 1)

WebGL 2: Attributes 0:14:51

WebGL 2: Attributes (Part 2)

WebGL 2: Instanced 0:13:23

WebGL 2: Instanced Drawing

WebGL 2: Textures 0:22:29

WebGL 2: Textures (Part 1)

WebGL 2: Arrays 0:17:07

WebGL 2: Arrays & Uniforms

WebGL 2: Visualizing 0:10:03

WebGL 2: Visualizing Projection (Camera Part 2)

WebGL 2: Attributes 0:16:14

WebGL 2: Attributes (Part 1)

WebGL2 : 099 0:25:50

WebGL2 : 099 : ECS P3: Transforms and Rendering

WebGL 2: Programs 0:06:59

WebGL 2: Programs (Hello World)

WebGL 2: Creating 0:16:37

WebGL 2: Creating binary model files

Комментарии
Автор

Good mention about changing vec3s to vec4s when using std140 :)

syntaxed
Автор

Awh man. Finally, an active tutorial about WebGL. Thanks a lot Andrew for your effort creating these

babahgee
Автор

Wow, what a scary collection of bugs! Thanks for pointing them out!

dominicprior
Автор

Thank you for the videos, they are super informative 😎. Thanks to you I started a project and also stumbled upon weird webgl2 behavior (maybe bug): I did some color calculation in fragment shader and in some situation an example output color was (0, 5, 0). On my PC the rendered color was clamped to green as (0, 1, 0) but my phone rendered white. Took me a few hours to figure that out 🙃. You could do a video about gotchas like that or performance tips.

jakubwegrzyn
Автор

Another option to recover the expressiveness is to use macros, I think... e.g. #define innerConeAngle extras.x

I think that would work... What do you think?

DiThi