Health bar three js javascript

Question

So I have a health bar that used to work in r118.1 but no longer does after upgrading to r127 im unsure of what i need to change though to get it back working? there is an error with the shader in r127 heres the code:

code:

import * as THREE from './three/build/three.module.js';

import {entity} from './entity.js';
import {math} from './math.js';


export const health_bar = (() => {
  const _VS = `
varying vec2 vUV;
void main() {
  vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
  gl_Position = projectionMatrix * mvPosition;
  vUV = uv;
}
`;

  const _PS = `
uniform vec3 colour;
uniform float health;
varying vec2 vUV;
out vec4 out_FragColor;
void main() {
  out_FragColor = vec4(mix(colour, vec3(0.0), step(health, vUV.y)), 1.0);
}
`;

class HealthBar extends entity.Component {
  constructor(params) {
    super();
    this._params = params;
    this._Initialize();
  }

  _Initialize() {
    const uniforms = {
      colour: {
        value: new THREE.Color( 0xff0000 ),
      },
      health: {
        value: 1.0,
      },
    };
    this._material = new THREE.ShaderMaterial( {
       uniforms: uniforms,
      vertexShader: _VS,
      fragmentShader: _PS,
      blending: THREE.NormalBlending,
      transparent: true,
      depthTest: false,
      depthWrite: false,
      side: THREE.DoubleSide,
    });

    this._geometry = new THREE.BufferGeometry();

    this._bar = new THREE.Mesh(this._geometry, this._material);
    this._bar.frustumCulled = false;
    this._bar.scale.set(2, 0.125, 1);

    this._realHealth = 1.0;
    this._animHealth = 1.0;

    this._params.parent.add(this._bar);
    this._GenerateBuffers();
  }

  InitComponent() {
    this._RegisterHandler('health.update', (m) => { this._OnHealth(m); });
  }

  _OnHealth(msg) {
    const healthPercent = (msg.health / msg.maxHealth);
    
    this._realHealth = healthPercent;
  }

  Update(timeElapsed) {
    const t = 1.0 - Math.pow(0.001, timeElapsed);

    this._animHealth = math.lerp(t, this._animHealth, this._realHealth);

    const _R = new THREE.Color(1.0, 0, 0);
    const _G = new THREE.Color(0.0, 1.0, 0.0);
    const c = _R.clone();
    c.lerpHSL(_G, this._animHealth);

    this._material.uniforms.health.value = this._animHealth;
    this._material.uniforms.colour.value = c;
    this._bar.position.copy(this._parent._position);
    this._bar.position.y += 8.0;
    this._bar.quaternion.copy(this._params.camera.quaternion);
  }

  _GenerateBuffers() {
    const indices = [];
    const positions = [];
    const uvs = [];

    const square = [0, 1, 2, 2, 3, 0];

    indices.push(...square);

    const p1 = new THREE.Vector3(-1, -1, 0);
    const p2 = new THREE.Vector3(-1, 1, 0);
    const p3 = new THREE.Vector3(1, 1, 0);
    const p4 = new THREE.Vector3(1, -1, 0);

    uvs.push(0.0, 0.0);
    uvs.push(1.0, 0.0);
    uvs.push(1.0, 1.0);
    uvs.push(0.0, 1.0);

    positions.push(p1.x, p1.y, p1.z);
    positions.push(p2.x, p2.y, p2.z);
    positions.push(p3.x, p3.y, p3.z);
    positions.push(p4.x, p4.y, p4.z);

    this._geometry.setAttribute(
        'position', new THREE.Float32BufferAttribute(positions, 3));
    this._geometry.setAttribute(
        'uv', new THREE.Float32BufferAttribute(uvs, 2));
    this._geometry.setIndex(
        new THREE.BufferAttribute(new Uint32Array(indices), 1));

    this._geometry.attributes.position.needsUpdate = true;
  }
};

  return {
    HealthBar: HealthBar,
  };
})();

and here is the shader error:

THREE.WebGLProgram: shader error: 0 35715 false gl.getProgramInfoLog invalid shaders THREE.WebGLShader: gl.getShaderInfoLog() fragment ERROR: 0:3: 'pc_fragColor' : must explicitly specify all locations when using multiple fragment outputs ERROR: 0:134: 'out_FragColor' : must explicitly specify all locations when using multiple fragment outputs 1: #version 300 es 2: #define varying in 3: out highp vec4 pc_fragColor; 4: #define gl_FragColor pc_fragColor 5: #define gl_FragDepthEXT gl_FragDepth 6: #define texture2D texture 7: #define textureCube texture 8: #define texture2DProj textureProj 9: #define texture2DLodEXT textureLod 10: #define texture2DProjLodEXT textureProjLod 11: #define textureCubeLodEXT textureLod 12: #define texture2DGradEXT textureGrad 13: #define texture2DProjGradEXT textureProjGrad 14: #define textureCubeGradEXT textureGrad 15: precision highp float; 16: precision highp int; 17: #define HIGH_PRECISION 18: #define SHADER_NAME ShaderMaterial 19: #define GAMMA_FACTOR 2 20: #define DOUBLE_SIDED 21: #define USE_SHADOWMAP 22: #define SHADOWMAP_TYPE_PCF_SOFT 23: uniform mat4 viewMatrix; 24: uniform vec3 cameraPosition; 25: uniform bool isOrthographic; 26: #define TONE_MAPPING 27: #ifndef saturate 28: #define saturate(a) clamp( a, 0.0, 1.0 ) 29: #endif 30: uniform float toneMappingExposure; 31: vec3 LinearToneMapping( vec3 color ) { 32: return toneMappingExposure * color; 33: } 34: vec3 ReinhardToneMapping( vec3 color ) { 35: color *= toneMappingExposure; 36: return saturate( color / ( vec3( 1.0 ) + color ) ); 37: } 38: vec3 OptimizedCineonToneMapping( vec3 color ) { 39: color *= toneMappingExposure; 40: color = max( vec3( 0.0 ), color - 0.004 ); 41: return pow( ( color * ( 6.2 * color + 0.5 ) ) / ( color * ( 6.2 * color + 1.7 ) + 0.06 ), vec3( 2.2 ) ); 42: } 43: vec3 RRTAndODTFit( vec3 v ) { 44: vec3 a = v * ( v + 0.0245786 ) - 0.000090537; 45: vec3 b = v * ( 0.983729 * v + 0.4329510 ) + 0.238081; 46: return a / b; 47: } 48: vec3 ACESFilmicToneMapping( vec3 color ) { 49: const mat3 ACESInputMat = mat3( 50: vec3( 0.59719, 0.07600, 0.02840 ), vec3( 0.35458, 0.90834, 0.13383 ), 51: vec3( 0.04823, 0.01566, 0.83777 ) 52: ); 53: const mat3 ACESOutputMat = mat3( 54: vec3( 1.60475, -0.10208, -0.00327 ), vec3( -0.53108, 1.10813, -0.07276 ), 55: vec3( -0.07367, -0.00605, 1.07602 ) 56: ); 57: color *= toneMappingExposure / 0.6; 58: color = ACESInputMat * color; 59: color = RRTAndODTFit( color ); 60: color = ACESOutputMat * color; 61: return saturate( color ); 62: } 63: vec3 CustomToneMapping( vec3 color ) { return color; } 64: vec3 toneMapping( vec3 color ) { return LinearToneMapping( color ); } 65: 66: vec4 LinearToLinear( in vec4 value ) { 67: return value; 68: } 69: vec4 GammaToLinear( in vec4 value, in float gammaFactor ) { 70: return vec4( pow( value.rgb, vec3( gammaFactor ) ), value.a ); 71: } 72: vec4 LinearToGamma( in vec4 value, in float gammaFactor ) { 73: return vec4( pow( value.rgb, vec3( 1.0 / gammaFactor ) ), value.a ); 74: } 75: vec4 sRGBToLinear( in vec4 value ) { 76: return vec4( mix( pow( value.rgb * 0.9478672986

• vec3( 0.0521327014 ), vec3( 2.4 ) ), value.rgb * 0.0773993808, vec3( lessThanEqual( value.rgb, vec3( 0.04045 ) ) ) ), value.a ); 77: } 78: vec4 LinearTosRGB( in vec4 value ) { 79: return vec4( mix( pow( value.rgb, vec3( 0.41666 ) ) * 1.055 - vec3( 0.055 ), value.rgb * 12.92, vec3( lessThanEqual( value.rgb, vec3( 0.0031308 ) ) ) ), value.a ); 80: } 81: vec4 RGBEToLinear( in vec4 value ) { 82: return vec4( value.rgb * exp2( value.a * 255.0 - 128.0 ), 1.0 ); 83: } 84: vec4 LinearToRGBE( in vec4 value ) { 85: float maxComponent = max( max( value.r, value.g ), value.b ); 86: float fExp = clamp( ceil( log2( maxComponent ) ), -128.0, 127.0 ); 87: return vec4( value.rgb / exp2( fExp ), ( fExp + 128.0 ) / 255.0 ); 88: } 89: vec4 RGBMToLinear( in vec4 value, in float maxRange ) { 90: return vec4( value.rgb * value.a * maxRange, 1.0 ); 91: } 92: vec4 LinearToRGBM( in vec4 value, in float maxRange ) { 93: float maxRGB = max( value.r, max( value.g, value.b ) ); 94: float M = clamp( maxRGB / maxRange, 0.0, 1.0 ); 95: M = ceil( M * 255.0 ) / 255.0; 96: return vec4( value.rgb / ( M * maxRange ), M ); 97: } 98: vec4 RGBDToLinear( in vec4 value, in float maxRange ) { 99: return vec4( value.rgb * ( ( maxRange / 255.0 ) / value.a ), 1.0 ); 100: } 101: vec4 LinearToRGBD( in vec4 value, in float maxRange ) { 102: float maxRGB = max( value.r, max( value.g, value.b ) ); 103: float D = max( maxRange / maxRGB, 1.0 ); 104: D = clamp( floor( D ) / 255.0, 0.0, 1.0 ); 105: return vec4( value.rgb * ( D * ( 255.0 / maxRange ) ), D ); 106: } 107: const mat3 cLogLuvM = mat3( 0.2209, 0.3390, 0.4184, 0.1138, 0.6780, 0.7319, 0.0102, 0.1130, 0.2969 ); 108: vec4 LinearToLogLuv( in vec4 value ) { 109: vec3 Xp_Y_XYZp = cLogLuvM * value.rgb; 110: Xp_Y_XYZp = max( Xp_Y_XYZp, vec3( 1e-6, 1e-6, 1e-6 ) ); 111: vec4 vResult; 112: vResult.xy = Xp_Y_XYZp.xy / Xp_Y_XYZp.z; 113: float Le = 2.0 * log2(Xp_Y_XYZp.y) + 127.0; 114: vResult.w = fract( Le ); 115: vResult.z = ( Le - ( floor( vResult.w * 255.0 ) ) / 255.0 ) / 255.0; 116: return vResult; 117: } 118: const mat3 cLogLuvInverseM = mat3( 6.0014, -2.7008, -1.7996, -1.3320, 3.1029, -5.7721, 0.3008, -1.0882, 5.6268 ); 119: vec4 LogLuvToLinear( in vec4 value ) { 120: float Le = value.z * 255.0 + value.w; 121: vec3 Xp_Y_XYZp; 122: Xp_Y_XYZp.y = exp2( ( Le - 127.0 ) / 2.0 ); 123: Xp_Y_XYZp.z = Xp_Y_XYZp.y / value.y; 124: Xp_Y_XYZp.x = value.x * Xp_Y_XYZp.z; 125: vec3 vRGB = cLogLuvInverseM * Xp_Y_XYZp.rgb; 126: return vec4( max( vRGB, 0.0 ), 1.0 ); 127: } 128: vec4 linearToOutputTexel( vec4 value ) { return LinearTosRGB( value ); } 129: 130: 131: uniform vec3 colour; 132: uniform float health; 133: varying vec2 vUV; 134: out vec4 out_FragColor; 135: void main() { 136: out_FragColor = vec4(mix(colour, vec3(0.0), step(health, vUV.y)), 1.0); 137: } 138: Mt.forEach.n. @ eruda:27 WebGLProgram @ three.module.js:17234 acquireProgram @ three.module.js:17700 getProgram @ three.module.js:24565 setProgram @ three.module.js:24723 WebGLRenderer.renderBufferDirect @ three.module.js:23926 renderObject @ three.module.js:24504 renderObjects @ three.module.js:24477 WebGLRenderer.render @ three.module.js:24257 (anonymous) @ main.js:1377 256WebGL: INVALID_OPERATION: useProgram: program not valid

thank you in advance for any help.

Answer 1

I think the problem is with out vec4 out_FragColor;.

out vec4 out_FragColor;
void main() {
  out_FragColor = vec4(mix(colour, vec3(0.0), step(health, vUV.y)), 1.0);
}

Why don't you just use the default gl_FragColor? When using a ShaderMaterial, Three.js automatically takes care of the fragment output for you, so you don't have to override it.

// out vec4 out_FragColor; <-Remove this line
void main() {
  gl_FragColor= vec4(mix(colour, vec3(0.0), step(health, vUV.y)), 1.0);
}