# No graphics after resetShader()

**URL:** https://discourse.processing.org/t/no-graphics-after-resetshader/13585
**Category:** Coding Questions
**Created:** [August 25, 2019, 8:30am UTC](https://discourse.processing.org/t/no-graphics-after-resetshader/13585 "2019-08-25T08:30:13Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![pazka](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/pazka/32/6241_2.png) [@pazka](https://discourse.processing.org/u/pazka)
#### Post date: [August 25, 2019, 8:30am UTC](https://discourse.processing.org/t/no-graphics-after-resetshader/13585/1 "2019-08-25T08:30:13Z")

</div>

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 :

```auto
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 :

```auto
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 !

---

<div class="post-metadata">

### Author: ![pazka](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/pazka/32/6241_2.png) [@pazka](https://discourse.processing.org/u/pazka)
#### Post date: [August 25, 2019, 3:53pm UTC](https://discourse.processing.org/t/no-graphics-after-resetshader/13585/2 "2019-08-25T15:53:35Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [August 26, 2019, 10:20pm UTC](https://discourse.processing.org/t/no-graphics-after-resetshader/13585/3 "2019-08-26T22:20:49Z")

</div>

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](https://github.com/processing/p5.js/issues)

---

<div class="post-metadata">

### Author: ![cecarlsen](https://avatars.discourse-cdn.com/v4/letter/c/e9c0ed/32.png) [@cecarlsen](https://discourse.processing.org/u/cecarlsen)
#### Post date: [February 16, 2020, 12:13pm UTC](https://discourse.processing.org/t/no-graphics-after-resetshader/13585/4 "2020-02-16T12:13:07Z")

</div>

I ran into the same issue and also ended up using the workaround using createGraphics. I suspect the problem is that the vertex shader is not being reset by resetShader. I found that drawing in normalised space (0.0-1.0) using beginShape and vertex works after resetShader, so perhaps the original pixel space to clip space transformation is not reset.

---

<div class="post-metadata">

### Author: ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [February 16, 2020, 4:33pm UTC](https://discourse.processing.org/t/no-graphics-after-resetshader/13585/5 "2020-02-16T16:33:47Z")

</div>

Thanks so much for sharing your experience.

If you have experience with a `resetShader()` issue and a workaround, would you be willing to report it as a new issue to the developers?

- [https://github.com/processing/p5.js/issues?utf8=✓&q=is%3Aissue+is%3Aopen+resetShader](https://github.com/processing/p5.js/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+resetShader)

---

<div class="post-metadata">

### Author: ![JulesFouchy](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/julesfouchy/32/9246_2.png) [@JulesFouchy](https://discourse.processing.org/u/JulesFouchy)
#### Post date: [May 18, 2020, 12:34pm UTC](https://discourse.processing.org/t/no-graphics-after-resetshader/13585/6 "2020-05-18T12:34:38Z")

</div>

Hello there !  
I’ve just run into the same issue, made some research, almost wrote a bug report, made some more experiments, and now I think I understand a little better what’s going on ^^

Because we are using WEBGL mode, everything is 3D (unlike in Processing where there is both P2D and P3D modes that are compatible with shaders).  
Therefore, deciding what is on top of what depends on the z (depth) value, and not on the order of drawing anymore !

If you are doing 2D drawing and want to recover the default behavior, you can disable the depth test with these two lines after createCanvas :

```auto
const gl = canvas.getContext('webgl')
gl.disable(gl.DEPTH_TEST)

```

Here is a simple example : [https://editor.p5js.org/JulesFouchy/sketches/beiJNt342](https://editor.p5js.org/JulesFouchy/sketches/beiJNt342)

Hope this helps !

---

<div class="post-metadata">

### Author: ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [May 18, 2020, 3:43pm UTC](https://discourse.processing.org/t/no-graphics-after-resetshader/13585/7 "2020-05-18T15:43:40Z")

</div>

Thank you so much, @JulesFouchy – that example is extremely helpful!
