Hi all, does anyone know of any examples that create a “sonar effect” with three.js or raw webgl?
I’d like to create something like the following snippet: https://codepen.io/thith/pen/vEOObL
The geometries I’m hoping to create the pulse effect around are all 2D convex polygons, but I’m hoping to find examples of any geometries with pulsing effects so I can get some ideas for ways to implement some initial sketches.
Any tips or thoughts would be helpful!
If you’re willing to write your own shaders, you could use a simple plane geometry, then use one of Inigo Quilez’s SDF functions to draw a high-definition 2D shape in the fragment shader. That article has functions to draw circles, pentagons, triangles, etc. All you’d need to create the sonar effect then is to increase the radius while dropping the opacity!
How about just using two sprites and animate the opacity and scaling of one of them?
This is brilliantly simple. I can see immediately how this will work–thanks very much!
This is a really neat resource! My polygons can be rather complex (they’re user drawn convex hulls), and figuring out that shader code might make me go blind, but I love this idea. That said, I think I’ll start with the simple approach @Mungen87 proposes below as a first pass!