Custom Shader Effects

15 April 2015

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:

• a plasma generator
• a bulge image filter
• a rotating moon effect (Lua means “moon” in Portuguese).

Resources

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

• Custom Shader Effects Guide
• WebGL-based Shader Playground
• Sample Corona Project
• Forum