Steemverse - Graph optimizations and decorating details

Steemverse is Steem top communities 3D force-directed graph visualization using ThreeJS Javascript 3D drawing library and 3D Force-Directed Graph layout engine.
https://steemverse.com

According to plans, I have focused on performance optimizations first. They were needed before further development of new features to graph. Main areas to improve were to reduce heavy draw calls, adjust graphic resolutions, show simple progress bar when data loads and update deprecated three.js methods.

https://github.com/mys/steemverse/issues

Remove SpriteText for account nodes

During initial development of Steemverse, every node has its own label displayed. For performance purposes the accounts have it hidden. However SpriteTexts for them were generated still. Near 5 second lag occured during data load and meshes creation. Removing this not only helped avoid lag but reduced initial loading time by about 5 seconds.

Reduce draw calls

Disable sorting graph objects every draw frame. Sorting data is default setting of three.js library. Documentation says it helps drawing objects in specific order we would like. Not needed in this project, because the order of generating meshes are the order of drawing them here. +5 frames per second ;)

Improve textures and update deprecated methods

There were 2 warnings going out of three.js library:

THREE.WebGLRenderer: image is not power of two (500x1000). Resized to 256x512
THREE.ImageUtils.loadTexture has been deprecated. Use THREE.TextureLoader() instead.

Due to this Steem.jpg has been resized to 512x1024. I believe small numbers matters ;) and have huge impact if iterated billions of times. Same with old THREE.ImageUtils.loadTexture - moved to THREE.TextureLoader() too, which is asynchronous call and return us a handful callback.

LOD?

LOD - Level of Distance. This is technique of drawing things depend on camera distance. Helps reducing draw calls and improving FPS animations at the same time. However after weeks of thinking about it I have realized that creating many objects for each of LOD is huge RAM hungry. I can't let this to grow more in memory so I'm leaving LOD as an probable idea to realize in the future.

Visual improvements

Loading bar

New loading bar has been implemented on topbar. It shows the progress of data loading and engine cooldown till re set of each node. Additionally zooming animation was set for nice appeal effect. Animation stops when all data loads fully.

Skybox background

This is Steem verse. A verse of not only top communities and accounts but everyone else. Skybox is technique to set objects in a big cube. Each of this cube 6-walls are painted inside. Using properly matched images we can achieve widescreen background. For Steemverse the image of stars were used.

Moving directional particles for linked nodes

Communities are linked each other by their correlation in Steem posts. If their strength is high enough, the link is visible. Moving particles were added to show which community attracts to another. Small visual thing that changes static scene of whole verse.

Next to do

Communities - I would like to represent all of the top 100 communities independently on separate graphs. Right now Steemverse is visualization of #steem -around tags. Communites graphs would represent eg. #kr -around tags or #deutsch -related.

Links

https://github.com/mys/steemverse/pull/9