caseif / js.nation

Real-time music visualizer written in JavaScript.
GNU Lesser General Public License v2.1
89 stars 28 forks source link

WebGL spectrum #20

Open caseif opened 4 years ago

caseif commented 4 years ago

Performance in Firefox is currently pretty bad (at least in my Linux distro, possibly altogether) because of canvas performance. While WebRender somewhat fixes this, it is currently still in testing and introduces some really strange behavior. Ideally, I would like to rewrite the spectrum with a shader-based renderer rather than continuing to use HTML5 canvas. The basic design will be as follows:

Vertex shader: This shader will accept n iterations of the spectrum data (unsure whether this will be pre-transformed in JS or not) and output an array describing the radius of the spectrum in steps of sigma. n is the number of concurrent time-offset spectra that will be rendered (the different colored spectra).

Fragment shader: This shader will accept the radius data from the vertex shader and determine which spectrum occupies that pixel (if any). Additionally, glow will be computed here - this will be the most impactful change to improvement, since canvas glow is really slow. This will also have the slight benefit of fixing the glow in old Edge, even though it is now superceded by Chromium Edge.