DirectionalLighting Shader3

by roomyrooms

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js"></script>

JavaScript

const vertex = `
attribute vec2 aVertexPosition;

varying vec2 vTextureCoord;

uniform mat3 projectionMatrix;
uniform vec4 inputSize;
uniform vec4 outputFrame;

vec4 filterVertexPosition( void ) {
		vec2 position = aVertexPosition * max(outputFrame.zw, vec2(0.)) + outputFrame.xy;
		return vec4((projectionMatrix * vec3(position, 1.)).xy, 0., 1.);
}

vec2 filterTextureCoord( void ) {
		return aVertexPosition * (outputFrame.zw * inputSize.zw);
}

void main(void) {
		gl_Position = filterVertexPosition();
		vTextureCoord = filterTextureCoord();
}
`

const fragment = `
precision mediump float;

varying vec2 vTextureCoord;

#define MAX_LIGHTS 35

uniform highp vec4 inputSize;
uniform highp vec4 outputFrame;

uniform sampler2D uSampler;
uniform float uTime;
uniform float uLights[MAX_LIGHTS];
uniform vec3 uAmbientColor;
uniform vec2 uResolution;

void main() {
	vec3 color = uAmbientColor;

	vec4 textureColor = texture2D(uSampler, vTextureCoord.xy);

	for (int i = 0; i < MAX_LIGHTS; i+=7) {
		// light information
		vec2 lightPos = vec2(uLights[i], uLights[i+1]);
		vec3 lightColor = vec3(uLights[i+2], uLights[i+3], uLights[i+4]);
		float brightness = uLights[i+5];
		float size = -uLights[i+6];
		
		// calculate light size / color
		vec2 dis = gl_FragCoord.xy - vec2(lightPos.x, lightPos.y);
		vec3 calcColor;
		float str = 18./(sqrt(pow(dis.x, 2.) + pow(dis.y, 2.) + pow(size, 2.)));
		calcColor += vec3(str) * lightColor;
		color += vec3(calcColor) * (lightColor + brightness);
	}

	gl_FragColor = vec4(textureColor.rgb * color, 1.);
}
`

PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST;

function DirectionalLightFilter(vertex, fragment, uniforms) {
		return new PIXI.Filter(vertex, fragment, uniforms);
}

const app = new PIXI.Application({
		'width': 960,
		'height': 540
});

document.body.appendChild(app.view);

var sprite1Texture = PIXI.Texture.from('https://i.postimg.cc/KjFqr4dY/download.png');
var sprite2Texture =...