hoch / spiral-spectra

Polymer element for spectrogram visualization.
https://hoch.github.io/spiral-spectra
1 stars 2 forks source link

Improved rendering speed and visualization/navigation support #5

Open mcanthony opened 8 years ago

mcanthony commented 8 years ago

Hello Mr. Choi, I have been a long-time fan of your work and it was your paper on WAAX that first sparked my interest in getting serious about WebAudio a few years back, I have been closely monitoring progress in the WAAX library ever since, and I am excited to see the various Spiral projects stemming from it. I have chosen WAAX/Spiral as the basis for my forthcoming OpenDAWN project and I look forward to contributing UI/DSP/Audio-Vis work stemming from OpenDAWN to this project as appropriate.

At the moment I am focused on spectrographic visualization and editing modalities which I believe are beginning to show a lot of promise in the realm of audio interaction/manipulation, and more specifically, innovations in the application of modern image processing techniques in the manipulation of audio spectra.

One of my major goals is to bring photoshop-esque abilities to the realm of spectral editing in the browser and abroad, and I would love to hear any thoughts you have on this subject,

I would like to begin by contributing anything I can to this sprial-spectra project and get aquainted with your best practices. Could you outline any improvements slated for this project and in the realm of spectral rendering?

My initial test of this visualization yielded fairly slow rendering (on my slow machine), what would you think are the major bottlenecks that could use improving? I have been actively researching GLSL rendering techniques which I intend to apply rendering spectral data, which would be leveraged on devices that support it, with a fallback to Canvas2D (WebGL context) or Canvas for devices not supporting WebGL.

Is GLSL support something that may interest you in this/other rendering related projects? I would love to know your thoughts on all of this in general.

hoch commented 8 years ago

Sorry for the late response, I just got back from the vacation. First, thanks so much for the nice comments! Please find my answers inline:

One of my major goals is to bring photoshop-esque abilities to the realm of spectral editing in the browser and abroad, and I would love to hear any thoughts you have on this subject,

I agree that it is an exciting area to explore. My colleague Nick Bryan did fantastic work on the same topic and you might find it interesting. Having that kind of features on the web would be wonderful, but we decided that the JS engine is still not ready for the CPU-heavy MIR techniques.

I would like to begin by contributing anything I can to this sprial-spectra project and get aquainted with your best practices. Could you outline any improvements slated for this project and in the realm of spectral rendering?

That sounds awesome! Since I am working on multiple projects concurrently (almost without any help), any kind of contribution would be appreciated. I also still figuring out the best practice for these type of audio visualization, so I only can let you know what I am thinking for the road map of Spiral project.

My initial test of this visualization yielded fairly slow rendering (on my slow machine), what would you think are the major bottlenecks that could use improving?

Please note that this element is not targeting real-time audio analysis, but for visualizing a rendered audio buffer object. (i.e. OfflineAudioContext) From my experience, the bottleneck of the process lies in FFT. @rtoy did a fantastic job on implementation FFT with JS, but JS is still slow for the real-time analysis. You could use WebGL + shader for the graphics, but I doubt that it will make huge difference. With that said, I do not want to discourage you from trying it. Please try whatever you want, let me know your experience.

Is GLSL support something that may interest you in this/other rendering related projects? I would love to know your thoughts on all of this in general.

With the 3D context (WebGL + Shader), I think changing the scale (linearly or logarithmically) can be faster. I haven't thought about using it deeply, but I believe it is the ultimate milestone of this project.

Thanks! Looking forward to your contribution!