custom attributes using threejs

Question

I was reading on ThreeJS custom attributes and got confused about how to set them up.

So i've seen that we add an attribute to the geometry attribute list and then the same to the ShaderMaterial attributes list ?

My question is how to add custom attributes in 3js ?

Can you share some source code or a JSFiddle to let us know what you've tried already? It's a little hard to tell what you need without more context. — dethtron5000
– dethtron5000, Commented Apr 24, 2014 at 21:36
Search the three.js examples: threejs.org/examples/webgl_custom_attributes.html — WestLangley
– WestLangley, Commented Apr 24, 2014 at 22:02
I think i go it. So first i add an attribute to the geometry attribute list, call it Attrib1 Then on the the shader attributes, i've added that specific attribute to the list geometry.attributes = { Attrib1: { ... } } then in the material attributes: { Attrib1: { type: "f", value: null } } it seems to work. I came here because examples online were a bit confusing — user3570683
– user3570683, Commented Apr 24, 2014 at 22:52

mrdoob · Accepted Answer · 2014-04-25 22:19:25Z

3

The new version (r67) features RawShaderMaterial which allows full control of attributes/shaders. Here's an example:

If you want something less "raw" but still performant, here's an example using BufferGeometry and ShaderMaterial:

And, if you want to use Geometry here's an example of that too:

answered Apr 24, 2014 at 23:09

mrdoob

19.6k4 gold badges66 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Cool, RawShaderMaterial sounds much better to me. Thanks

That last example uses buffergeometry.. From what I see there isn't a way to pass custom attributes to the shaders using a normal geometry.