Custom Shader Effects

Custom Shader Effects

[Update]: Some really cool shaders being shared in the forums here and here.

One of Corona’s major themes for this year was graphics, and in particular, giving you more “under the hood” access to our graphics engine.

Fragment/Vertex Kernels

Starting in daily build 2015.2560, we are giving you the ability to create custom shader effects. If you’re familiar with writing shaders in GLSL-ES, then you’ll feel right at home writing shaders in Corona.

We’ve structured things so you don’t need to write a full shader program. Instead, you write snippets of GLSL-ES shader code that we call kernels. Instead of a full vertex shader program, you write a vertex kernel; instead of a full fragment shader program, you write a fragment kernel.

This way, you can focus on creating and implementing cool visual effects without worrying about the surrounding scaffolding. In fact, we’ve used this same exact system for all the built-in shader effects in Corona.

Web-based Shader Playground

To make this even easier, we’ve created a Corona Shader Playground where you can play/experiment with Corona custom (fragment) shaders right from your browser!

(NOTE: WebGL is required to see the preview. If your browser doesn’t have proper support, you will only see code, no preview.)

Below are some live examples of fragment kernels that you can edit (just click in the code box). The inlined examples we have here are just a partial view into what the playground lets you do — click “Open in Playground” and you’ll get the full experience such as varying parameters, changing textures, etc.

Here’s a basic “Hello World” fragment shader (WebGL support is required in your browser):

Fragment kernel functions are called for every single pixel to determine the color to “shade” the pixel. In the above example, the shader always returns red which is why the entire shape gets colored red. As the comment suggests, try modifying the above code to use a different color and live preview the results.

Here’s a slightly more complex shader:

This example achieves its effect by mapping texture coordinate values to the the “Red” and “Green” channels and using time to vary the “Blue” channel.

Both of these fragment kernels are examples of generators, because they procedurally generate the texture (no source image textures are used).

There are more complex shader effect examples in the playground like:

Resources

Ready to start playing? Here’s everything you need to get going:

walter
12 Comments
  • Lerg
    Posted at 10:46h, 15 April

    This is so cool. The playground eases things very much as well.

  • Kiffin Ayers
    Posted at 18:46h, 15 April

    Keep it coming! Thanks for all of the goodies!

  • Andreas
    Posted at 03:00h, 16 April

    Great stuff! I love the playground!

    Questions:

    Did you do some tests about performance on iOS/Android devices?

    How big is the impact of this (I remember a big performance drop when I used the blur filters a while ago)? Is it even possible to estimate the impact or are device tests on trusted & ancient devices the only solution?

    Thanks for giving us stuff like this,
    best,
    Andreas

    • Walter
      Posted at 10:08h, 16 April

      Yes, there’s really no substitute for device testing, but there are some best practices, of which we list out a few.

      In general, blur filters are slow b/c of dependent texture reads — we recommend you avoid them:

      http://docs.coronalabs.com/daily/guide/graphics/customEffects.html#avoid-dynamic-texture-lookups

      • Andreas
        Posted at 11:01h, 16 April

        Oh boy, I was so excited about the playground that I simply did not see the link to the effects guide you posted at the beginning.

        I should just RTFM – thanks for the patience!

        Best from Munich,
        Andreas

  • ojnab
    Posted at 00:22h, 17 April

    Great stuff. I really like how CL are opening up at the time… with this stuff and the open sourced plugins. Keep it coming.

  • Icyspark
    Posted at 04:31h, 17 April

    Head over to https://www.shadertoy.com to get a look at some amazing shaders, along with the code, to help you get started.

    Note: I had to use firefox on OSX for it to work properly as Safari had issues, even with “Enable WebGL”.

    • Lerg
      Posted at 12:32h, 21 April

      Chrome works fine.

  • Antheor
    Posted at 12:47h, 17 April

    Playing with the first line CoronaSampler0( ); CoronaSampler1( ); h

  • Antheor
    Posted at 12:48h, 17 April

    …has no effect (sorry for the double post)

  • Antheor
    Posted at 02:18h, 19 April

    Oh ! thx 😉