Don’t sweat the SCNTechnique

There aren’t many examples of using SCNTechnique on the web, in fact I can only count one here:

In this post I’m going to show you how to add a tilt-shift effect over your entire scene in SceneKit. Which should end up something like this (Note the blur on the top and bottom):

Screen Shot 2015-05-14 at 12.03.19

Here’s what we are going to make:

A SceneKit Project
A Vertex Shader
A Fragment Shader
A SCHTechnique Plist

Let’s start. Add this code to your SceneKit project:

let url = NSBundle.mainBundle().URLForResource("tiltShift", withExtension: "plist")!
let technique = SCNTechnique(dictionary: NSDictionary(contentsOfURL: url)! as [NSObject : AnyObject])
self.gameView!.technique = technique


Add this vertex shader to your project (tiltShift.vsh):

attribute vec4 a_position;
varying vec2 uv;

void main(void)
uv = (a_position.xy + 1.0) * 0.5;
gl_Position = a_position;

Add this fragment shader to your project (tiltShift.fsh):

// Modified again from here:

// Modified version of a tilt shift shader from Martin Jonasson (
// Read for context on shaders and this file
// License : MIT

uniform sampler2D colorSampler;
varying vec2 uv;

varying vec4 color;

Take note that blurring in a single pass (the two for loops below) is more expensive than separating
the x and the y blur into different passes. This was used where bleeding edge performance
was not crucial and is to illustrate a point.

The reason two passes is cheaper?
texture2D is a fairly high cost call, sampling a texture.

So, in a single pass, like below, there are 3 steps, per x and y.

That means a total of 9 “taps”, it touches the texture to sample 9 times.

Now imagine we apply this to some geometry, that is equal to 16 pixels on screen (tiny)
(16 * 16) * 9 = 2304 samples taken, for width * height number of pixels, * 9 taps
Now, if you split them up, it becomes 3 for x, and 3 for y, a total of 6 taps
(16 * 16) * 6 = 1536 samples

That’s on a *tiny* sprite, let’s scale that up to 128×128 sprite…
(128 * 128) * 9 = 147,456
(128 * 128) * 6 = 98,304

That’s 33.33..% cheaper for splitting them up.
That’s with 3 steps, with higher steps (more taps per pass…)

A really smooth, 6 steps, 6*6 = 36 taps for one pass, 12 taps for two pass
You will notice, the curve is not linear, at 12 steps it’s 144 vs 24 taps
It becomes orders of magnitude slower to do single pass!
Therefore, you split them up into two passes, one for x, one for y.

//I am hardcoding the constants like a jerk

const float bluramount = 0.5;
const float center = 1.1;
const float stepSize = 0.004;
const float steps = 3.0;

const float minOffs = (float(steps-1.0)) / -2.0;
const float maxOffs = (float(steps-1.0)) / +2.0;

void main() {

float amount;
vec4 blurred;

//Work out how much to blur based on the mid point
amount = pow((uv.y * center) * 2.0 – 1.0, 2.0) * bluramount;

//This is the accumulation of color from the surrounding pixels in the texture
blurred = vec4(0.0, 0.0, 0.0, 1.0);

//From minimum offset to maximum offset
for (float offsX = minOffs; offsX <= maxOffs; ++offsX) {
for (float offsY = minOffs; offsY <= maxOffs; ++offsY) {

//copy the coord so we can mess with it
vec2 temp_tcoord = uv.xy;

//work out which uv we want to sample now
temp_tcoord.x += offsX * amount * stepSize;
temp_tcoord.y += offsY * amount * stepSize;

//accumulate the sample
blurred += texture2D(colorSampler, temp_tcoord);

} //for y
} //for x

//because we are doing an average, we divide by the amount (x AND y, hence steps * steps)
blurred /= float(steps * steps);

//return the final blurred color
gl_FragColor = blurred;



and now for the SCNTechnique plist that makes it work, add this to your project too: (tiltShift.plist)


<?xml version=”1.0″ encoding=”UTF-8″?>

<!DOCTYPE plist PUBLIC “-//Apple//DTD PLIST 1.0//EN” ““>

<plist version=”1.0”>








































Announcing – CueBuddy, a Digital Cue Extension


I’ve been working on nthState’s second product over the past couple of months and today I would like to show it off. It’s called CueBuddy, and it’s a Digital Cue Extension.

It’s a Cue Extension that contains a micro controller, some sensors, bluetooth and a battery. It sends the force/movement you put into your cue to an iOS app so you can visualise your movements/power.

Check out the video below


Flux – Thoughts on V1.1

I have some ideas/feedback for version 1.1

  • Swift Support – This will allow you to change the export type
  • Toggle Pivot Points – The orange balls can sometimes get in the way
  • Animation Repeat Count – Set whether an animation should repeat
  • Motion Paths – Make a layer follow a motion path
  • Screenshot Apply – Take a screenshot of the destination view and apply to a layer
  • Shadows?

If you have any thoughts for V1.1, please let me know!