WebGL GLSL Shader one wave over the sphere

I need some like this

The same principle :slight_smile:

No, this is not a principle. What you indicated just animates the color, and I need to move the point in the form of a wave. Take a closer look at the image.

The same principle of taking a distance between a point in a geometry and the point you want the wave start from. Instead of perform it in fragment shader, do it in vertex shader.

1 Like

I’ll try. Thank you. Sorry I didn’t get it right away. I use a translator to understand your speech)

1 Like

Don’t worry. English is not my native language either :slight_smile:

Please, tell me how to make this material transparent, from your example?
To be transparent instead of black?

Code:

    var material0 = new THREE.MeshStandardMaterial({
        opacity:1,
        // wireframe: true,
        color: new THREE.Color('#000000'),
        transparent: true,
        blending: THREE.AdditiveBlending,
        blendEquation:THREE.ReverseSubtractEquation
    });

I thought you want it at the level of vertices, in vertex shader.

But answering your question: try to use transparent: true and something like this
gl_FragColor = vec4( col, 1. - finalStep ); instead of the last line in the fragment shader.

2 Likes

Oh, it’s so cool! Thank u!
Братик, ты на русском говоришь?
Can I donate for u?

Thks, prisoner849
https://jsfiddle.net/prisoner849/ghyb9v0o/

1 Like

@inverser
You’re welcome :beers:

Something more interesting and more colorful :slight_smile:

3 Likes

It is possible to do this without shaders? Just by changing positions attribute in a mesh?

Yes, of course.
But I’m not sure that doing this on JS side is a good way for stuff like that.

Could you please expand about why it is not a good way?

I am being trying to build something similar to your demo using just JS (I don’t know Shaders, actually first time doing anything with ThreeJS). Close I have got is this https://online-nemi.onrender.com/, using a displacementMap which is more or less the effect I want, but as a disadvantage I don’t have particles, which is what I really want.

Any reference picture of the desired result? And/or more detailed explanation?

Check CPU usage

2 Likes

If you open the demo right now, you will see a new Sphere with some lines in the middle, which is my logo (montogeek.com).

My idea is to:

  1. Create a sphere of particles with my logo.
  2. That ThreeJS scene is connected to a Websocket, when it receives new information, I want to do some effects, like a wave expanding from some point (like your demo) and change colors.

What I have tried:

  • Using PointsMaterial and copy the geometry of the sphere with the logo and animate the surface using just JS, failed because my math is bad.
  • Follow this tutorial Three.js Globe, but I can’t manage to export only <circles> from Illustrator.
  • Use different filters like displacementMap, but I can’t find a way to apply it to particles.

So, as you can see, my project is far more complex than my knowledge about ThreeJS and its possibilities, but I think that with your demo I could come up with something, it definitely seems that Shaders are the way to go for my case.

Thanks for the demo you linked, it will really help me!

Wow, yeah, I haven’t check that part. Thanks for bringing it up!

1 Like

@montogeek Just in case: Globe of points

1 Like