Winamp Visualization Tutorial Hadi Fadaifard. Introduction MP3 has become quite popular in the past 6 years. Good compression Winamp: The most popular.

Winamp Visualization Winamp Visualization TutorialTutorial

Hadi FadaifardHadi Fadaifard

IntroductionIntroduction

MP3 has become quite popular in the past 6 years.MP3 has become quite popular in the past 6 years. Good compressionGood compression

Winamp: The most popular MP3 player for WindowsWinamp: The most popular MP3 player for Windows

Other popular players:Other popular players: XMMS (Linux)XMMS (Linux) iTunesiTunes RealplayerRealplayer Windows Media PlayerWindows Media Player

IntroductionIntroduction

All players have support for sound visualizationsAll players have support for sound visualizations

We will write a visualization plug-in for Winamp:We will write a visualization plug-in for Winamp: Free and most popular playerFree and most popular player Compact and user friendlyCompact and user friendly

OverviewOverview

Plugin format and calling mechanismPlugin format and calling mechanism Drawing mechanismDrawing mechanism Conclusions and ResultsConclusions and Results

Calling MechanismCalling Mechanism1

Plugin Module

Calling MechanismCalling Mechanism1

Plugin Module

winampVisHeader

Calling MechanismCalling Mechanism1

Plugin Module

Calling MechanismCalling Mechanism1

Plugin Module

Calling MechanismCalling Mechanism1

2

Plugin Module

winampVisHeader

Calling MechanismCalling Mechanism1

2

Plugin Module

winampVisHeader

winampVisModule

Calling MechanismCalling Mechanism1

2

Plugin Module

Calling MechanismCalling Mechanism1

2

Plugin Module

Calling MechanismCalling Mechanism1

2

Plugin Module

Drawing MechanismDrawing Mechanism

Winamp calls Winamp calls RenderRender every every delayMSdelayMS msecs. msecs.

Data required by Data required by Render Render (e.g. (e.g. waveformDatawaveformData, , spectrumDataspectrumData) is passed to ) is passed to RenderRender as a pointer to the as a pointer to the current current VisModuleVisModule..

No restrictions on how No restrictions on how RenderRender draws onto the draws onto the visualization window; it can use any hardware visualization window; it can use any hardware accelerated API (e.g. DirectX or OpenGL) or no API at accelerated API (e.g. DirectX or OpenGL) or no API at all.all.

We will use OpenGL.We will use OpenGL.

Render Function (simplified)Render Function (simplified)

Drawing The WaveformDrawing The Waveform

Improving Render FunctionImproving Render Function

A more complicated A more complicated RenderRender function: function:

1.1. Draw the Background.Draw the Background.2.2. Draw the Foreground: waveform and/or any other Draw the Foreground: waveform and/or any other

object in the sceneobject in the scene3.3. Save the frame buffer.Save the frame buffer.4.4. Add (blend in) the saved image to the background Add (blend in) the saved image to the background

image.image.5.5. Distort (transform) the background.Distort (transform) the background.

Improving Render FunctionImproving Render Function

Problem: Processing the background image (e.g. Problem: Processing the background image (e.g. blending, blurring, etc) is computationally expensive.blending, blurring, etc) is computationally expensive.

Solution: Use the Graphics hardware (through OpenGL):Solution: Use the Graphics hardware (through OpenGL):

Create a 2D grid that covers the entire window (Offline).Create a 2D grid that covers the entire window (Offline). Texture map the background onto the grid (Online).Texture map the background onto the grid (Online). Transform the grid (Online).Transform the grid (Online).

Improving Render FunctionImproving Render Function

Improving Render FunctionImproving Render Function

Improving Render FunctionImproving Render Function

Improving Render FunctionImproving Render Function

Improving Render FunctionImproving Render Function

Improving Render FunctionImproving Render Function

Render Function (improved)Render Function (improved)

Drawing the BackgroundDrawing the Background

Transform the Grid (Rotate, Scale, Translate, etc)

Draw the Texture-mapped Grid

ResultsResults

Winamp demoWinamp demo