Using kameraku and mobilekoder as a learning tool

It is not always about camera effects, kameraku and mobilekoder can also be used to learn more about OpenGL procedural texturing.

Here's an example shader code from 3Dlabs,

// Fragment shader for procedural bricks
// Authors: Dave Baldwin, Steve Koren, Randi Rost
// based on a shader by Darwyn Peachey
// Copyright (c) 2002-2004 3Dlabs Inc. Ltd.
// See 3Dlabs-License.txt for license information
// Modified by kodemongki for kameraku

precision mediump float;
uniform sampler2D vTex;
varying vec2 vCoord;
const vec2 bricksize = vec2(0.2, 0.1);
const vec3 brickcolor = vec3(0.8, 0.2, 0.1);
const vec2 brickpct = vec2(0.9, 0.85);
const vec3 mortarcolor = vec3(0.2125, 0.215, 0.21);

void main(void)
{
vec2 pos = vCoord / bricksize;
if (fract(pos.y * 0.5) > 0.5)
pos.x += 0.5;
pos = fract(pos);
vec2 usebrick = step(pos, brickpct);
vec3 col = mix(mortarcolor, brickcolor, usebrick.x * usebrick.y);
gl_FragColor = vec4(col, 1.0);
}

which will produce the following output












And another example from OpenGL ES 2.0 Programming Guide book,

precision mediump float;
uniform sampler2D vTex;
varying vec2 vCoord;

const vec3 black = vec3(0.0, 0.0, 0.0);
const vec3 white = vec3(1.0, 1.0, 1.0);
float freq = 10.0;

void main(void)
{
vec2 pos = mod(ceil(vCoord * freq), 2.0);
float delta = abs(pos.x - pos.y);
vec3 col = mix(black, white, delta);
gl_FragColor = vec4(col, 1.0);
}

will generate this output