The Thinkrium
The Thinkrium

Reputation: 1

How do I apply a suction effect to my THREE.js model using a vertex shader?

I don't have alot of experience with vertex shaders.

I have imported a model into Three.js and am creating a custom shader material that is showing the model fine

But when I apply the affect; it isn't working as intended

My goal is for the individual vertices to be sucked out of the model into a new location where they will reform into a new model that has also been imported successfully

The best way I can think of to explain what I'm thinking is how a black hole affects a near by star

Picture of a black hole to get the idea

Here is one of my models.

I am displaying it as a point cloud;

Picture of my imported THREE js model

Here is my shader

I have no idea how to make it shrink faster at the top till it all drains/sucks out from the top.

                
attribute float dist;
attribute float angle;
attribute float radius;

varying vec3 newPosition ;
  
uniform float time;      
      
void main() {
     
      float dist = length(position.xz);  
      float angle = atan(position.z, position.x); 
      float radius = dist  * ( 1.0 - log(time )) ;  
     
    
    if(radius < 0.1 ) { radius = 0.1; }
    
    
   newPosition = vec3(
    radius   * cos(angle),
    position.y + time,  
    radius * sin(angle) 
  );
  
     
    vec4 mvPosition = modelViewMatrix * vec4( newPosition, 1.0 );

    gl_PointSize =   ( 300.0 / - mvPosition.z );

    gl_Position = projectionMatrix * mvPosition;

}

Upvotes: 0

Views: 63

Answers (0)

Related Questions