Yet another Music Visualizer [Update]

Showcase
1

Lotus Audio

I am sure there are lot of threejs based 3D music visualizers out there. Here’s my attempt.
The audio sample used in default is from Lotus Temple, New Delhi and the architecture of the building was an inspiration why I started making this after visiting the temple.

It is still a WIP and wanted to gather any comments.
Warning: It can freeze your browser on some machines.

Update:
I was having fun playing with this and updated it so it runs better everywhere. And added a new type of equaliser. I ended making it pretty modular following this pattern for collaborative design system for JavaScript.
I think it should run in VR/XR too, although I’m not sure because didn’t get the chance to try it yet.
Let me know if anyone would like to trying making a 3D equaliser.

Credit to the project which I used as a starting scaffold for this one.

1 Like
2

How are you animating your geometry? I’m getting 60FPS when no audio is playing but it drops to 3 FPS (and interrupted sound) when the audio plays.

1 Like
3

The petals in the are repeatedly removed and added to the scene which slows everything down.
I am using verbnurb to create the smooth NURBs surfaces. They look better (and is easier) than direct mesh manipulation.
Need to come up with a way to optimize that.

4

Oof, that sounds very resource-intensive. If you want to optimize to get a smooth 60FPS animation, you could look into generating the base geometry once, then animating it in the GPU via vertex shaders, kind of like this example: https://threejs.org/examples/?q=custom#webgl_custom_attributes

3 Likes
5

Thanks for the link!

I was thinking of that (although I am not too good with shader programming yet).
But from my understanding so far, for the vertex shader approach I would again be working with the mesh vertices (with no reference of the NURBS geometry used to create it) and I would need to learn a lot of NURBS math to correctly manipulate those mesh vertices to make it look similar to how a NURBS surface manipulation would look.

Reason for the NURBS preference:
They look more flowy and natural and the logic of their manipulation based on control points feels more intuitive.