Writing custom Open GL shaders was always the ultimate challenge for me. I was so exited when I heard about the ability to use custom shaders in Sprite Kit with iOS8. This would be a good reason for me to enter this subject and learn how custom shaders work and can be integrated into a Sprite Kit Scene.
My conclusion: It’s not that complicated at all. Writing your own shaders is complicated as hell if you haven’t seen any GLSL code before, but adding shader scripts to an existing Sprite Kit project is so very easy. In this little demo we just make a simple beach scene with sand and a reflecting water pixel shader like in this video:
The source with this demo project can be downloaded here from GitHub


The sources of the repository were updated. I added a second shader with a moving texture and edited some graphics. The source code in the repo will be more advanced than the code examples described in this tutorial.

Setup a new Sprite Kit project

I’ll throw the spaceship and the hello world text away. We can also delete the touchesBegan method and additionally I will setup correct scene dimensions as described in a former blog post. So everything is cleaned up to init some sprite nodes.

Add some sprites

First let’s make a background. A sprite that has the size of the entire screen.

Now that we have our beach vibe add a simple transparent sprite for holding the shader. Shaders can only be added to SKSpriteNodes.

After adding this container we simply add a shader to it. An new shader will be implemented with an external file called “shader_water.fsh”. The next thing is to set the so called uniforms. It’s just an array where you can set the variables in the shader script. The uniformName describes the variable name in the shader and the following argument sets its value.
At last the created shader Object will be assigned to the shader property of our sprite.

Add a shader script

A shader file should be in the .fsh format and the language is GLSL. It’s nothing more than a simple text file with the extension “.fsh”. So how do we get some demo code to see what it’s all about? In this post I have taken some code from www.shadertoy.com. I just copied some GLSL code from there and set the variable names inside this shader script with the uniforms from outside this script as used above. This is the shader that produces the water reflections:

After rendering this shader to the whole screen I just put another sand sprite over it with a transparent gradient.

The source with this demo project can be downloaded here from GitHub.
I’m looking forward to your comments or requests for new articles.

0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *