# Same shader, multiple graphics?

**URL:** <https://discourse.processing.org/t/same-shader-multiple-graphics/34427>\
**Category:** Beginners\
**Created:** [January 2, 2022, 1:33am UTC](https://discourse.processing.org/t/same-shader-multiple-graphics/34427 "2022-01-02T01:33:40Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![modusponens](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/modusponens/32/13888_2.png) [@modusponens](https://discourse.processing.org/u/modusponens)\
**Post date:** [January 2, 2022, 1:33am UTC](https://discourse.processing.org/t/same-shader-multiple-graphics/34427/1 "2022-01-02T01:33:40Z")

</div>

Is it possible for more than one graphics object to use the same shader? In this sketch here, I would expect two squares to be drawn, a yellow one on the left and a blue on the right, but only the yellow one appears:

> **[p5.js Web Editor](https://editor.p5js.org/modusponens/sketches/znbnIw3pI)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

As far as I can tell, the only way to see both squares is to draw them both with the same graphics object.

Also, sub-question, is this really the only way to do this? Why can’t I use the `rect(x, y, w, h)` function to define where a rectangle is drawn and how large it should be? It seems that the numbers I pass into that function are totally irrelevant when I use a shader. Have I always been doing something wrong? I would certainly have guessed so, but looking at everyone else’s code, it seems that this is the only way to do it.

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [January 2, 2022, 2:41am UTC](https://discourse.processing.org/t/same-shader-multiple-graphics/34427/2 "2022-01-02T02:41:39Z")

</div>

Because of the way WebGL works, each `p5.Shader` can only be used with the first `p5.Graphics` that uses it (because this performs compilation). Here’s a working version that simply creates two separate `p5.Shaders`.

```auto
let s0, s1, target0, target1;

function preload() {
  s0 = loadShader('basic.vert', 'SolidColor.frag');
  s1 = loadShader('basic.vert', 'SolidColor.frag');
}

function setup() {
  createCanvas(400, 400);
  
  target0 = createGraphics(100, 100, WEBGL);
  target1 = createGraphics(100, 100, WEBGL);
  
  target0.shader(s0);
  s0.setUniform("uColor", [1, 1, 0]);
  target0.rect(0, 0, 0, 0);
  
  target1.shader(s1);
  s1.setUniform("uColor", [0, 0, 1]);
  target1.rect(0, 0, 0, 0);
  
  background(40);
  image(target0, 50, 150);
  image(target1, 250, 150);
}

```

Regarding the behavior of shaders with the `rect()` function, this is because of the content of your vertex shader. The vertex coordinates passed to the shader are not in screen space, they are in model space, and several transforms need to be applied to have the pixels rendered by the shader correspond to the position of the vertices of your geometry:

```auto
// Transformation matrices
uniform mat4 uModelViewMatrix;
uniform mat4 uProjectionMatrix;

attribute vec3 aPosition;
// P5 provides us with texture coordinates for most shapes
attribute vec2 aTexCoord;

// This is a varying variable, which in shader terms means that it will be passed from the vertex shader to the fragment shader
varying vec2 vTexCoord;

void main() {
  // Copy the texcoord attributes into the varying variable
  vTexCoord = aTexCoord;

  vec4 viewModelPosition = uModelViewMatrix * vec4(aPosition, 1.0);
  gl_Position = uProjectionMatrix * viewModelPosition;
}

```

https://editor.p5js.org/Kumu-Paul/full/9RMzCJwMX

---

<div class="post-metadata">

**Author:** ![modusponens](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/modusponens/32/13888_2.png) [@modusponens](https://discourse.processing.org/u/modusponens)\
**Post date:** [January 4, 2022, 6:38am UTC](https://discourse.processing.org/t/same-shader-multiple-graphics/34427/3 "2022-01-04T06:38:49Z")

</div>

Thanks so much for your reply, this was very helpful.