Shaders week 5


For this first shader I took inspiration from the webcam displacement example and instead used two images together. I took a picture of a wolf’s head and a picture of water from the internet and added the sin() function to create a murky, watery effect. I used millis() in x position for the set.Uniform statement (myShader.setUniform(“uDisplacement”, map(millis()/50, 0, width, 0, 5));) to produce a u_time effect like in GLSL. In a way, the water image is being animated to displace the wolf image.

#ifdef GL_ES
precision mediump float;

uniform vec2 uMousePosition;
uniform vec2 uResolution;

uniform sampler2D uTexture0; //wolf
uniform sampler2D uTexture1; //water
uniform float uTime;
uniform float uDisplacement;

varying vec2 vTexCoord;

//takes rbg of a pixel and calculates luminosity
float rgb_to_luma( vec3 color ){
return 0.2126*color.r + 0.7152*color.g + 0.0722*color.b;

float map (float value, float min1, float max1, float min2, float max2){

return min2 + (value - min1) * (max2 - min2) / (max1 - min1);

void main() {

vec4 color = vec4(0.0, 1.0, 1.0, 0.0);

vec2 offset = vec2(0.0, 0.0);

offset = texture2D(uTexture0, vec2(vTexCoord.x, 1.0-vTexCoord.y)).gb;
offset *= 1.0;

//colours to luminosity
float c = rgb_to_luma(texture2D(uTexture0, vec2(vTexCoord.x, 1.0-vTexCoord.y)).rgb);

offset = vec2(c, c) + uDisplacement;

vec2 uv = vec2(vTexCoord.x, 1.0-vTexCoord.y) + offset;
//vec2 uv = vec2(uTime(vTexCoord.x), 1.0-vTexCoord.y) + offset;
//using sin() to distort the image
color = texture2D(uTexture1, sin(uv) * 0.5);

gl_FragColor = vec4(color);

Leave a Reply