Tree Lighting

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 lightUrl = document.getElementById('light-url').textContent;
var treeUrl = document.getElementById('tree-url').textContent;
var darkmapUrl = document.getElementById('darkmap-url').textContent;

var lightImg = document.getElementById('light-preview');
var treeImg = document.getElementById('tree-preview');
var darkImg = document.getElementById('dark-preview');

lightImg.src = lightUrl;
darkImg.src = darkmapUrl;
treeImg.src = treeUrl;

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 sampler2D uLightmap;

void main() {
  vec4 diffuseColor = texture2D(uSampler, vTextureCoord);
  vec4 light = texture2D(uLightmap, vFilterCoord);
  vec3 finalColor = diffuseColor.rgb * light.rgb;
  gl_FragColor = diffuseColor * (1.0-light.a);
}`

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


function LightmapFilter(lightSprite) {
  PIXI.Filter.call(this, vertexShader, fragmentShader);

  this.lightSprite = lightSprite;
  this.lightMatrix = new PIXI.Matrix();

  this.uniforms.uLightmap = lightSprite.texture;
}

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

LightmapFilter.prototype.apply = function(filterManager, input, output) {
  this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(this.lightMatrix, this.lightSprite);

  // draw the filter...
  filterManager.applyFilter(this, input, output);
}

var stage =...