Shader × Node

Node based workflow for VJ creation

App Store (19) | GitHub (19) | GitHub (20)


Shader × Node is a side project that started in March 2019. Initially, it was written in Objective-C, then ported to Swift 4.2 (in a Swift Playground) for the WWDC 19 scholarship application (Plot twist: it didn't win WWDC 19, but later won WWDC 20). Shader × Node features a self-made node editor system using UIKit Dynamics (with no 3rd party lib used). Later on, SpriteKit and AVFoundation were added to the project to function as a VJ visualization app.
You can drag and drop various nodes into the canvas can connect each other. There are generator nodes (like time, audio loudness, and uv) and calculator nodes (like add, multiply, and lerp). Together you can achieve amazing shader effects in this app.


What you are about to see is a demo video for WWDC Scholarship Submission. The complex shader displayed at the 1:02 is actually equivalent to the code below.

 #ifdef GL_ES
 precision mediump float;
 uniform vec2 u_resolution;
 uniform float u_time;
 uniform float u_audiodb;
 void main()
     vec2 st = gl_FragCoord.xy/u_resolution.xy;
     vec2 pos = vec2(0.5)-st;
     float r = length(pos)*2.0;
     float a = atan(pos.y,pos.x);
     float f = smoothstep(10.0 * (1.0 - u_audiodb)),0.5,sin(a * 5.0 + u_time) * 0.7 + cos(a * 7.0) * 1.0);
     float s = smoothstep(0.0,2.0,f);
     vec3 colorIn = vec3(1.0- smoothstep(s,s,r - 0.5));
     vec3 colorOut = vec3(1.0- smoothstep(s,s,r - 0.2));
     gl_FragColor = vec4(colorIn - colorOut, 1.0);

Video Player is loading.
Current Time 0:00
Duration 3:02
Loaded: 0%
Stream Type LIVE
Remaining Time 3:02


Tech Details

My approach is a 2-pass-brutal-force-approach, so it is far from optimal, but at least it works:
The first pass is responsible to use graph searching algorithms to gather linkage information and thus build a dependency graph for each node, and the second pass would declare variable for each knot on the nodes, append equal operation on linked knots, and finally generate the shader code following the order previously collected in the dependency graph. Below are images from my PDF version portfolio, and I think they explain well how Shader Node work.


For WWDC 20, I updated my Shader Node with dark mode support, more detailed tutorial, and better performance, and this time it actually won the WWDC 20 student scholarship.


An iOS version of Shader Editor packing logic operators and unity shader export features is on the plan.
A Unity & UIWidgets based node scripting editor is being developed using the same structure. You can follow the development on my Twitter & Blog. Current progress includes a proper macOS & Chrome tab style UI and monobehaviour callback support.

Web Demo Link

Last updated at Jun 1, 2020 9:00 AM
Originally created at Jul 1, 2019 9:00 AM