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;

varying vec2 vTextureCoord;

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

var fragmentShader = `
precision mediump float;

varying vec2 vTextureCoord;

uniform sampler2D uSampler;
uniform vec4 filterArea;
uniform vec2 uCenters;
uniform float uTime;
uniform float uWidth;
uniform float uRing;

void main() {
  vec4 ogCol = texture2D(uSampler, vTextureCoord);
  float dist = distance(vTextureCoord.xy, uCenters);
  float mod = 0.0;
  float k = uTime*0.01;
  float g = 25.0;
  float sinTime = sin(k+(g*vTextureCoord.y)) * 0.5;
  float cosTime = cos(k+(g*vTextureCoord.x)) * 0.5;
  float thresh = (uWidth/filterArea.x) + (sinTime*0.025) + (cosTime*0.025);
  if (dist <= thresh) {
  	mod = 1.0;
  } else if (dist <= thresh+(uRing/filterArea.x)) {
  	mod = 100.0;
  }
  gl_FragColor = ogCol * mod;
}`

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


function GroundFilter(uCenters, uWidth, uRing) {
  PIXI.Filter.call(this, vertexShader, fragmentShader);
	this.uniforms.uCenters = defaultValue(uCenters,[0.5,0.5]);
	this.uniforms.uTime = performance.now();
  this.uniforms.uWidth = defaultValue(uWidth,32);
  this.uniforms.uRing = defaultValue(uRing,2);
}

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 =...