Lighting Shader Real

by roomyrooms

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.2.2/pixi.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pixi-filters@latest/dist/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');
var lightUrl = document.getElementById('light-url').textContent;
var lightImg = document.getElementById('light-preview');

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

var fragmentShader = `
precision mediump float;

varying vec2 vTextureCoord;

uniform sampler2D uSampler;
uniform highp vec4 inputSize;
uniform highp vec4 outputFrame;

uniform vec2 lightPoints[256];
uniform float time;

void main() {
  //vec2 f = vTextureCoord * inputSize.xy / outputFrame.zw;
  vec2 f = vTextureCoord * inputSize.xy;
  vec4 ogcol = texture2D(uSampler, vTextureCoord);
  vec4 darkcol = vec4(0.12,0.0,0.34,1.0);
  vec4 lightcol = vec4(0.0);
  
  float darkintensity = 0.2;
  float darkalpha = 1.0;
  float lightintensity = 0.05;
  float lightfade = 1.0;
  float lightradius = 256.0;
  vec3 lighttint = vec3(0.7,0.35,0.05);
  
  for (int i = 0; i < 1; i++) {
		if (lightPoints[i] != vec2(-1)) {
    	float ogdist = distance(f,lightPoints[i]*inputSize.xy);
      float adjdist = smoothstep(0.3,1.0,ogdist/lightradius);
  		lightcol.rgb = lightcol.rgb + lighttint*(1.0-vec3(adjdist)) * lightintensity;
  		lightcol.a = lightcol.a + (1.0-adjdist) * lightfade;
    }
  }
  vec4 newcol = mix(ogcol+vec4(lightcol.rgb,1.0), darkcol*darkintensity, max(1.0-lightcol.a-(1.0-darkalpha), 0.0));
  gl_FragColor = newcol;
}`

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


function LightFilter(lightPoints) {
    PIXI.Filter.call(this,undefined,fragmentShader);
    this.uniforms.time = performance.now()
    this.uniforms.lightPoints = new Float32Array(lightPoints)
}

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

LightFilter.prototype.apply = function (filterManager, input, output, clear) {
		clear = PIXI.CLEAR_MODES;
   ...