# How to apply two textures to the same PShape?

**URL:** <https://discourse.processing.org/t/how-to-apply-two-textures-to-the-same-pshape/5971>\
**Category:** Coding Questions\
**Created:** [November 26, 2018, 7:35pm UTC](https://discourse.processing.org/t/how-to-apply-two-textures-to-the-same-pshape/5971 "2018-11-26T19:35:34Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [November 26, 2018, 7:35pm UTC](https://discourse.processing.org/t/how-to-apply-two-textures-to-the-same-pshape/5971/1 "2018-11-26T19:35:34Z")

</div>

![2018-11-26-202758_1000x1000_scrot](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/92dadbcc9dc5a6c1a21cb0245e4d92db90672b46.png)

Hi, I have created some code that takes a polyline and creates a mesh surrounding the polyline (in the image there’s a bunch of them). Next I want to add a second texture to control the transparency.

I want this mask to be independent from the color texture, so I can change their uv coordinates without affecting each other.

I could write my own shader, pass the alpha texture as a uniform, but what I’m not sure about is about the second set of uv coordinates. I see `PShape` has a `setAttrib` method. Can I use that to define my own vertex attributes? In other environments you can define specular maps, bump maps, etc. In Processing, would I need to switch to low level OpenGL to achieve such features?

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [November 26, 2018, 9:23pm UTC](https://discourse.processing.org/t/how-to-apply-two-textures-to-the-same-pshape/5971/2 "2018-11-26T21:23:18Z")

</div>

I figured out a “hack”: since I’m not using normals in my shapes I can ~~ab~~ use them as a second texture coordinates, so I can call `shp.normal(uv2.x, uv2.y, 0)`. Then I must make use of those values in the shader. That should work.

Update: or even easier: I could put uv2.x into the red component and uv2.y into the green component of the color.

I’m still curious about [attrib()](https://github.com/processing/processing/blob/master/core/src/processing/opengl/PShapeOpenGL.java#L1138) and [setAttrib()](https://github.com/processing/processing/blob/master/core/src/processing/opengl/PShapeOpenGL.java#L1752) and if I can define my own attributes for vertices. I’ll try and see what happens.

Update 2: I made it work using `normal` to store the second uv coordinates. `color` would not work, because you set vertex color values as an integer even if they end up being floats in the shader.  
Still need to polish it a bit, but I’m happy to see the partial transparency working 🙂

 ![2018-11-27-133845_1000x1000_scrot](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/d0806815317093f49b1cd99393c93d5965c743f9.png)

---

<div class="post-metadata">

**Author:** ![cansik](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/cansik/32/8815_2.png) [@cansik](https://discourse.processing.org/u/cansik)\
**Post date:** [May 29, 2019, 9:01am UTC](https://discourse.processing.org/t/how-to-apply-two-textures-to-the-same-pshape/5971/3 "2019-05-29T09:01:57Z")

</div>

Have you ever found out how to use `setAttrib` and `attrib` method to create your own attributes in the shader? It seems that it does not work properly in the recent version of processing.

If I setup a new vertex attribute with `shape.attrib("intensity", 0.5f);`, the value is not stored in the attribute. Also if I later update each vertex with `shape.setAttrib("intensity", i, intensity);`. The attribute is always `0.0`.

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [May 29, 2019, 9:52am UTC](https://discourse.processing.org/t/how-to-apply-two-textures-to-the-same-pshape/5971/4 "2019-05-29T09:52:24Z")

</div>

Hi! I didn’t try. Could you share a small test program to try?

---

<div class="post-metadata">

**Author:** ![cansik](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/cansik/32/8815_2.png) [@cansik](https://discourse.processing.org/u/cansik)\
**Post date:** [May 29, 2019, 2:28pm UTC](https://discourse.processing.org/t/how-to-apply-two-textures-to-the-same-pshape/5971/5 "2019-05-29T14:28:05Z")

</div>

Of course, there you go ([download](https://github.com/cansik/processing-vertex-attributes/archive/master.zip) the full repository to execute with the shaders). The sketch creates random vertices in 3d and render them as points. The pont size can be set through a uniform, and the idea was to use more attributes. As an example I’ve just added a simple `pointIndex` attribute, which represents the id of the vertex (normalized) and is used to control the red channel of the color.

This is how it looks (no red at all):

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/dbfadff417e9478d24dc9ac635ed1cea53d72d93.png)

> <https://github.com/cansik/processing-vertex-attributes/blob/master/VertexAttributeExample.pde>

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [May 29, 2019, 7:14pm UTC](https://discourse.processing.org/t/how-to-apply-two-textures-to-the-same-pshape/5971/6 "2019-05-29T19:14:41Z")

</div>

If you only need the vertex id, you could maybe use [https://www.khronos.org/registry/OpenGL-Refpages/gl4/html/gl\_VertexID.xhtml](https://www.khronos.org/registry/OpenGL-Refpages/gl4/html/gl_VertexID.xhtml) ?

I suggest calling `hint(DISABLE_OPTIMIZED_STROKE);` to avoid unexpected effects caused by Processing optimizations.

---

<div class="post-metadata">

**Author:** ![cansik](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/cansik/32/8815_2.png) [@cansik](https://discourse.processing.org/u/cansik)\
**Post date:** [May 29, 2019, 7:16pm UTC](https://discourse.processing.org/t/how-to-apply-two-textures-to-the-same-pshape/5971/7 "2019-05-29T19:16:25Z")

</div>

> [@hamoid](#):
>
> hint(DISABLE\_OPTIMIZED\_STROKE);

No, the final goal is not to have the vertex index 🙂 This is just a simple test, to see if it works or not. In threejs and plain opengl it is straightforward to add new vertex attributes, but it seems that it is broken in processing. Thanks for the optimization hint, but does it even affect the rendering if there are only points?

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [May 29, 2019, 8:53pm UTC](https://discourse.processing.org/t/how-to-apply-two-textures-to-the-same-pshape/5971/8 "2019-05-29T20:53:17Z")

</div>

The hint would change the value of `gl_VertexID` if there were more than one shape, as all shapes would be sent in one batch (if I understood it correctly).

> [@PShape::attrib() and PShape::setAttrib() dont work proprely](https://discourse.processing.org/t/pshape-attrib-and-pshape-setattrib-dont-work-proprely/845):
>
> the attrib() and setAttrib() do not work proprely in all scenarios The only way it works is when using attrib() in a not GROUP PShape. Here is a working Exemple : // // Working Exemple // PShape shape; PShader shader; public void setup() { size(500, 500, P2D); shape = createShape(); shape.beginShape(); // Visual shape.noStroke(); shape.fill(255, 0, 0); // Not supposed to be Red // Custom Attribute shape.attrib("vert\_color", 1.0, 0.5, 0.0, 1.0); // Supposed to be Or…

---

<div class="post-metadata">

**Author:** ![cansik](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/cansik/32/8815_2.png) [@cansik](https://discourse.processing.org/u/cansik)\
**Post date:** [May 30, 2019, 10:18am UTC](https://discourse.processing.org/t/how-to-apply-two-textures-to-the-same-pshape/5971/9 "2019-05-30T10:18:00Z")

</div>

I already knew this thread, but the code was not working for me. I’ve adapted the shader now, so it runs under MacOS too. It seems that if I change the shape mode to `POINTS` and adapting the shader breaks it. The `vert_color` attribute is always just black `vec4(0.0, 0.0, 0.0, 0.0)`.

```auto
PShape shape;
PShader shader;

public void setup() {
  size(500, 500, P3D);

  shape = createShape();
  shape.beginShape(POINTS);

  // Visual
  shape.noFill();
  shape.stroke(255, 0, 0);

  // Custom Attribute
  shape.attrib("vert_color", 1.0, 0.5, 0.0, 1.0); // Supposed to be Orange

  shape.vertex(-100, -100);
  shape.vertex(100, -100);
  shape.vertex(100, 100);
  shape.vertex(-100, 100);

  shape.endShape();

  // Exemple shader
  shader = createShader();
}

public void draw() {
  background(255);

  shader(shader, POINTS);
  translate(width/2, height/2);
  shape(shape);
}

public PShader createShader() {
  String[] vert = new String[] {
    "#version 150", 
    "", 
    "uniform mat4 projection;", 
    "uniform mat4 modelview;", 
    "", 
    "in vec4 position;", 
    "in vec4 color;", 
    "in vec2 offset;", 
    "in vec4 vert_color;", 
    "", 
    "out vec4 vertColor;", 
    "", 
    "void main() {", 
    "vec4 pt = position;", 
    "pt /= 10.0;", 
    "vec4 pos = modelview * pt;", 
    "vec4 clip = projection * pos;", 
    "gl_Position = clip + projection * vec4(offset, 0, 0);", 
    "", 
    // setting the vert color
    "vertColor = vert_color;", 
    "}"
  };

  String[] frag = new String[] {
    "#version 150", 
    "in vec4 vertColor;", 
    "out vec4 fragColor;", 
    "", 
    "void main() {", 
    " fragColor = vertColor;", 
    "}"
  };

  return new PShader(this, vert, frag);
}

```

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [May 30, 2019, 1:53pm UTC](https://discourse.processing.org/t/how-to-apply-two-textures-to-the-same-pshape/5971/10 "2019-05-30T13:53:50Z")

</div>

Unfortunately I don’t know how to fix it. Maybe open an issue? In the issues I see [https://github.com/processing/processing/issues/5091](https://github.com/processing/processing/issues/5091) somewhat related…

Or use a [different framework](https://guide.openrndr.org/#/06_Advanced_drawing/C05_Custom_rendering) with working custom attributes? 🙂

---

<div class="post-metadata">

**Author:** ![cansik](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/cansik/32/8815_2.png) [@cansik](https://discourse.processing.org/u/cansik)\
**Post date:** [July 30, 2019, 12:26pm UTC](https://discourse.processing.org/t/how-to-apply-two-textures-to-the-same-pshape/5971/11 "2019-07-30T12:26:42Z")

</div>

Haha I already thought to switch to openrndr for this project…but it is not possible. Thank you for the issue, it really seems comparable. But I opened an own one for this specific problem, because a bit of research in the tessellation code of processing shows, that the custom attributes on `PShape` are just processed if the shape is of type `POLYGON`.

> <https://github.com/processing/processing/issues/5895>