No graphics after resetShader()

Hello everybody !

I come to you because I have been encountering a problem that I have a lot of struggle to solve. At this point I am almost sure it’s a bug but I’d rather have your opinion first !

My goal is to draw the background with an animated shader, then draw with basic P5 functions. The problem is that I cannot draw anything after resetting the shader with the proper function call. Did I forgot something ?

Here is the code of the main script.js file :

var _p
var _shaderMngr 
var _dataMngr = {
    getTimeRef : ()=>{
        return _p.frameCount *20
    }
}

let s = function( p ){
    _p = p
    
    p.preload =()=>{
        _shaderMngr =  new ShaderManager(p)
        _shaderMngr.loadShaders()
    }

    p.setup =()=> {
        p.createCanvas(window.innerWidth,window.innerHeight,p.WEBGL)
    }
    
    p.draw=()=>  {

        _shaderMngr.shaders.storm.run()
        p.quad(0,0,p.width,0,p.width,p.height,0,p.height)
        _shaderMngr.resetShader()

        p.fill([255,00,00])
        p.stroke([0,255,2])
        p.rect(-100,-150,200,200)
    }

    
}
let myp5 = new p5(s)

and the code in the other file managing my shader stuff :

class ShaderManager{
    p
    shaders = {}

    constructor(p){
        this.p = p   
    }

    loadShaders(){
        this.shaders.storm = new ShaderStorm(this.p)
    }

    resetShader(){
        this.p.resetShader();
    }
}

class ShaderStorm{
    p
    shader 
    
    constructor(p){
        this.p = p   
        this.shader = this.p.loadShader("datavisu.shader.storm.vert","datavisu.shader.storm.frag")
    //    this.shader.setUniform('iResolution',[p.width,p.height])
    }

    run (){
        // this.shader.setUniform('iTime',_dataMngr.getTimeRef())
        this.shader.setUniform('iTime',_dataMngr.getTimeRef()/1000)
        this.p.shader(this.shader)
    }

    update (){
        this.shader.setUniform('iTime',_dataMngr.getTimeRef()/1000)
    }
}

I have it set that way because I extracted it from my main project for further testing. Can you help me with this problem ? I have been stuck for quite sometimes now.
Thank you very much for your time !

1 Like

I have found a workaround with p.createGraphics(p,w,h,p.WEBGL) which handles my shader stuff and drawing this graphics when I need to in my non-webgl main p5 buffer.

I’m still curious I anyone has an explanation about the first behaviour.

Honestly not sure – unfamiliar with the shader pipeline in p5.js. If you think it is a bug, at some point consider reporting it on https://github.com/processing/p5.js/issues