Healthbar Shader

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>

JavaScript

var fragmentShader = `
precision mediump float;

varying vec2 vTextureCoord;

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

uniform vec2 size;

uniform vec3 defaultCol;
uniform vec3 damageCol;
uniform vec3 shieldCol;
uniform vec3 healCol;

uniform float healthPrior;
uniform float healthTotal;
uniform float healthCurrent;
uniform float shieldCurrent;

uniform float levelOfDetail;

uniform float time;

vec2 mapCoord( vec2 coord )
{
    coord *= inputSize.xy;
    coord += inputSize.zw;

    return coord;
}

vec2 unmapCoord( vec2 coord )
{
    coord -= inputSize.zw;
    coord /= inputSize.xy;

    return coord;
}

float createHealthLine(vec2 coord, float pxPer, float lineWidth, float lineHeight) {
	if (mod(coord.x, pxPer) <= lineWidth && coord.y <= lineHeight) {
  	return 0.0;
  } else {
  	return 1.0;
  }
}

void main() {
  float resourceTotal = healthTotal+shieldCurrent;
  float transparency = 1.0;
	vec3 endcol = defaultCol;
  vec2 coord = mapCoord(vTextureCoord);
  
  float coordPer = coord.x/size.x;
  if (coordPer > healthPrior/resourceTotal) {
  	if (coordPer < (healthPrior+shieldCurrent)/resourceTotal) {
    	endcol = shieldCol;
    } else if (coordPer < healthCurrent/resourceTotal) {
    	endcol = healCol;
    } else {
    	endcol *= 0.0;
    	transparency = 0.0;
    }
  } else if (coordPer > healthCurrent/resourceTotal) {
  	endcol = damageCol;
  }
  
  endcol *= clamp(step(4., coord.y), 0.75, 1.);
  
  if (levelOfDetail > 0. && resourceTotal < 1000000.) {
 		endcol *= createHealthLine(coord, (10000./resourceTotal)*size.x, 2., 21.);
  }
  if (levelOfDetail > 1. && resourceTotal < 250000.) {
 		endcol *= createHealthLine(coord, (10000./resourceTotal)*size.x, 1., 21.);
  }
  if (levelOfDetail > 2. && resourceTotal < 100000.) {
 		endcol *= createHealthLine(coord, (5000./resourceTotal)*size.x, 1., 16.);
  }
  if (levelOfDetail > 3. && resourceTotal < 100000.) {
 		endcol *= createHealthLine(coord,...