Inverted Hit Marker

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 lightUrl = document.getElementById('light-url').textContent;
var lightImg = document.getElementById('light-preview');

lightImg.src = lightUrl;

var hitMarkerFrag = `
precision mediump float;

varying vec2 vTextureCoord;

uniform sampler2D uSampler;

uniform vec2 hitPoints[64];
uniform int hitCount;
uniform float time;

void main() {
  vec4 ogcol = texture2D(uSampler, vTextureCoord);
  float redintensity = 0.5;
  float orangering = 0.0;
 	float ringmin = 8.;
  float ringmax = 10.;
  float innerwidth = 64.;
  
  float timeval = fract(time*0.001)*512.;
  for (int i = 0; i < 64; i++) {
	  if (i >= hitCount) { break; }
    float pointdist = distance(gl_FragCoord.xy, hitPoints[i]);
    redintensity = min(smoothstep(innerwidth, innerwidth+8., pointdist)*0.8, redintensity);
    orangering += smoothstep(innerwidth+ringmax, innerwidth+ringmin, pointdist)-smoothstep(innerwidth+8.,innerwidth,pointdist);
    orangering = max(orangering, smoothstep(innerwidth+16.+timeval, innerwidth+12.+timeval, pointdist)-smoothstep(innerwidth+ringmax+timeval,innerwidth+ringmin+timeval,pointdist));
	}
	orangering = min(orangering, redintensity);
  vec4 newcol = vec4(1.0+orangering,1.0-redintensity,1.0-redintensity,0.0);
  gl_FragColor = ogcol * newcol;
}`

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


function HitMarkerFilter(hitPoints) {
	PIXI.Filter.call(this,undefined,hitMarkerFrag);
	this.uniforms.time = performance.now();
	this.uniforms.hitCount = hitPoints.length/2
	this.uniforms.hitPoints = new Float32Array(hitPoints)
}

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

HitMarkerFilter.prototype.apply = function (filterManager, input, output, clear) {
		clear = PIXI.CLEAR_MODES;
    this.uniforms.time = performance.now();
    // draw the filter...
    filterManager.applyFilter(this, input, output,...