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 lightScreenFrag = `
precision mediump float;

varying vec2 vTextureCoord;

uniform sampler2D uSampler;

uniform vec3 lightColors[64];
uniform vec2 lightPoints[64];
uniform float lightFades[64];
uniform float lightRadius[64];
uniform float lightIntensities[64];
uniform int lightCount;
uniform float time;

void main() {
  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;
  
  for (int i = 0; i < 64; i++) {
	  if (i >= lightCount) { break; }
	  float lightintensity = lightIntensities[i];
	  float lightfade = lightFades[i];
	  float lightradius = lightRadius[i];
	  vec3 lighttint = lightColors[i];
	  vec2 lightgradient = vec2(0.3,0.7);

   	float ogdist = distance(gl_FragCoord.xy,lightPoints[i]);
    float adjdist = smoothstep(lightgradient.x,lightgradient.y,ogdist/lightradius);
  	lightcol.rgb += lighttint*(vec3(1.0-adjdist)) * lightintensity;
  	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 LightScreenFilter(lightPoints, lightFades, lightRadius, lightColors, lightIntensities) {
	PIXI.Filter.call(this,undefined,lightScreenFrag);
	this.uniforms.time = performance.now();
	this.uniforms.lightPoints = new Float32Array(lightPoints)
	this.uniforms.lightFades = new Float32Array(lightFades)
	this.uniforms.lightRadius = new...