Sign in to follow this  

OpenGL GLSL Video Mixer (new demo)

This topic is 4677 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

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.

Share this post


Link to post
Share on other sites
nice :) I don't spose your gui library has any win32 specific code?

Share this post


Link to post
Share on other sites
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]

Share this post


Link to post
Share on other sites
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 :)

Share this post


Link to post
Share on other sites
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[i])*weights[i];

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]

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Similar Content

    • By _OskaR
      Hi,
      I have an OpenGL application but without possibility to wite own shaders.
      I need to perform small VS modification - is possible to do it in an alternative way? Do we have apps or driver modifictions which will catch the shader sent to GPU and override it?
    • By xhcao
      Does sync be needed to read texture content after access texture image in compute shader?
      My simple code is as below,
      glUseProgram(program.get());
      glBindImageTexture(0, texture[0], 0, GL_FALSE, 3, GL_READ_ONLY, GL_R32UI);
      glBindImageTexture(1, texture[1], 0, GL_FALSE, 4, GL_WRITE_ONLY, GL_R32UI);
      glDispatchCompute(1, 1, 1);
      // Does sync be needed here?
      glUseProgram(0);
      glBindFramebuffer(GL_READ_FRAMEBUFFER, framebuffer);
      glFramebufferTexture2D(GL_READ_FRAMEBUFFER, GL_COLOR_ATTACHMENT0,
                                     GL_TEXTURE_CUBE_MAP_POSITIVE_X + face, texture[1], 0);
      glReadPixels(0, 0, kWidth, kHeight, GL_RED_INTEGER, GL_UNSIGNED_INT, outputValues);
       
      Compute shader is very simple, imageLoad content from texture[0], and imageStore content to texture[1]. Does need to sync after dispatchCompute?
    • By Jonathan2006
      My question: is it possible to transform multiple angular velocities so that they can be reinserted as one? My research is below:
      // This works quat quaternion1 = GEQuaternionFromAngleRadians(angleRadiansVector1); quat quaternion2 = GEMultiplyQuaternions(quaternion1, GEQuaternionFromAngleRadians(angleRadiansVector2)); quat quaternion3 = GEMultiplyQuaternions(quaternion2, GEQuaternionFromAngleRadians(angleRadiansVector3)); glMultMatrixf(GEMat4FromQuaternion(quaternion3).array); // The first two work fine but not the third. Why? quat quaternion1 = GEQuaternionFromAngleRadians(angleRadiansVector1); vec3 vector1 = GETransformQuaternionAndVector(quaternion1, angularVelocity1); quat quaternion2 = GEQuaternionFromAngleRadians(angleRadiansVector2); vec3 vector2 = GETransformQuaternionAndVector(quaternion2, angularVelocity2); // This doesn't work //quat quaternion3 = GEQuaternionFromAngleRadians(angleRadiansVector3); //vec3 vector3 = GETransformQuaternionAndVector(quaternion3, angularVelocity3); vec3 angleVelocity = GEAddVectors(vector1, vector2); // Does not work: vec3 angleVelocity = GEAddVectors(vector1, GEAddVectors(vector2, vector3)); static vec3 angleRadiansVector; vec3 angularAcceleration = GESetVector(0.0, 0.0, 0.0); // Sending it through one angular velocity later in my motion engine angleVelocity = GEAddVectors(angleVelocity, GEMultiplyVectorAndScalar(angularAcceleration, timeStep)); angleRadiansVector = GEAddVectors(angleRadiansVector, GEMultiplyVectorAndScalar(angleVelocity, timeStep)); glMultMatrixf(GEMat4FromEulerAngle(angleRadiansVector).array); Also how do I combine multiple angularAcceleration variables? Is there an easier way to transform the angular values?
    • By dpadam450
      I have this code below in both my vertex and fragment shader, however when I request glGetUniformLocation("Lights[0].diffuse") or "Lights[0].attenuation", it returns -1. It will only give me a valid uniform location if I actually use the diffuse/attenuation variables in the VERTEX shader. Because I use position in the vertex shader, it always returns a valid uniform location. I've read that I can share uniforms across both vertex and fragment, but I'm confused what this is even compiling to if this is the case.
       
      #define NUM_LIGHTS 2
      struct Light
      {
          vec3 position;
          vec3 diffuse;
          float attenuation;
      };
      uniform Light Lights[NUM_LIGHTS];
       
       
    • By pr033r
      Hello,
      I have a Bachelor project on topic "Implenet 3D Boid's algorithm in OpenGL". All OpenGL issues works fine for me, all rendering etc. But when I started implement the boid's algorithm it was getting worse and worse. I read article (http://natureofcode.com/book/chapter-6-autonomous-agents/) inspirate from another code (here: https://github.com/jyanar/Boids/tree/master/src) but it still doesn't work like in tutorials and videos. For example the main problem: when I apply Cohesion (one of three main laws of boids) it makes some "cycling knot". Second, when some flock touch to another it scary change the coordination or respawn in origin (x: 0, y:0. z:0). Just some streng things. 
      I followed many tutorials, change a try everything but it isn't so smooth, without lags like in another videos. I really need your help. 
      My code (optimalizing branch): https://github.com/pr033r/BachelorProject/tree/Optimalizing
      Exe file (if you want to look) and models folder (for those who will download the sources):
      http://leteckaposta.cz/367190436
      Thanks for any help...

  • Popular Now