Ground Wobble

by roomyrooms

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.2.2/pixi.min.js"></script>
<script type="x-data-url" id="light-url">
 ...

JavaScript

var tiledmapUrl = document.getElementById('tiledmap-url').textContent;

var tiledmapImg = document.getElementById('tiledmap-preview');

tiledmapImg.src = tiledmapUrl;

var vertexShader = `
attribute vec2 aVertexPosition;
attribute vec2 aTextureCoord;

uniform mat3 projectionMatrix;
uniform mat3 filterMatrix;

varying vec2 vTextureCoord;
varying vec2 vFilterCoord;

void main(void){
   gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);
   vFilterCoord = (filterMatrix * vec3(aTextureCoord, 1.0)).xy;
   vTextureCoord = aTextureCoord;
}`

var fragmentShader = `
precision mediump float;

varying vec2 vTextureCoord;
varying vec2 vFilterCoord;

uniform sampler2D uSampler;
uniform float uTime;

void main() {
  vec4 ogCol = texture2D(uSampler, vTextureCoord);
  float dist = distance(vTextureCoord.xy, vec2(0.5));
  float mod = 0.0;
  float sinTime = sin(uTime*0.005+(20.0*vTextureCoord.y)) * 0.5;
  float cosTime = cos(uTime*0.005+(20.0*vTextureCoord.x)) * 0.5;
  float thresh = 0.25 + (sinTime*0.025) + (cosTime*0.025);
  if (dist <= thresh) {
  	mod = 1.0;
  } else if (dist <= thresh+0.01) {
  	mod = 100.0;
  }
  gl_FragColor = ogCol * mod;
}`

function defaultValue(inputValue, defaultValue) {
  inputValue = typeof inputValue !== 'undefined' ? inputValue : defaultValue;
  return inputValue;
}


function GroundFilter() {
  PIXI.Filter.call(this, vertexShader, fragmentShader);
	this.uniforms.uTime = performance.now();
}

GroundFilter.prototype = Object.create(PIXI.Filter.prototype);
GroundFilter.prototype.constructor = GroundFilter;

GroundFilter.prototype.apply = function(filterManager, input, output) {
	this.uniforms.uTime = performance.now();
  filterManager.applyFilter(this, input, output);
}

var app = new PIXI.Application({"width": 400, "height": 300});
var stage = app.stage;
var renderer = app.renderer;
PIXI.settings.ROUND_PIXELS = false;
var tiledmapSprite = PIXI.Sprite.fromImage(tiledmapUrl);
tiledmapSprite.filters = [new...