🔒 Locked

GLSL Video Mixer (new demo)

OpenGL

Started by JavaCoolDude Mar 27, 2005 at 8:36 PM 6 replies 2.5k views

Original Post

JavaCoolDude

Mar 27, 2005 at 8:36 PM

Screenshot:

I've spent a lot of time working on this demo since converting the DirectShow video playback code from directx to OpenGL wasn't too obvious, and now I believe I have something pretty neat to show to the GL community. The one aspect that I'm the most proud of about this demo is the GUI; coming from a Java background, I decided to create a SWING-like widget collection and import it into my applications through XML. If you're looking into using my widgets in your existing or future work, take a look at the files in GUIUtils, and WindowsManager (the windowProcessor function) in ManagersUtils. If you have any questions, you can get in touch with me at abezrati at hotmail dot com. The GUI layout xml descriptor.


<Panel texturePath = "GUIElements.png"
       visible     = "false"
       font        = "Arial">

  <MaterialSurface callbackString = "1stVideo">
    <Dimensions   x =  "0.5" y = "0.5"/>
    <Position     x = "0.25" y = "0.25"/>
  </MaterialSurface> 

  <MaterialSurface callbackString = "2ndVideo">
    <Dimensions   x =  "0.5" y = "0.5"/>
    <Position     x = "0.25" y = "0.75"/>
  </MaterialSurface> 

  <MaterialSurface callbackString = "finalMix"
                   drawBounds     = "true">
    <BordersColor x = "000" y = "000" z = "255"/>
    <Dimensions   x =  "0.5" y = "0.5"/>
    <Position     x = "0.75" y = "0.25"/>
  </MaterialSurface> 

  <Panel name           = "1s Quarter"
         drawBounds     = "true"
         anchorPoint    = "CORNERLU">

    <BordersColor x = "000" y = "000" z = "255"/>
    <Dimensions   x = "0.5" y = "0.5"/>
    <Position     x = "0.0" y = "0.0"/>

    <Panel name           = "Shaders Collection1"
           drawBounds     = "true" 
           anchorPoint    = "CORNERRU"
           drawBackground = "true">

      <Dimensions  x = "75" y = "100"/>
      <Position    x = "-12" y = "10"/>
      <RadioButton callbackString = "ConeFilter"
                   anchorPoint    = "CORNERLU"
                   checked        = "true">
        <Text      string         = "3x3 Cone"/>
        <Position  x =   "5" y = "2"  />
      </RadioButton>   

      <RadioButton callbackString = "EdgeFilter"
                   anchorPoint    = "CORNERLU">
        <Text      string         = "Edge"/>
        <Position  x =   "5" y = "22"  />
      </RadioButton>   
   
      <RadioButton callbackString = "SepiaFilter"
                   anchorPoint    = "CORNERLU">
        <Text      string         = "Sepia"/>
        <Position  x =   "5" y = "42"  />
      </RadioButton> 

      <RadioButton callbackString = "InvertFilter"
                   anchorPoint    = "CORNERLU">
        <Text      string         = "Invert"/>
        <Position  x =   "5" y = "62"  />
      </RadioButton> 

      <RadioButton callbackString = "HSVFilter"
                   anchorPoint    = "CORNERLU">
        <Text      string         = "HSV"/>
        <Position  x =   "5" y = "82"  />
      </RadioButton> 
    </Panel>
 
    <Panel name           = "FPS"
           drawBounds     = "true" 
           anchorPoint    = "CORNERLU"
           drawBackground = "true">

      <Dimensions   x = "130" y = "30"/>
      <Position     x =  "10" y = "10"/>
 
      <Label>
        <Text string  = "Current FPS: 0.0" />
      </Label>
    </Panel> 

    <Panel name           = "1st Movie CP"
           drawBounds     = "true" 
           anchorPoint    = "CORNERLD"
           drawBackground = "true">

      <Dimensions  x = "170" y =  "80"/>
      <Position    x = "10" y = "-10"/>

      <Slider callbackString = "MovieProgress1"
              alphaFadeTime  = "0.75"
              progress       =  "0.0">
        <Position    x = "0.65" y = "0.3"         />
        <Text        string  = "Progress" />
      </Slider>

      <CheckBox callbackString = "Loop"
                checked        = "true">
        <Position    x =   "0.6" y = "0.75"  />
        <Text        string  = "Enable Looping" />
      </CheckBox>

      <Button callbackString = "PlayMovie">
        <ButtonColor x =   "0.8" y =  "0.8" z="0.8"/>
        <Position    x =   "0.15" y = "0.35"       />
        <Text        string  = "Play" />
      </Button>

      <Button callbackString = "StopMovie">
        <Text        string  = "Stop"/>
        <Position    x =   "0.15" y = "0.75"  />
      </Button>
    </Panel>

    <Button callbackString = "LoadMovie"
            anchorPoint    = "CORNERRD">
      <Text        string  = "Load"/>
      <Position    x =   "-10" y = "-10"  />
    </Button>
  </Panel>


  <Panel name           = "2nd Quarter"
         drawBounds     = "true"
         anchorPoint    = "CORNERLU">

    <BordersColor x = "000" y = "000" z = "255"/>
    <Dimensions   x = "0.5" y = "0.5"/>
    <Position     x = "0.0" y = "0.5"/>

    <Panel name           = "Shaders Collection2"
           drawBounds     = "true" 
           anchorPoint    = "CORNERRU"
           drawBackground = "true">

      <Dimensions  x = "75" y = "100"/>
      <Position    x = "-12" y = "10"/>
      <RadioButton callbackString = "ConeFilter"
                   anchorPoint    = "CORNERLU"
                   checked        = "true">
        <Text      string         = "3x3 Cone"/>
        <Position  x =   "5" y = "2"  />
      </RadioButton>   

      <RadioButton callbackString = "EdgeFilter"
                   anchorPoint    = "CORNERLU">
        <Text      string         = "Edge"/>
        <Position  x =   "5" y = "22"  />
      </RadioButton>   
   
      <RadioButton callbackString = "SepiaFilter"
                   anchorPoint    = "CORNERLU">
        <Text      string         = "Sepia"/>
        <Position  x =   "5" y = "42"  />
      </RadioButton> 

      <RadioButton callbackString = "InvertFilter"
                   anchorPoint    = "CORNERLU">
        <Text      string         = "Invert"/>
        <Position  x =   "5" y = "62"  />
      </RadioButton> 

      <RadioButton callbackString = "HSVFilter"
                   anchorPoint    = "CORNERLU">
        <Text      string         = "HSV"/>
        <Position  x =   "5" y = "82"  />
      </RadioButton> 
    </Panel>
 
    <Panel name           = "2nd Movie CP"
           drawBounds     = "true" 
           anchorPoint    = "CORNERLD"
           drawBackground = "true">

      <Dimensions  x = "170" y =  "80"/>
      <Position    x = "10"  y = "-10"/>

      <Slider callbackString = "MovieProgress2">
        <Text        string  = "Progress"/>
        <Position    x = "0.65" y = "0.35"/>
      </Slider>
 
      <Button callbackString = "PlayMovie">
        <Text        string  = "Play"/>
        <Position    x =   "0.15" y = "0.35" />
      </Button>

      <Button callbackString = "StopMovie">
        <Text        string  = "Stop"/>
        <Position    x =   "0.15" y = "0.75"  />
      </Button>

      <CheckBox callbackString = "Loop"
                checked        = "true">
        <Text      string  = "Enable Looping"/>
        <Position  x =   "0.6" y = "0.75"  />
      </CheckBox>

    </Panel>

    <Button callbackString = "LoadMovie"
            anchorPoint    = "CORNERRD">
      <Text        string  = "Load"/>
      <Position    x =   "-10" y = "-10"  />
    </Button>

  </Panel>

  <Panel name = "4th Quarter">

    <Dimensions  x = "0.5" y = "0.5"/>
    <Position    x = "0.75" y = "0.75"/>

    <Slider callbackString = "Fade"
            progress       =  "0.5">
      <Text        string  = "Fade"/>
      <Position    x = "0.5" y = "0.15"/>
    </Slider>

    <Slider callbackString = "brightness"
            progress       = "0.2">
      <Text        string  = "Brightness:1.00"/>
      <Position    x = "0.25" y = "0.6"/>
    </Slider>
    
    <Slider callbackString = "contrast"
            progress       = "0.6">
      <Text        string  = "Contrast:1.00"/>
      <Position    x = "0.75" y = "0.6"/>
    </Slider>

    <Slider callbackString = "saturation"
            progress       = "0.5">
      <Text        string  = "Saturation"/>
      <Position    x = "0.25" y = "0.8"/>
    </Slider>
    
    <Slider callbackString = "hue"
            progress       = "0.5">
      <Text        string  = "Hue"/>
      <Position    x = "0.75" y = "0.8"/>
    </Slider>
  </Panel>

  <TexCoordsDesc xStart        =   "0"
                 yStart        =   "0"
                 xEnd          =  "65"
                 yEnd          =  "66"
                 type          =   "1"/>
        
  <TexCoordsDesc xStart        =   "66"
                 yStart        =   "1"
                 xEnd          =  "129"
                 yEnd          =  "66"
                 type          =   "2"/>

  <TexCoordsDesc xStart        =  "131"
                 yStart        =   "0"
                 xEnd          =  "165"
                 yEnd          =  "34"
                 type          =   "4"/>

  <TexCoordsDesc xStart        =  "0"
                 yStart        =  "67"
                 xEnd          =  "64"
                 yEnd          =  "131"
                 type          =   "5"/>

  <TexCoordsDesc xStart        =  "65"
                 yStart        =  "67"
                 xEnd          =  "129"
                 yEnd          =  "131"
                 type          =   "6"/>
</Panel>

PS: Saturation and Hue sliders don't work simply because I have no clue how to implement these filters... Demo binaries. Demo source and build files. Demo util files.

Genjix

Mar 28, 2005 at 3:02 AM

nice :) I don't spose your gui library has any win32 specific code?

ff8

Mar 28, 2005 at 5:37 AM

Woow great player :)
Edit: BTW can you give me your Video loader if you don mind

.

[Edited by - ff8 on March 28, 2005 5:37:48 AM]

JavaCoolDude

Mar 28, 2005 at 5:56 AM

As a matter of fact there is only one thing about my GUI that is win32 dependent:
The window listener.
However, I assume there is a similar callback function in Linux or Mac that handles all the mouse clicks/events.
BTW the video loader is located in AppUtils/DVTexture.h/cpp :)

ff8

Mar 28, 2005 at 6:00 AM

thank you :)

Genjix

Mar 28, 2005 at 9:51 AM

i should be able to replace with sdl or something similar.

JavaCoolDude

Mar 28, 2005 at 7:17 PM

Let me know how it goes :)
I'm really sorry for the lack of documentation, but if you have any questions, don't hesitate and send me an email or something.
BTW, I updated the demo with even better looking buttons since the previous ones didn't scale too well as their dimensions got bigger. With these new ones, no matter how big your button is, it would always look really good.
I should add a new filter or two and notify you guys when it's done.
Peace.
I also have changed the way my shaders are scripted; now you can specify in the xml file what part is the vertex shader and what other is the fragment. You can also link shaders together (must be both shaders!! You can't possibly link a vertex shader and a fragment program)

Examples taken out of the demo;
Vertex and Fragment SHADERS:

<Shaders    linkProcessors    = "true"    vertexProcessor   = "VERTEX_SHADER"   fragmentProcessor = "FRAGMENT_SHADER">    <VERTEX_SHADER>    <RawData>      void main(void)      {         gl_TexCoord[0] = gl_MultiTexCoord0;              gl_Position    = ftransform();      }    </RawData>  </VERTEX_SHADER>  <FRAGMENT_SHADER>    <Uniform name = "texOffset" size = "2" type = "float" x = "0.001953125"                                                           y = "0.001953125"/>    <Uniform name = "texture"   size = "1" type = "int"   x = "0"  />    <RawData>      uniform sampler2D texture;      uniform vec2      texOffset;       void main(void)      {        float weights[9];        vec2  offsets[9];        weights[0] = 2.0; weights[1] = 2.0; weights[2] = 2.0;        weights[3] = 2.0; weights[4] = 5.0; weights[5] = 2.0;        weights[6] = 2.0; weights[7] = 2.0; weights[8] = 2.0;        offsets[0] = vec2(-texOffset.x, texOffset.y);        offsets[1] = vec2( 0.0, texOffset.y);        offsets[2] = vec2( texOffset.x, texOffset.y);        offsets[3] = vec2(-texOffset.x, 0.0);         offsets[4] = vec2( 0.0, 0.0);        offsets[5] = vec2( texOffset.x, 0.0);        offsets[6] = vec2(-texOffset.x,-texOffset.y);        offsets[7] = vec2( 0.0,-texOffset.y);        offsets[8] = vec2( texOffset.x,-texOffset.y);        for(int i = 0; i < 9; i++)          gl_FragColor += texture2D(texture, gl_TexCoord[0].xy + offsets)*weights;                gl_FragColor/= 21.0;      }    </RawData>  </FRAGMENT_SHADER></Shaders>

Vertex shader and Fragment PROGRAM:

<Shaders    linkProcessors    = "false"    vertexProcessor   = "VERTEX_SHADER"   fragmentProcessor = "FRAGMENT_PROGRAM">  <VERTEX_SHADER>    <RawData>      void main(void)      {         gl_TexCoord[0] = gl_MultiTexCoord0;              gl_Position    = ftransform();      }    </RawData>  </VERTEX_SHADER>   <!-- Assembly is l33t :P -->  <FRAGMENT_PROGRAM>    <Attributes local = "false"                name  = "texOffset"                x     = "0.00390625"                y     = "0.00390625" />    <RawData>!!ARBfp1.0     PARAM textureOffset   = program.env[0];     PARAM grayExtractor   = {0.30, 0.59, 0.11, 0.0};     PARAM offsetCoeffs[8] = {{-1.0, 1.0, 0.0, 0.0},                              { 0.0, 1.0, 0.0, 0.0},                              { 1.0, 1.0, 0.0, 0.0},                              {-1.0, 0.0, 0.0, 0.0},                              { 1.0, 0.0, 0.0, 0.0},                              {-1.0,-1.0, 0.0, 0.0},                              { 0.0,-1.0, 0.0, 0.0},                              { 1.0,-1.0, 0.0, 0.0}};     TEMP texCoords,  luminance1,          luminance2, colorSample;     MAD   texCoords  , offsetCoeffs[0], textureOffset, fragment.texcoord[0];     TEX   colorSample, texCoords, texture[0], 2D;     DP4   luminance1.x, grayExtractor, colorSample;     MAD   texCoords  , offsetCoeffs[1], textureOffset, fragment.texcoord[0];     TEX   colorSample, texCoords, texture[0], 2D;     DP4   luminance1.y, grayExtractor, colorSample;     MAD   texCoords  , offsetCoeffs[2], textureOffset, fragment.texcoord[0];     TEX   colorSample, texCoords, texture[0], 2D;     DP4   luminance1.z, grayExtractor, colorSample;     MAD   texCoords  , offsetCoeffs[3], textureOffset, fragment.texcoord[0];     TEX   colorSample, texCoords, texture[0], 2D;     DP4   luminance1.w, grayExtractor, colorSample;     TEX   colorSample, fragment.texcoord[0], texture[0], 2D;     DP4   luminance2.x, grayExtractor, colorSample;     MAD   texCoords  , offsetCoeffs[4], textureOffset, fragment.texcoord[0];     TEX   colorSample, texCoords, texture[0], 2D;     DP4   luminance2.y, grayExtractor, colorSample;     MAD   texCoords  , offsetCoeffs[5], textureOffset, fragment.texcoord[0];     TEX   colorSample, texCoords, texture[0], 2D;     DP4   luminance2.z, grayExtractor, colorSample;     MAD   texCoords  , offsetCoeffs[6], textureOffset, fragment.texcoord[0];     TEX   colorSample, texCoords, texture[0], 2D;     DP4   luminance2.w, grayExtractor, colorSample;     MAD   texCoords  , offsetCoeffs[7], textureOffset, fragment.texcoord[0];     TEX   colorSample, texCoords, texture[0], 2D;     DP4   colorSample.z, grayExtractor, colorSample;        MAD   colorSample.x, 2.0, luminance2.y, colorSample.z;     MAD   colorSample.x,-2.0, luminance1.w, colorSample.x;     ADD   colorSample.x, colorSample.x, luminance1.z;     ADD   colorSample.x, colorSample.x,-luminance1.x;     ADD   colorSample.x, colorSample.x,-luminance2.z;     MAD   colorSample.y, 2.0, luminance2.w, luminance2.z;     MAD   colorSample.y,-2.0, luminance1.y, colorSample.y;     ADD   colorSample.y, colorSample.y, colorSample.z;     ADD   colorSample.y, colorSample.y,-luminance1.x;     ADD   colorSample.y, colorSample.y,-luminance1.z;     MUL   colorSample.z, colorSample.x, colorSample.x;     MAD   colorSample.z, colorSample.y, colorSample.y, colorSample.z;       RSQ   colorSample.z, colorSample.z;     RCP   colorSample,   colorSample.z;     MAD   result.color, -1.0, colorSample, 1.0;     END      </RawData>   </FRAGMENT_PROGRAM></Shaders>

PS: With the next version, all the widgets will be able to specify and request their own fonts with different sizes, bold or italic etc...

[Edited by - JavaCoolDude on March 28, 2005 8:17:48 PM]

JavaCoolDude

Mar 29, 2005 at 10:07 AM

All sliders are now active and working, enjoy the final result :)

Topic Locked

This topic has been locked by a moderator. New replies are not allowed.