Shadow Shader

by roomyrooms

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.2.2/pixi.min.js"></script>
<script src="https://filters.pixijs.download/v4.1.0/pixi-filters.js"></script>
<script type="x-data-url" id="tree-url">
 ...

JavaScript

var treeUrl = document.getElementById('tree-url').textContent;
var treeImg = document.getElementById('tree-preview');

treeImg.src = treeUrl;

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

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 vec4 filterClamp;

uniform float uShadowAlpha;

void main() {
  vec4 color = texture2D(uSampler, vTextureCoord);
  if (color.a > 85.0/255.0 && color.a < (85.0/255.0)*1.671) {
  	color.a = 85.0/255.0;
  }
  if (color.a == 85.0/255.0) {
  	color *= uShadowAlpha;
  }
  gl_FragColor = color;
}`

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


function TreeHitFilter(shadowAlpha) {
  PIXI.Filter.call(this, undefined, fragmentShader);

  this.uniforms.uShadowAlpha = defaultValue(shadowAlpha, 1.0);
}

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

TreeHitFilter.prototype.apply = function(filterManager, input, output) {
  this.padding = 5;
  filterManager.applyFilter(this, input, output);
}

var stage = new PIXI.Container();
var trees = new PIXI.Container();

// create a renderer instance.
var renderer = PIXI.autoDetectRenderer(512, 512);

var bg = new PIXI.Graphics();
bg.beginFill(0xffffff);
bg.drawRect(0, 0, 512, 512);
stage.addChild(bg);

// tex creation
for (var x = 0; x < 2; x++) {
  var treeBaseTexture = new PIXI.BaseTexture(treeImg);
  var treeTexture = new PIXI.Texture(treeBaseTexture);
  var treeSprite = new PIXI.Sprite(treeTexture);

  // ADDITIVE blend mode for pretty intersecting lights

  // move a little bit...