Problem with webGL uniforms for particle emitter : "uniform1f: location not for current program"

Question

I have created a particle emitter class with WebGL/JS and it works fine with one instanciation. The problem is when I try to create 2 instances of this object. I get an error message from the GPU : WebGL: INVALID_OPERATION: uniform1f: location not for current program

So, I know that it is a problem with the shader program link : One program per uniform location. But after many searches on the subject, I can't get a solution. I'm not enough familiar with the concept of uniform location and attributes buffer to understand the bug.

Here is the code of my class. The two instanciation are at the beginning of the code. https://codepen.io/stephanemill/pen/KKXQJqG

What you are seeing :

the first emitter starts
after 500ms, the second emitter starts, and then,
- stop the execution of the first emitter,
- throw the error message

window.addEventListener('load',()=>{
    
    new Particle({      
            quantity: 2000,         
            timeFactor: 100,            
            lifetime: 10,           
            fadeOut: .2,            
            size: 2,
            x: 50,          
            y: 70
    });
    
    setTimeout(()=>{            
            
        new Particle({          
                quantity: 2000,             
                timeFactor: 100,                
                lifetime: 5,                
                fadeOut: .2,                
                size: 2,                            
                x: 50,              
                y: 50,              
        });

    },500)
});

    
class Particle {

    static id = 0;
    
    static canvas = document.querySelector("#canvas-webgl");
    
    constructor(settings){
                
        settings = Object.assign({
            
            // Nombre de particules
            quantity: 200,
            
            // Taille des particules
            size: 2,        

            color: {
                r: {
                    min: 255,
                    max: 255,
                },
                g: {
                    min: 255,
                    max: 255,
                },
                b: {
                    min: 0,
                    max: 0,
                },
            },
        
            timeFactor: 1,
            
            x: 50,
            y: 50,
            
            // Durée de vie
            lifetime: 2,

            // Durée du fadeout         
            fadeOut: 1,     
            
            speed: { 
                min: 0, 
                max: 5,
                spread: 0,              
                sigma: .2,  
            },
            
            angle: {
                min: 0,
                max: 90,
                spread: 0,              
                sigma: .2,              
            },          
            
            gravity: 0,
            
            texture: null,
                        
        }, settings);
        
        Object.assign(this, settings);
        
        this.canvas     = this.constructor.canvas;
        
        this.ctx        = this.canvas.getContext("webgl");
        
        this.width      = this.canvas.width;
        
        this.height     = this.canvas.height;
        
        this.ratio      = this.width / this.height;
        
        this.startTime  = Date.now();
        
        if(!this.ctx) {
            alert("WebGL not supported!");
        }       
        
        
        // Séquence de démarrage du flux
        // -------------------------------      
        this.initProgram();
        
        this.initAttributes();
        
        this.initUniforms();
        
        this.initBlending();
        
        // this.initHUD();
        
        this.autokill();
        
        this.render();
        
        this.constructor.id++;
        
        return this;
    }
    
    initProgram(){  
        this.codeVertexShader   = this.getShader('explosion');
        this.codeFragmentShader = this.getFragmentShader();
        
        // Création du vertex shader
        this.vertexShader = this.ctx.createShader(this.ctx.VERTEX_SHADER);
        this.ctx.shaderSource(this.vertexShader, this.codeVertexShader);     
        this.ctx.compileShader(this.vertexShader);

        // Création du fragment shader
        this.fragmentShader = this.ctx.createShader(this.ctx.FRAGMENT_SHADER);
        this.ctx.shaderSource(this.fragmentShader, this.codeFragmentShader);
        this.ctx.compileShader(this.fragmentShader);

        // Création du programme
        this.program = this.ctx.createProgram();
        this.ctx.attachShader(this.program, this.vertexShader);
        this.ctx.attachShader(this.program, this.fragmentShader);
        this.ctx.linkProgram(this.program);
        this.ctx.useProgram(this.program);  
    }

    initAttributes(){       
        /*
        --------------------------------------------
        Mise en mémoire des attributs
        --------------------------------------------
        */
        
        const arraySpeedAngle   = new Float32Array(this.quantity * 2);
        const arrayPosition     = new Float32Array(this.quantity * 2);
        const arrayGravity      = new Float32Array(this.quantity * 2);
        const arrayColor        = new Float32Array(this.quantity * 3);
        
        for(let i=0; i{
            this.render();
        });
    }
    
    getShader(){
        
            
                
            return `
                precision mediump float;

                attribute   vec2    speed_angle;
                attribute   vec2    position;
                attribute   vec2    gravity;
                attribute   vec3    color;
                            
                uniform     float   time; 
                uniform     float   timeFactor; 
                uniform     float   ratio; 
                uniform     float   size; 

                varying lowp vec3 vColor;
            
                void main(void) {
                    gl_PointSize = size;
                    
                    vColor = color;
                    
                    

                    // float modTime    = mod(time*10., 1.);
                    float modTime   = time / timeFactor;
                    float speed     = speed_angle.x;
                    float angle     = speed_angle.y;
                    float G         = gravity.x;

                    // if(sin((speed*(time))) > .5)                     
                        // gl_PointSize  *= gl_PointSize * sin(speed);

                    float x0 = position.x;
                    float y0 = position.y;

                    // Equations horaires de la parabole
                    // ---------------------------------
                    float x = speed * cos(angle) * modTime + x0;
                    float y = -.5 * G * pow(modTime, 2.) + speed * sin(angle) * modTime + y0;

                    // Ratio canvas
                    // ---------------------------------
                    x /= ratio;
                    
                    // x = x + sin(y)/.2;

                    gl_Position=vec4(    x , y,      0.,1.);      
                }`;
                
            
            
    }
                        
    getFragmentShader(){
        
        return `
            precision mediump float; 
            
            varying lowp vec3 vColor;
            
            uniform float time;
            uniform float lifetime;
            uniform float fadeOut;
            uniform sampler2D texture;
            
            vec4 baseTexture;
            
            void main(void) {
                  // float modTime  = mod(T*10., 1.);
                
                vec3 fragmentColor = vColor;                
                
                // float x = gl_PointCoord.x  * sin(T*10.*V.x);
                // float y = gl_PointCoord.y  * sin(T*10.*V.y);
                
                // vec2 coords = vec2(x,y);
                
                // baseTexture = texture2D( texture,  coords);
                baseTexture = texture2D( texture,  gl_PointCoord);
                
                // fadeOut
                // ----------------------------------
                float opacity = 1.;
                if(time > lifetime)
                        opacity -= (time - lifetime) / fadeOut;
                
                // To the white
                // ----------------------------------
                float whiteDuration = .5;
                if(time < whiteDuration){
                    float deltaColorR = (1. - fragmentColor.x) * (whiteDuration - time);
                    float deltaColorG = (1. - fragmentColor.y) * (whiteDuration - time);
                    float deltaColorB = (1. - fragmentColor.z) * (whiteDuration - time);
                    
                    fragmentColor = vec3(fragmentColor.x + deltaColorR, fragmentColor.y + deltaColorG, fragmentColor.z + deltaColorB);
                }
                
                
                
                gl_FragColor = vec4(fragmentColor.x, fragmentColor.y, fragmentColor.z, opacity);
                
                
                // gl_FragColor = vec4(vColor.x, vColor.y, vColor.z, opacity);
                
                // gl_FragColor = vec4(.6, 1.0, 1.0, opacity);
                
                
                // gl_FragColor = vec4(1.0, 1.0, 1., 1.);
                // gl_FragColor = baseTexture * vec4(.7 * sin(V.x), .0, 1., 1.);
                // gl_FragColor = baseTexture;
                
                
                // rotation
                // https://www.py4u.net/discuss/95325
            }`;
    }
    
    autokill(){
        setTimeout(()=>{
            this.kill();
            // myParticle();
        }, (this.lifetime + this.fadeOut)*1000);
    }

    kill(){
        this.ctx.bindTexture(this.ctx.TEXTURE_2D, null);
        this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, null);
        this.ctx.bindBuffer(this.ctx.ELEMENT_ARRAY_BUFFER, null);
        this.ctx.bindRenderbuffer(this.ctx.RENDERBUFFER, null);
        this.ctx.bindFramebuffer(this.ctx.FRAMEBUFFER, null);
        this.ctx.deleteBuffer(this.bufferSpeedAngle);
        this.ctx.deleteBuffer(this.bufferPosition);
        this.ctx.deleteBuffer(this.bufferGravity);
        this.ctx.deleteProgram(this.program);
        this.ctx.deleteShader(this.fragmentShader);
        this.ctx.deleteShader(this.vertexShader);
        // https://stackoverflow.com/questions/23598471/how-do-i-clean-up-and-unload-a-webgl-canvas-context-from-gpu-after-use
        
        window.cancelAnimationFrame(this.loopID);
        
        this.ctx.clear(this.ctx.COLOR_BUFFER_BIT);
        
        // console.clear();
        // new Particle(1000);
    }

    
} // End of class

LJᛃ · Accepted Answer

You're (unnecessarily) creating two shader programs, one with each instantiation but you only call useProgram in your initProgram method, however calling useProgram sets a global state on the rendering context (which in both instances is the same as it's requested from the same canvas) causing the program to remain bound until changed. Thus when you render with your first emitter it tries to render with the shader program of the second emitter (once that one's created). You need to select the program you want to render with every time you're rendering, so call useProgram in your render method.

Problem with webGL uniforms for particle emitter : "uniform1f: location not for current program"

Answers (1)

Related Questions

Problem with webGL uniforms for particle emitter : &quot;uniform1f: location not for current program&quot;

Answers (1)

Related Questions

Problem with webGL uniforms for particle emitter : "uniform1f: location not for current program"