First i want to see how hard i can push a mobile device, in my mobile works at 25fps +o-... but its 6 years old. My friends told me it runs at 60fps on hig end mobiles.
Based on two textures : 32x32 for square operations and 1024x1 for lineal operations. Red channel has the Frequency, and green channel the TimeDomain of the song.
- 32*32 plane to use Frequency array and move y-axis of the mesh in a shader (red channel)
- 256 Bars moved using a vertex shader
- Fragment shader Oscyloscope (green channel)
- Fragment shader Circular Frequency (red channel)
- Fragment shader Circular TimeDomain (green channel)
- Fragment shader Circular Distortion (red channel)
- Fragment shader Perlin sun (a mix of circular freuency + circular time domain + perlin noise)
- Vertex shader bars sphere 3d
- Fragment shader spiral tunnel
- Shadows added for all the effects
You can drag & drop a song of your hard disk into the experience to play it.
live version : Audio-PlayGround
Audio-PlayGround5.mp4
You need run npm install once to get all dependencies.
And then you can use npm run dev to start the local test server.
Im creating a separate project for each shader effect. You can find them in : Codepen AudioShaders
Audio-Shaders live versions :
AudioShaders.1.mp4
Live version : Audio-Shader #1 Osciloscope
AudioShaders.2.mp4
Live version : Audio-Shader #2 Circular osciloscope
AudioShaders.3.mp4
Live version : Audio-Shader #3 Sunset
AudioShaders.4.mp4
Live version : Audio-Shader #4 Onion
AudioShaders.5.mp4
Live version : Audio-Shader #5 YinYang
AudioShaders.6.mp4
Live version : Audio-Shader #6 YinYang Punk
AudioShaders.7.mp4
Live version : Audio-Shader #7 Floor and Bars
AudioShaders.8.mp4
Live version : Audio-Shader #8 Perlin SUn
Audio-Hole.mp4
Live version : Audio-Shader #9 Audio Hole
Take a look to the new Audio-Hole with 6 channel analisis (bass, drum, piano, other, vocal, and full song) and with a loot of effects : https://github.com/devildrey33/Audio-Hole