WebGL GLSL Shader one wave over the sphere

Questions
, ,
21

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!

22

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

1 Like
23

@montogeek Just in case: Globe of points

1 Like
24

friends, if you need a planet, you can find it on github

[ru] docs
https://three.inverser.pro
[ru] videos: