Tree Shader

by roomyrooms

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.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;
uniform float uWaveStrength;
uniform float uWaveHeight;

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;

void main() {
  vec4 ogColor = texture2D(uSampler, vTextureCoord);
  gl_FragColor = ogColor;
}`

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


function TreeHitFilter(waveStrength, waveHeight) {
    //PIXI.Filter.call(this,vertexShader,fragmentShader);
        
    //this.lightSprite = lightSprite;
    //this.lightMatrix = new PIXI.Matrix();

    this.uniforms.uWaveStrength = defaultValue(waveStrength, 1.0);
    this.uniforms.uWaveHeight = defaultValue(waveHeight, 1.0);
 		this.uniforms.dimensions = [0.0,0.0];
}

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

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

    this.uniforms.dimensions[0] = input.filterFrame.width;
    this.uniforms.dimensions[1] = input.filterFrame.height;
    // draw the filter...
    filterManager.applyFilter(this, input, output);
}

var stage = new PIXI.Container();

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

// tex creation
var treeBaseTexture = new PIXI.BaseTexture(treeImg);
var treeTexture = new PIXI.Texture(treeBaseTexture);

var treeSprite...