A case for Interface Builder

There is a lot of hatred for Apple's UI tool Interface Builder among many programmers. I was firmly in that camp but lately have seen some advantages.. Especially as our last project spiraled over budget.

I've released 8 apps without using a single XIB. But the next one I'm planning on relying heavily on the tool. Here's why:

- Design/implement GUI graphically, right brained like you will use the program
- LESS LINES OF CODE to debug, write, remember to think about retain counts and spend dozens of lines setting up, say text field properties
- Less memory management! The whole XIB is loaded/unloaded behind the scenes
- Share the XIBs so DESIGNERS CAN LAY THEM OUT. No more time spent pixel pushing from a PSD comp, the designer will create the VERY LAYOUT U WILL USE! :D
- Less buggy code. IB makes sure you are initializing, configuring and disposing properly. (Not that *I* need that)
- FASTER development of a complex UI. If you have 10+ styled elements on a view, it takes probably 50 lines of code to set them up right. With IB it takes zero.

Now, the shortcomings.. (Rumored XCode 4 with integrated IB might fix some of this)
- Terminology is confusing. Outlets, "File's Owner" etc are never used in non-IB code, so pure coders don't know what they do
- Seems difficult to style/configure certain things. Attaching a UITableViewCell to a UITableView for example.
- The magic of how the elements interact with the code is a hurdle for many at first.

Ultimately I wouldn't recommend newbies using IB. Get a firm grasp on the codez first and then you will see how IB can help you.

Sneak preview music video stills

Topographic Shader V2 and a happy accident

Ever since I first posted the Topographic Contour shader, I have been trying to figure out how to smooth out the lines in that effect. Eventually I came up with the solution to write a function similar to smoothstep() but instead of smoothly transitioning from 0.0 to 1.0, it transitions from 0.0 to 1.0 back to 0.0 over the same input domain. This was perfect for antialiasing the contour lines! I think this function could be helpful in other areas too..

During the development, I came across a strange shader by accident that was actually pretty interesting looking. I called it Disco Snakeskin and it's the last one pictured above (best viewed large). I think there's potential with that shader.

Lastly, I'm still learning a lot about GLSL every day, and graphics/vector math in general as I do. Screen space derivatives, and fwidth() have been on my mind as I see the power it can bring to antialiasing, and special effects. A new rule of thumb will be for every varying parameter, consider what could be done by looking at its screen-space derivatives. I think some crazy effects are possible with this.. And I'm stoked at the possibility of discovering some of them! In fact, overall I'm really stoked on GLSL. After being involved in graphics coding for so long, finally getting into shaders has been like a rebirth for me- once again learning a ton and feeling low on the totem pole. But seeing some of the things people are doing through this technology is extremely inspiring (and a tiny bit frustrating, I'll admit). With that in mind, I've added a column over there on the right side of the blog, containing any brilliant blogs or sites discussing GLSL.

Just an update on what I've been working on the last week or two.. The first image shows studies for a music video I'm working on. The video will feature MIDI and audio triggered/modulated 3D forms and all the shader work I've been cranking on. Pictured are some paper cranes and a 'paper' shader, still very much under construction.

The next image shows the multi-light metal/phong shader I've been working on. The results seem really nice, and about exactly what I wanted. Should be a good basis for other shaders too.

The last two images show screen shots from the latest version of CFGR8R program built for live performance with Plaid, the legendary UK electronic duo. Audio reactive environments feature a hybrid OBJ/Generative geometry engine and lots of different dynamic effects. Here you can see the metal/phong shader in action, as well as a fresnel/Xray shader.

A fun distraction - Topographic Contour Shader

While working on the normal re-calculation for my spherical deformer vertex shader, I got distracted by an idea I had. Thinking about Avatar, and virtually any other movie with high tech 3D displays of terrain, I thought it would be cool to develop a fragment shader to draw the object as stacked countour lines, like those found on a topo map.

I developed a simple version using modulus of one spacial dimension, but the results weren't quite the "wireframe" look I was going for. With the help of this thread I learned about smoothstep() and was able to get exactly what I was going for.

GLSL mesh deformer in spherical coordinates - part 3

Getting closer on properly re-calculating the normals after radial deformation in GLSL. To recap, I built a radial deformer like a jellyfish or spore type form when applied to a sphere. While displacing vertices is fairly easy, re-calculating the normals has been tricky. The visual appearance is getting very close to the phong-shaded deformed sphere I'm shooting for.. However it still isn't perfect.

Since last time, here are the advancements that have brought me closer to the goal:

- Don't normalize any vectors in Spherical coordinates. Since they're measuring angles & radius, a normalization doesn't make sense. This was causing all kinds of crazy problems.
- Cartesian-to-spherical function modified to check for bounds of asin and check hemisphere for atan. Holes in mesh have been fixed.
- Now using the proper built in GLSL matrix functionality.

The current method for calculating normals for deformed vertex is as follows:

- Convert incoming vertex to spherical
- Displace this vertex by 3 component (r, theta, phi) deform function
- Find unit tangent vector U (in Cartesian coords)
- Find binormal vector V (in Cartesian coords)
- Convert these to spherical coords
- Find Jacobian matrix for current vertex (in Spherical coords)
- Multiply U by Jacobian to get U' (transformed unit tangent vector)
- Multiply V by Jacobian to get V' (transformed binormal vector)
- Convert these back into cartesian
- Transformed normal, in Cartesian is normalize(U'X V')


With this method, the shading/highlights still don't look perfect when deformed. I'm almost positive that the culprit is my Jacobian matrix, since when the deformation amount is zero, the object looks perfect: In other words, when the deformation is zero, the whole process of renormalization is still happening, but just coming out identical to the inputs. I'm wondering if my method of simply replacing x,y,z with r,t,p in the Jacobian is legit.. Maybe I have to convert the functions somehow. More reading to come..

GLSL vertex deformer part 2

I began to implement the second part of the GLSL mesh deformer. This part was all about recalculating the surface normals after procedurally moving the vertices of the model. Following the directions provided at this link I was able to perform the steps to calculate a Jacobian matrix based on the original deformation forumla. Using this matrix I was able to correct the surface normals post-deformation.. sort of.

Since this deformation was a radial displacement, I was operating in the polar coordinate system. So before performing the partial derivatives to create the Jacobian matrix, I had to convert some things to polar coordinates. The steps were as follows:

- Convert the vertex position into polar
- Create the Binormal and tangent vectors as described in this link
- Convert the binormal and tangent vectors to polar coordinates
- Convert the incoming surface normal to polar
- Plug all the data into the hard coded Jacobian matrix
- Calculate the new surface normal
- Convert the new surface normal back into cartesian 3 space

With this method, I think I got very close to the desired effect of perfectly deformed surface normals to go along with the deformed mesh. However visually there are still some problems.

I believe the cartesian-to-polar function has some discontinuities that result in holes in the mesh. Also the shading looks off in some way, possibly related to the double coordinate system translation being slightly off. But its getting closer!


Here's the vertex shader as it stands..


const float TWO_PI=6.28318531;
const float PI=3.14159265;
const float HALF_PI=1.57079633;

varying vec4 screenPos, worldPos;

varying vec3 normal, lightDir, halfVector;
varying vec4 diffuse, ambient;

varying float radius,redShift,greenShift,blueShift;

uniform float time;
uniform float displaceAmount1;
uniform float displaceAmount2;

uniform float frequency1;
uniform float frequency2;

varying vec4 eyePosition;
varying vec3 diffuseColor;
varying vec3 specularColor;
varying vec3 emissiveColor;
varying vec3 ambientColor;
varying float shininess;
//varying vec3 normal;

vec3 va;//={0,0,1};
vec3 vb;//={0,1,0};

vec3 renormalizeA;
vec3 renormalizeB;
vec3 renormalizeC;


vec3 vertexSpherical;

float d0;
float d1;
float d2;
float x,y,z;
// float theta,phi,r;

vec4 displacedPoint;

float tri(float phase)
{
float ramppoint;
phase =mod(phase,TWO_PI);
ramppoint=mod(phase,HALF_PI)/(HALF_PI);
if(phase>=0.0 && phase else if(phase>=HALF_PI && phase else if(phase>=PI && phase<(HALF_PI*3.0)) return(-ramppoint);
else if(phase>=(HALF_PI*3.0) && phase<=TWO_PI) return(-1.+ramppoint);
else return(1.0);
}

vec3 sphericalToCartesian( vec3 sphericalCoord)
{
vec3 o;
o.x=sphericalCoord[0]*sin(sphericalCoord[1])*cos(sphericalCoord[2]);
o.y=sphericalCoord[0]*sin(sphericalCoord[1])*sin(sphericalCoord[2]);
o.z=sphericalCoord[0]*cos(sphericalCoord[1]);

return o;

}
vec3 cartesianToSpherical( vec3 cartesianCoord)
{
vec3 o;

float S;

o[0]=length(cartesianCoord);

S=length(cartesianCoord.xy);

o[1]=acos(cartesianCoord.z / o[0]);


//o[2]=atan(cartesianCoord.y/cartesianCoord.x);
if(cartesianCoord.x>=0.0) o[2]=asin(cartesianCoord.y/S);
else o[2]=PI-asin(cartesianCoord.y/S);



return o;

}


float f_r(float rOriginal)
{

return rOriginal+cos(vertexSpherical[1]*frequency1+time)*displaceAmount1 +cos(vertexSpherical[2]*frequency2+time)*displaceAmount2;

}

float f_theta(float thetaOriginal)
{

return thetaOriginal;

}

float f_phi(float phiOriginal)
{

return phiOriginal;

}


void main()
{

x=gl_Vertex[0];
y=gl_Vertex[1]; //flip flopped, so angular parts map to sides ("walls"), instead of along top
z=gl_Vertex[2];

vertexSpherical=cartesianToSpherical(gl_Vertex.xyz);


vec4 displaceVect;


vec4 Vertex=gl_Vertex;

vertexSpherical[0]=f_r(vertexSpherical[0]);
vertexSpherical[1]=f_theta(vertexSpherical[1]);
vertexSpherical[2]=f_phi(vertexSpherical[2]);

displacedPoint[0]=vertexSpherical[0]*sin(vertexSpherical[1])*cos(vertexSpherical[2]);
displacedPoint[1]=vertexSpherical[0]*sin(vertexSpherical[1])*sin(vertexSpherical[2]);
displacedPoint[2]=vertexSpherical[0]*cos(vertexSpherical[1]);
displacedPoint[3]=1.0;

Vertex=displacedPoint;

redShift=0.0;//abs(r);
greenShift=0.0;//abs(theta/6.0);
blueShift=0.0;//abs(phi/6.0);



worldPos=Vertex;
screenPos=gl_ModelViewProjectionMatrix * Vertex ;

gl_Position = screenPos;

eyePosition = gl_ModelViewMatrix * gl_Vertex;

normal = gl_Normal;//normalize(gl_Normal + normalize( gl_Normal-worldPos.xyz));




//Post-deform renormalization:

//Create a couple utility vectors:
va.x=0.0;
va.y=0.0;
va.z=1.0;

vb.x=0.0;
vb.y=1.0;
vb.z=0.0;

va=cartesianToSpherical(va);
vb=cartesianToSpherical(vb);
normal=cartesianToSpherical(normal);




//Generate tangent vector:
vec3 tangent, transformedTangent;
if(length(cross(normal,va))>length(cross(normal,vb))) { tangent=cross(normal,va);}
else { tangent = cross(normal,vb); }

//Generate binormal vector
vec3 binormal, transformedBinormal;
binormal=cross(normal, tangent);


//The Jacobian Matrix :
renormalizeA[0]=1.0;
renormalizeA[1]=-displaceAmount1*sin(frequency1*vertexSpherical[1]+time)*frequency1;
renormalizeA[2]=-displaceAmount2*sin(frequency2*vertexSpherical[2]+time)*frequency2;
renormalizeB[0]=0.0;
renormalizeB[1]=1.0;
renormalizeB[2]=0.0;
renormalizeC[0]=0.0;
renormalizeC[1]=0.0;
renormalizeC[2]=1.0;


transformedTangent.x=tangent.x*renormalizeA[0]+tangent.y*renormalizeA[1]+tangent.z*renormalizeA[2];
transformedTangent.y=tangent.x*renormalizeB[0]+tangent.y*renormalizeB[1]+tangent.z*renormalizeB[2];
transformedTangent.z=tangent.x*renormalizeC[0]+tangent.y*renormalizeC[1]+tangent.z*renormalizeC[2];

transformedBinormal.x=binormal.x*renormalizeA[0]+binormal.y*renormalizeA[1]+binormal.z*renormalizeA[2];
transformedBinormal.y=binormal.x*renormalizeB[0]+binormal.y*renormalizeB[1]+binormal.z*renormalizeB[2];
transformedBinormal.z=binormal.x*renormalizeC[0]+binormal.y*renormalizeC[1]+binormal.z*renormalizeC[2];


vec3 transformedNormal=normalize(cross(transformedTangent,transformedBinormal));

normal=sphericalToCartesian(transformedNormal);


normal = gl_NormalMatrix * normal;//gl_Normal;


diffuseColor = vec3(gl_FrontMaterial.diffuse);
specularColor = vec3(gl_FrontMaterial.specular);
emissiveColor = vec3(gl_FrontMaterial.emission);
ambientColor = vec3(gl_FrontMaterial.ambient);
shininess = gl_FrontMaterial.shininess;

}