# Send an attribute in the shader using addAttribute

**URL:** <https://discourse.threejs.org/t/send-an-attribute-in-the-shader-using-addattribute/3159>\
**Category:** Questions\
**Tags:** buffergeometry, shaders\
**Created:** [June 18, 2018, 3:55pm UTC](https://discourse.threejs.org/t/send-an-attribute-in-the-shader-using-addattribute/3159 "2018-06-18T15:55:34Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![AhmedR](https://avatars.discourse-cdn.com/v4/letter/a/5e9695/32.png) [@AhmedR](https://discourse.threejs.org/u/AhmedR)\
**Post date:** [June 18, 2018, 3:55pm UTC](https://discourse.threejs.org/t/send-an-attribute-in-the-shader-using-addattribute/3159/1 "2018-06-18T15:55:34Z")

</div>

Hi everyone!

In the scope of an academic project, I attempt to build a graph visualization tool using the Three.js library.

In order to improve the speed of the graph processing, I have to go through shaders to optimize as possible the rendering of big graphs.  
Til now, I succeeded to render the graph using shader, but all my nodes processing operations are still done in the CPU. To move all my processing into shaders, I need to convey an attribute composed of 2 float values from the head part of the code written in javascript to my shaders.  
I followed the example for the .addAttribute use in BufferGeometry. Basically, I added two different attributes **originX** and **originY** , and as a value, I set **new THREE.BufferAttribute (originToBufferX, 0)** where originToBufferX is a Typed array **Float32Array** of size **1** , and include the intended value to transport.  
This is how the part looks like:  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/c/cf29430a1d09e6c5a77c070d564439db2e092f3e.png)

Notice: I used here THREE.BufferGeometry as geometry.

\*While I set 0 as a parameter for the ItemSize of a **THREE.BufferAttribute** I would get at least a rendering in my visualization, but not as intended. And my console would point to the following shader error:  
**GL ERROR :GL\_INVALID\_VALUE : glVertexAttribPointer: size GL\_INVALID\_VALUE**  
\*If I set 1 as a parameter for the ItemSize of a **THREE.BufferAttribute** ( and what here would be more logic since I’m transporting a value of 1 item), I would not have any rendering and I would get the following error: **glDrawArrays: attempt to access out of range vertices in attribute 0**

For my shader code, I just wrote some simple statement just to test the outcome:  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/9/963e65c0a630934977158ca9a50888a136342b47.png)

Someone can help me with that issue. I’ve been working on it since days but I couldn’t reach any significant result.

Thanks!

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [June 18, 2018, 4:25pm UTC](https://discourse.threejs.org/t/send-an-attribute-in-the-shader-using-addattribute/3159/2 "2018-06-18T16:25:11Z")

</div>

- `itemSize` needs to be `1` in your case.
- `attributes.originX.verticesNeedUpdate` is wrong. The property you want to set is just `attributes.originX.needsUpdate`. But you don’t have to set it when initially creating an attribute.
- You need to add as many float values for `originX` and `originY` as your vertex count. Check the `count` property of the `position` attribute. If the value is 10, you need to add 10 float values to your attribute (since `itemSize` is one).

Besides, providing a [live demo](https://jsfiddle.net/f2Lommf5/) is better than posting screenshots of your code.

---

<div class="post-metadata">

**Author:** ![AhmedR](https://avatars.discourse-cdn.com/v4/letter/a/5e9695/32.png) [@AhmedR](https://discourse.threejs.org/u/AhmedR)\
**Post date:** [June 18, 2018, 5:02pm UTC](https://discourse.threejs.org/t/send-an-attribute-in-the-shader-using-addattribute/3159/3 "2018-06-18T17:02:02Z")

</div>

I’ve managed to resolve the issue. Thank you!  
My problem was, that the count of position attribute was a variable (since each time I can add or remove nodes). When I assigned geometry.attributes.position.count as itemSize for my Float32Array Item, the problem was resolved. 🙂

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [June 18, 2018, 7:32pm UTC](https://discourse.threejs.org/t/send-an-attribute-in-the-shader-using-addattribute/3159/4 "2018-06-18T19:32:13Z")

</div>

Nice solution 👍