Check out a free preview of the full Advanced Creative Coding with WebGL & Shaders course

The "Custom Attributes Demo" Lesson is part of the full, Advanced Creative Coding with WebGL & Shaders course featured in this preview video. Here's what you'd learn in this lesson:

Matt shares an example of custom attributes that use buffer geometry, and allow more shader-specific complexity.


Transcript from the "Custom Attributes Demo" Lesson

>> This demo is page. I mean, I didn't end up going through each and every single one of these. But a lot of what we did is gonna be within these. Probably the biggest confusing one is going to be this last one. So this one is a little bit more advanced.

But it's similar to what we are doing but what we're doing in this demo is we're using a buffer geometry. So, instead of just saying a quasi hedron geometry, you can always put buffer in between and that's going to make it a buffer geometry which is, remember the difference with the regular geometry, all the vertices are defined as vector 3s.

But with the buffer geometry, all the vertices and the vertex data is defined as flat arrays of just x, y, z, x, y, z, x, y, z. And with this, we can actually use the flat arrays but then add in additional attributes. So in this case, I'm adding in a random vector and then in my shader, I'm able to access these attributes.

So here I'm adding an attribute for direction, and adding an attribute for strength. And then in my vertex shader, I'm saying attribute vec3 randomDirection attribute float randomStrength. So that each of these triangles is getting pushed out in a random direction and with a random strength. And so this demo is definitely a little bit more advanced but it's sort of building on the same stuff we've been talking about.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now