O'Reilly logo

WebGL Beginner's Guide by Brandon Jones, Diego Cantor

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Time for action — testing some post-process effects

  1. Open the file ch10_PostProcess.html in an HTML5 browser.
    Time for action — testing some post-process effects

    The buttons at the bottom allow you to switch between several sample effects. Try each of them to get a feel for the effect they have on the scene. We've already looked at grayscale, so let's examine the rest of filters individually.

  2. The invert effect is similar to grayscale, in that it only modifies the color output; this time inverting each color channel.
    uniform sampler2D uSampler; varying vec2 vTextureCoord; void main(void) { vec4 frameColor = texture2D(uSampler, vTextureCoord); gl_FragColor = vec4(1.0-frameColor.r, 1.0-frameColor.g, 1.0-frameColor.b, ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required