DragonRuby Game Toolkit - Shader Sim https://youtu.be/JHkFI2VmKp8

main.rb

def tick args
  easing_perc = (args.state.tick_count % 600) / 600
  offset_1 =    0 + easing_perc * 800
  offset_2 = -800 + easing_perc * 800

  # two sprites scrolling horizontally and vertically
  args.outputs.background_color = [0, 0, 0]
  args.outputs[:scene].background_color = [0, 0, 0, 0]
  args.outputs[:scene].w = 800
  args.outputs[:scene].h = 800
  args.outputs[:scene].transient!
  sprite_props = { w: 800, h: 800, path: "sprites/water.png", blendmode_enum: 4, a: 128 }
  args.outputs[:scene].sprites << { x: 0, y: 0, w: 800, h: 800, r: 0, g: 128, b: 255, path: :pixel }
  args.outputs[:scene].sprites << { x: offset_1, y:        0, **sprite_props }
  args.outputs[:scene].sprites << { x: offset_2, y:        0, **sprite_props }
  args.outputs[:scene].sprites << { x:        0, y: offset_1, angle: 90, **sprite_props }
  args.outputs[:scene].sprites << { x:        0, y: offset_2, angle: 90, **sprite_props }

  # uniforms api a work in progress
  args.outputs[:tex1].background_color = [0, 255, 0, 255]
  args.outputs[:tex1].w = 2 * 800
  args.outputs[:tex1].h = 2 * 800
  args.outputs[:tex1].transient!

  easing_perc = (args.state.tick_count % 600) / 600
  szw = 800
  szh = 800
  offset_1 = -szw + easing_perc * szw
  offset_2 =    0 + easing_perc * szw
  offset_3 = +szw + easing_perc * szw
  sprite_props = { w: szw, h: szh, path: "sprites/water-displacement.png", a: 255 }
  args.outputs[:tex1].sprites << 4.flat_map do |i|
    8.map do |j|
      { x: szw * (j - 3) + szw * easing_perc + szw * (i - 1),
        y: szh * easing_perc + szh * (i - 1),
        **sprite_props }
    end
  end

  # here is the scene
  args.outputs.sprites << { x: 640, y: 360, w: 1440, h: 1440, path: :scene, anchor_x: 0.5, anchor_y: 0.5 }

  # here is the displacement map
  # args.outputs.sprites << { x: 640, y: 360, w: 1440, h: 1440, path: :tex1, anchor_x: 0.5, anchor_y: 0.5 }
end

shader.glsl

uniform sampler2D tex0; uniform sampler2D tex1;

varying vec2 v_texCoord;

void noop() {
  gl_FragColor = texture2D(tex0, v_texCoord);
}

void water() {
  // tex1 is the displacement map
  vec4 displacement = texture2D(tex1, v_texCoord);
  // depending how black the pixel is, we move up and to the left, white is down and to the right
  vec2 distortedCoords = vec2(v_texCoord.x + (displacement.r * 0.05), v_texCoord.y + (displacement.r * 0.05));
  // return the color of the pixel at the new coordinates
  gl_FragColor = texture2D(tex0, distortedCoords);
}

void main() {
  water();
  // noop();
}

Water Sprite:

Displacement Sprite: