JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://d157l7jdn8e5sf.cloudfront.net/v4.1.0/pixi.js"></script>
<script type="x-data-url"...
JavaScript
var lightUrl = document.getElementById('light-url').textContent;
var tiledmapUrl = document.getElementById('tiledmap-url').textContent;
var lightImg = document.getElementById('light-preview');
var tiledmapImg = document.getElementById('tiledmap-preview');
lightImg.src = lightUrl;
tiledmapImg.src = tiledmapUrl;
var fragmentShader = `
precision mediump float;
varying vec2 vTextureCoord;
varying vec2 vFilterCoord;
uniform sampler2D uSampler;
uniform sampler2D uLightmap;
uniform vec2 uResolution;
uniform vec4 uAmbientColor;
void main() {
vec4 diffuseColor = texture2D(uSampler, vTextureCoord);
vec4 light = texture2D(uLightmap, vFilterCoord);
vec3 ambient = uAmbientColor.rgb * uAmbientColor.a;
vec3 intensity = ambient + light.rgb;
vec3 finalColor = diffuseColor.rgb * intensity;
gl_FragColor = vec4(finalColor, diffuseColor.a);
}
`;
function defaultValue(inputValue, defaultValue) {
inputValue = typeof inputValue !== 'undefined' ? inputValue : defaultValue;
return inputValue;
}
function LightmapFilter(lightSprite, ambientColor, resolution) {
PIXI.Filter.call(
this,
null,
fragmentShader);
ambientColor = defaultValue(ambientColor, [0.3, 0.3, 0.7, 0.5]);
resolution = defaultValue(resolution, [1.0, 1.0]);
this.lightSprite = lightSprite;
this.lightMatrix = new PIXI.Matrix();
this.uniforms.uLightmap = lightSprite.texture;
this.uniforms.uResolution = new Float32Array(resolution);
this.uniforms.uAmbientColor = new Float32Array(ambientColor);
}
LightmapFilter.prototype = Object.create(PIXI.Filter.prototype);
LightmapFilter.prototype.constructor = LightmapFilter;
LightmapFilter.prototype.apply = function (filterManager, input, output) {
const ratio = (1 / output.destinationFrame.width) * (output.size.width / input.size.width);
this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(this.lightMatrix, this.lightSprite);
// draw the filter...
...