# Multiple shaders

**URL:** <https://discourse.processing.org/t/multiple-shaders/4595>\
**Category:** Coding Questions\
**Created:** [October 18, 2018, 1:14pm UTC](https://discourse.processing.org/t/multiple-shaders/4595 "2018-10-18T13:14:00Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![bitCrasher](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bitcrasher/32/408_2.png) [@bitCrasher](https://discourse.processing.org/u/bitCrasher)\
**Post date:** [October 18, 2018, 1:14pm UTC](https://discourse.processing.org/t/multiple-shaders/4595/1 "2018-10-18T13:14:00Z")

</div>

is there a better solution to create a sketch using multiple shaders?

```auto
PShader myShader, pixelate;
PImage img;
PGraphics pg, buf;

void settings() {
  size(1000, 1000, P3D);
}

void setup() {
  myShader = loadShader("glitch.glsl");
  pixelate = loadShader("pixelate.glsl");
  myShader.set("iResolution", float(width), float(height));
  pixelate.set("pixels", 200., 200.);
  pg = createGraphics(width, height, P3D);
  buf = createGraphics(width, height, P3D);
}

void draw() {
  pg.beginDraw();
  pg.translate(width/2, height/2);
  pg.background(0);
  pg.fill(255);
  pg.stroke(0);
  pg.rotateY(frameCount*0.02);
  pg.sphere(400);
  pg.endDraw();
  pg.filter(pixelate);
  myShader.set("iTime", millis()/1.);

  //buf.beginDraw();
  buf=pg;
  //buf.endDraw();
  buf.filter(myShader);
  image(buf, 0, 0, width, height);
}

```

thank you!!

---

<div class="post-metadata">

**Author:** ![neilcsmith](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/neilcsmith/32/144_2.png) [@neilcsmith](https://discourse.processing.org/u/neilcsmith)\
**Post date:** [October 18, 2018, 4:32pm UTC](https://discourse.processing.org/t/multiple-shaders/4595/2 "2018-10-18T16:32:06Z")

</div>

What do you mean by “is there a better solution” exactly?

Some comments -

What is `buf` for? You seem to immediately set `buf=pg`.

Do you need to use filter with myShader? Could you use this instead?

```auto
shader(myShader);
image(buf, 0, 0, width, height);

```

Given that you don’t do anything with the output of the first shader before drawing through the second shader, could you merge the two shaders into a single shader?

It all depends on what the shaders are doing really!

---

<div class="post-metadata">

**Author:** ![bitCrasher](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bitcrasher/32/408_2.png) [@bitCrasher](https://discourse.processing.org/u/bitCrasher)\
**Post date:** [October 18, 2018, 4:57pm UTC](https://discourse.processing.org/t/multiple-shaders/4595/3 "2018-10-18T16:57:19Z")

</div>

nope…i can’t use one shader, they are really different.

but i’ve just see that it works fine also like this:

```auto
void draw() {
  println(frameRate);
  pg.beginDraw();
  pg.translate(width/2, height/2);
  pg.background(0);
  pg.noFill();
  pg.stroke(255);
  pg.rotateY(frameCount*0.02);
  pg.sphere(400);
  pg.endDraw();
  pg.filter(pixelate);
  pg.filter(myShader);
  myShader.set("iTime", millis()/1.);
  image(pg, 0, 0, width, height);
}

```

i never use filter before, but it looks work fine!!

btw thank you for the answer @neilcsmith !!

---

<div class="post-metadata">

**Author:** ![neilcsmith](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/neilcsmith/32/144_2.png) [@neilcsmith](https://discourse.processing.org/u/neilcsmith)\
**Post date:** [October 18, 2018, 5:31pm UTC](https://discourse.processing.org/t/multiple-shaders/4595/4 "2018-10-18T17:31:23Z")

</div>

Yes, it was a long shot on the single shader! 😄

You should be able to do …

```auto
pg.filter(pixelate);
myShader.set("iTime", millis()/1.);
shader(myShader);
image(pg, 0, 0, width, height);

```

… though, which will use the second shader in the draw to the screen, which will cut down the workload a bit.

Surely you want to set `iTime` before you use the shader either way?!

---

<div class="post-metadata">

**Author:** ![bitCrasher](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bitcrasher/32/408_2.png) [@bitCrasher](https://discourse.processing.org/u/bitCrasher)\
**Post date:** [October 18, 2018, 5:32pm UTC](https://discourse.processing.org/t/multiple-shaders/4595/5 "2018-10-18T17:32:57Z")

</div>

oh…in some example i saw i ever see set after shader declaretion!!  
it’s uncorrect?

---

<div class="post-metadata">

**Author:** ![neilcsmith](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/neilcsmith/32/144_2.png) [@neilcsmith](https://discourse.processing.org/u/neilcsmith)\
**Post date:** [October 18, 2018, 5:35pm UTC](https://discourse.processing.org/t/multiple-shaders/4595/6 "2018-10-18T17:35:19Z")

</div>

Yes! You’re currently setting the value for the next time though draw().

---

<div class="post-metadata">

**Author:** ![bitCrasher](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bitcrasher/32/408_2.png) [@bitCrasher](https://discourse.processing.org/u/bitCrasher)\
**Post date:** [October 18, 2018, 5:36pm UTC](https://discourse.processing.org/t/multiple-shaders/4595/7 "2018-10-18T17:36:44Z")

</div>

oh, ok!! thanks 🙂