Health bar stops working after upgrading to r127

Questions
1

so the health bar used to work 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


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,
  };
})();
2

console:

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.<computed> @ 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
4
5

anyone? at all have any idea

6

From the error it sounds like you’re using multiple render targets. You should provide a working demonstration of the issue with full context if you’d like people to help.

7

fixed;


  const _PS = `
uniform vec3 colour;
uniform float health;

varying vec2 vUV;
void main() {
  gl_FragColor = vec4(mix(colour, vec3(0.0), step(health, vUV.y)), 1.0);;
   }
`;