Send an attribute in the shader using addAttribute

Questions
,
1

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 attributesoriginX 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

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

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

Thanks!

2
  • 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 is better than posting screenshots of your code.

1 Like
3

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. :slight_smile:

4

Nice solution :+1: