Code Monkey home page Code Monkey logo

realtimegreenscreen's Introduction

Real Time Green Screen Video Efect for iOS.

This is the sample code that accompanies the InformIT article, Green-Screen Video Effects for iOS: Video Processing with OpenGL ES. www.informit.com/articles/article.aspx?p=1946398

Wish you could use the green-screen effects from movies and TV shows with your iOS devices? You can! Erik Buck, author of Learning OpenGL ES for iOS: A Hands-on Guide to Modern 3D Graphics Programming, describes how to perform real-time video processing without impacting performance. Green-screen effects are just one of the cool capabilities! Experiment with the provided demo program and learn how to push out your boundaries.

Image of Figure1

Figure 1 Sample green-screen effect.

Image of Figure2

Figure 2 Images are composed of pixels with red, green, and blue elements.

Image of Figure3

Figure 3 There's an elephant outside the window.

Image of Figure4

Figure 4 The neighbor's lawn is very green.

realtimegreenscreen's People

Contributors

erikbuck avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

realtimegreenscreen's Issues

I use the fragment shader in the source code but green does not appear completely

I use this code but the green background turn transparent but not completely transparent.

I expect the green background disappear completely.

Is there anything I can improve for the code below?

varying highp vec2 vCoordinate;
uniform sampler2D uVideoframe;
uniform highp mat4 uMVPMatrix;
void main()
{
// lookup the color of the texel corresponding to the fragment being
// generated while rendering a triangle
lowp vec4 tempColor = texture2D(uVideoframe, vCoordinate);

// Calculate the average intensity of the texel's red and blue components
lowp float rbAverage = tempColor.r * 0.5 + tempColor.b * 0.5;

// Calculate the difference between the green element intensity and the
// average of red and blue intensities
lowp float gDelta = tempColor.g - rbAverage;

// If the green intensity is greater than the average of red and blue
// intensities, calculate a transparency value in the range 0.0 to 1.0
// based on how much more intense the green element is
tempColor.a = 1.0 - smoothstep(0.0, 0.25, gDelta);

// Use the cube of the of the transparency value. That way, a fragment that
// is partially translucent becomes even more translucent. This sharpens
// the final result by avoiding almost but not quite opaque fragments that
// tend to form halos at color boundaries.
tempColor.a = tempColor.a * tempColor.a * tempColor.a;

gl_FragColor = tempColor;

}

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.