Custom Shader Attributes

Help & Support
,
1

Hello fellow PC-coders,
I’m currently learning GLSL-Shaders with the great Course by SimonDev.
Currently I’m stuck at “Custom Attributes”, where he is creating a simple 16 entry float array, passing it as custom color attributes for a 4 vertices plane (for creating a simple color transition between the vertices)

I’ve tried my best to map this three.js tutorial to playcanvas, but I can’t get it to work.
I get no errors, but my test cube stays black.

See the project here:
https://playcanvas.com/editor/scene/1417369

I 've searched the forum and found this answere, which seems somewhat related.

Is there a simple solution / error I am missing here?

Thanks for any help.

2

For the vertex colors of a non-instanced mesh, you could use Mesh API. Here is an example of a procedural plane mesh with each vertex having own color:

https://playcanvas.com/project/1190134/overview/vertex-colors

Although not an attribute, but you could also pass it as a uniform to be used by shader. You probably have read Custom Shaders manual. We should probably add an example with an array there as well, but you could pass it like this:

// script
const myList = new Float32Array([0, 1, 2, 3, 4, 5, 6, 7]);
app.graphicsDevice.scope.resolve(`uSomeList[0]`).setValue(myList);

// shader
uniform float uSomeList[8];

If you wish to add some custom attributes to an instanced mesh, you can find an example here:

1 Like
3

Thank you very much, both examples are extremely usefull.
Could you make the Mesh API project public? I wanted to open it again this evening and got a 404 PC Ghost :frowning:

Thank you very much for your support!

1 Like
4

Yep, public now.

1 Like
5

Thank you!