CODEWITHSUNDEEP
javascriptoptimizationthree.jswebgl
Morgan Codes
Morgan Codes

Reputation: 55

Optimization of Mesh Updates in Three.js / WebGL (How to Optimize a Large-ish Scale Music Visualizer?)

I am new to Three.js / WebGL and am building a half-game, half-music visualizer that involves many different geometries that move through the scene in various ways. I've researched optimization as best I can, and followed a lot of advice - I've combined a lot of my repeated geometries (for example, each cube geometry that makes one building in the city) into large GeometryUtils merges, I've removed some textures, and I'v reduced the curve segments of my text geometries to just 1. But my app's performance still varies between 40 fps (pretty good, on a gaming computer) to 20 fps (on my 15 inch Macbook), to just 1 fps seemingly randomly on various friends' computers.

One thing that I haven't been able to get rid of, which I know to be costly, is the constant updating of vertices. I have a large mesh of Three.js text geometries, which I render all at the same time in an attempt to optimize. They need to look like they are falling from the sky - so I gave each text geometry an increasingly high y position, and I decrement the y position of each vertex by 5 each frame using a for loop.

I am also updating a lot of aspects of geometries during each frame, so that they respond to the music (which is loaded up as a buffer through the Web Audio API). I update the scale, emissive color of the material, and rotation, of one mesh each for every frame per second.

I have the following three specific questions:

  1. Is there a better way to update the position of a large mesh in Three.js (one from a geometry that has had many smaller geometries merged with it), without updating each vertex individually? If not, is there a more efficient way to optimize the way I am updating these vertices?

  2. Are any of the other operations I am doing on my meshes (updating scale, emissive color of material, or rotation), particularly costly? Is there a way to optimize them?

  3. Are there any ways I might not be aware of, besides trying my best to optimize for speed, to standardize the performance of my app across devices?

My source code is here: https://github.com/jaclynj/dancingcities/blob/master/public/main.js

And my site is here: dancingcities.heroku.com

Thank you!

Upvotes: 0

Views: 1558

Answers (1)

yaku
yaku

Reputation: 3111

You have multiple questions which are all more subjects for discussion than specific questions that can be answered without writing a book. However you could look into using a custom vertex shader to move your geometries around solely on GPU, using BufferedGeometry, or rendering at lower resolution (like half). Those come to mind.

Upvotes: 1

Related Questions