GLSL Immediate attribute update

I have a piece of code, publish on (https://github.com/vkuchinov/vkuchinov.github.io/tree/master/highlightShader), a live demo is http://vkuchinov.github.io/highlightShader/. On mouseover event, I am trying to set enabled attribute to 0, except one node.

...
           if(id < N){

                last_id = id;
                console.log("highlighted node: " + id);

                for(var i = 0; i < N; i++){ if(i != (id)) { enabled[i] = 0.0; } }
                points.geometry.attributes.enabled.needsUpdate = true;


            }else if(id != last_id){

                for(var i = 0; i < N; i++){  enabled[i] = 1.0; }
                points.geometry.attributes.enabled.needsUpdate = true;

            }
...

But still, mouse highlights several nodes at a time, so it’s more likely that points.geometry.attributes.enabled.needsUpdate = true; doesn’t actually updates attributes.

shot

Any suggestion?

As far as I can see, there is no need to process the entire attribute with a for loop. If you hover over an object, just check if the current id is different compared to the last id. If so, set the enabled value for the last id to 0 and for the new if id to 1.

BTW: I think you are using GPU picking not correctly. A picking texture based on a render target does not need the size of the renderer. So instead of doing this:

pickingTexture = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight );

do it like so similar to the official GPU picking example:

pickingTexture = new THREE.WebGLRenderTarget( 1, 1 );
1 Like

I suggest you implement GPU picking like demonstrated in the official example (study carefully how the pick() function is implemented).

1 Like

I have found solution of using two shaders.