# GLSL Shader on 3D Ring not working

**URL:** <https://discourse.processing.org/t/glsl-shader-on-3d-ring-not-working/7757>\
**Category:** Coding Questions\
**Created:** [January 23, 2019, 8:57am UTC](https://discourse.processing.org/t/glsl-shader-on-3d-ring-not-working/7757 "2019-01-23T08:57:27Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![pblancos](https://avatars.discourse-cdn.com/v4/letter/p/7bcc69/32.png) [@pblancos](https://discourse.processing.org/u/pblancos)\
**Post date:** [January 23, 2019, 8:57am UTC](https://discourse.processing.org/t/glsl-shader-on-3d-ring-not-working/7757/1 "2019-01-23T08:57:27Z")

</div>

I’m try to map GLSL texture shader to 3D ring, I’ve got little working, but I think i’m miss some translation to 3D (i think), as it’s mapping it to 2D. I try use fragment from processing site. Where am I going wrong?

sketch.pde

```auto
PShape mRing;
float angle;
int time;

PShader mShader;

void setup() 
{
  time = 0;
  size(800, 600, P3D);
  
  mRing = loadRing(160,80,24,24);
  mShader = loadShader("fragment.glsl");
}

void draw() 
{
  background(128);
  translate(width/2, height/2);
  rotateY(angle);
  
  mShader.set("u_resolution", float(width), float(height));
  mShader.set("u_time", time);
  shader(mShader);
  shape(mRing);
  
  angle += 0.01;
  time+= 0.5;
}

PShape loadRing(float outerRad, float innerRad, int numc, int numt) 
{
  textureMode(NORMAL);
  PShape shape = createShape();

  shape.beginShape(TRIANGLE_STRIP);
  shape.noStroke();

  float x, y, z, s, t, u, v;
  float nx, ny, nz;
  float p1, p2;
  for (int a = 0; a < numc; a++) 
  {
    for (int b = 0; b <= numt; b++) 
    {
      for (int c = 1; c >= 0; c--) 
      {
         s = (a + c) % numc + 0.5;
         t = b % numt;
         u = s / numc;
         v = t / numt;
         p1 = s * TWO_PI / numc;
         p2 = t * TWO_PI / numt;
 
         x = (outerRad + innerRad * cos(p1)) * cos(p2);
         y = (outerRad + innerRad * cos(p1)) * sin(p2);
         z = innerRad * sin(p1);
 
         nx = cos(p1) * cos(p2); 
         ny = cos(p1) * sin(p2);
         nz = sin(p1);
         shape.normal(nx, ny, nz);
         shape.vertex(x, y, z);
      }
    }
  }
  shape.endShape(); 
  return shape;
}

```

fragment.glsl

```auto

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform float u_time;

#define PI 3.14159265358979323846

vec2 rotate2D(vec2 _st, float _angle){
    _st -= 0.5;
    _st = mat2(cos(_angle),-sin(_angle),
                sin(_angle),cos(_angle)) * _st;
    _st += 0.5;
    return _st;
}

vec2 tile(vec2 _st, float _zoom){
    _st *= _zoom;
    return fract(_st);
}

float box(vec2 _st, vec2 _size, float _smoothEdges){
    _size = vec2(0.5)-_size*0.5;
    vec2 aa = vec2(_smoothEdges*0.5);
    vec2 uv = smoothstep(_size,_size+aa,_st);
    uv *= smoothstep(_size,_size+aa,vec2(1.0)-_st);
    return uv.x*uv.y;
}

void main(void){
    vec2 st = gl_FragCoord.xy/u_resolution.xy;
    vec3 color = vec3(0.0);

    st = tile(st,4.);

    st = rotate2D(st,PI*0.25);

    color = vec3(box(st,vec2(0.7),0.01));
    gl_FragColor = vec4(color,1.0);
}

```

---

<div class="post-metadata">

**Author:** ![JackWitherell](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jackwitherell/32/3361_2.png) [@JackWitherell](https://discourse.processing.org/u/JackWitherell)\
**Post date:** [January 23, 2019, 7:08pm UTC](https://discourse.processing.org/t/glsl-shader-on-3d-ring-not-working/7757/2 "2019-01-23T19:08:45Z")

</div>

[This is what happens when I run your program.](https://youtu.be/1k4FIp1Wv-8)

What exactly are you trying to accomplish here?

You mentioned texture mapping but shaders aren’t used to map textures, they’re used to control the flow of data going through the gpu. You can handle texture mapping with UVs when you’re defining your shape.

You’re currently defining no UVs in your loadRing() function.

---

<div class="post-metadata">

**Author:** ![pblancos](https://avatars.discourse-cdn.com/v4/letter/p/7bcc69/32.png) [@pblancos](https://discourse.processing.org/u/pblancos)\
**Post date:** [January 24, 2019, 1:30am UTC](https://discourse.processing.org/t/glsl-shader-on-3d-ring-not-working/7757/3 "2019-01-24T01:30:49Z")

</div>

I try to make a tile pattern on 3d ring. Not texture, I follow tutorial online, but it not working with ring. Now it look like it mask to ring, not apply pattern to ring surface.I think calculation not for 3D? How do i make tile pattern stick to ring.

---

<div class="post-metadata">

**Author:** ![JackWitherell](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jackwitherell/32/3361_2.png) [@JackWitherell](https://discourse.processing.org/u/JackWitherell)\
**Post date:** [January 24, 2019, 1:46am UTC](https://discourse.processing.org/t/glsl-shader-on-3d-ring-not-working/7757/4 "2019-01-24T01:46:03Z")

</div>

You need to tell us what you’re trying to accomplish. As far as what you’re saying is concerned, you’re asking

> [@pblancos](#):
>
> to make a tile pattern on 3d ring.

and as far as your description is concerned, you have a tile pattern on a 3d ring right there.

We’re gonna need a better description of what exactly you want. You can either post the tutorial you’re following or describe what you want more precisely. In your first post you said you wanted “to map GLSL texture shader to 3D ring”, and now you’re saying “Not texture”, so what you’re asking for isn’t very clear at all.

Keep in mind as well that although Processing can handle and run GLSL shader code it’s not very well supported in its documentation. This forum is also for the Processing language and not GLSL. Considering that, along with how Processing is a beginner friendly language, it’s not very likely you will find support for GLSL here. I recommend you find resources elsewhere regarding GLSL help. I left some resources for GLSL and writing shaders in [another forum post elsewhere.](https://discourse.processing.org/t/volumetric-blur-shader/7690/2)

---

<div class="post-metadata">

**Author:** ![pblancos](https://avatars.discourse-cdn.com/v4/letter/p/7bcc69/32.png) [@pblancos](https://discourse.processing.org/u/pblancos)\
**Post date:** [January 24, 2019, 1:56am UTC](https://discourse.processing.org/t/glsl-shader-on-3d-ring-not-working/7757/5 "2019-01-24T01:56:36Z")

</div>

Thank you for your answer.

I have 3D Ring, and I want to use GLSL to draw tile pattern on the ring. Same as below, but different pattern.

 ![1032442399_1txe](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/eccd23e5e5c9f8c215b6937588a7d8348c6772bf.jpeg)  
I want to use my own pattern. I think i did wrong, because I copy code for square? I am still new, and try to understand, but difficult.

---

<div class="post-metadata">

**Author:** ![JackWitherell](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jackwitherell/32/3361_2.png) [@JackWitherell](https://discourse.processing.org/u/JackWitherell)\
**Post date:** [January 24, 2019, 3:03am UTC](https://discourse.processing.org/t/glsl-shader-on-3d-ring-not-working/7757/6 "2019-01-24T03:03:43Z")

</div>

I started looking through your shader code and there’s nothing accessing the location of any vertices (uv coordinates) and no fragment is asking for the location of where it is relative to the shape.

As I’m looking through it I’m seeing copy-pasted code from [here](https://github.com/tangrams/ProceduralTextures/blob/master/patterns/star.frag) and not much else. In the end, the code is simply mapping screen space to values, and wherever a fragment is being drawn it is drawing that color.

Once again, your question isn’t a coding question regarding processing and it’s a question regarding GLSL and implementation of graphics language concepts.

Once again I suggest you read my [response to another user’s question about GLSL code.](https://discourse.processing.org/t/volumetric-blur-shader/7690/2?u=jackwitherell) It contains several resources to help you learn GLSL as well as writing shaders along with access to communities that can help you learn. There’s not much this forum can do for you otherwise.

---

<div class="post-metadata">

**Author:** ![pblancos](https://avatars.discourse-cdn.com/v4/letter/p/7bcc69/32.png) [@pblancos](https://discourse.processing.org/u/pblancos)\
**Post date:** [January 24, 2019, 3:22am UTC](https://discourse.processing.org/t/glsl-shader-on-3d-ring-not-working/7757/7 "2019-01-24T03:22:32Z")

</div>

ok, thank you for your help.

---

<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:** [January 25, 2019, 3:57am UTC](https://discourse.processing.org/t/glsl-shader-on-3d-ring-not-working/7757/8 "2019-01-25T03:57:12Z")

</div>

Hi! I think there are two ways to have a texture in a torus. One is to use an image mapped to it. For that you would pass the texture uv coordinates for each single vertex in the torus. The other option is to create generative patterns, which I think is what you are trying to do.

I think the easiest way to figure it out is to use [http://shdr.bkcore.com/](http://shdr.bkcore.com/) On the top right you can choose the torus shape. You can edit both vertex and fragment shaders on that page. The fragment shader is already receiving the positions and normals, and that should be enough to create a generative pattern.

The reason I suggest using that page is that you can do live coding and forget about the issues that might be introduced by Processing. You get faster feedback so you know if you are getting closer or not. Once you figure it out, if you have trouble porting the code to Processing you can share your working code from [shdr.bkcore.com](http://shdr.bkcore.com) (click the share button, post here the URL) and then try figuring out why it doesn’t work in Processing.

---

<div class="post-metadata">

**Author:** ![pblancos](https://avatars.discourse-cdn.com/v4/letter/p/7bcc69/32.png) [@pblancos](https://discourse.processing.org/u/pblancos)\
**Post date:** [January 25, 2019, 5:59am UTC](https://discourse.processing.org/t/glsl-shader-on-3d-ring-not-working/7757/9 "2019-01-25T05:59:15Z")

</div>

Thankyou, that site is very good. It show me I have shader and vertex almost correct.

But when I try to use standard torus, and I copy to processing

([http://shdr.bkcore.com/#1/dZHLTsMwEEV/ZeRViqLw6qoVKyR2IFZsCEImcdKpHE9kO6UP9d+ZvNoQJSvLc+Z67lyfREpJVSjjnVh9itKqBB2SgQ3mmxIyTdKvY1MZzMgW7R08FmpQ3KnkAaxypCvPUiY7aQ9o8po8QvZODifBG6ul5jIDwhQKiSZYxOYUG4Bcf79YmT+TJgtPtWIZdIoQ7qO7BevOIpy1LL23+FN51Q4rryZGxPQu+n0K6fvqq+TW/X+2hIJSpT9Q/U7j0tJWJfWwC5/ZezanqUA6GWfResOjCoYu4aYDdTLQBFZvzf0jv9zYpNlHcokTrh5YxTjaH47r7jOGZLQgP8jNzX98haKZJlbt6W492cpFWyfOfw==](http://shdr.bkcore.com/#1/dZHLTsMwEEV/ZeRViqLw6qoVKyR2IFZsCEImcdKpHE9kO6UP9d+ZvNoQJSvLc+Z67lyfREpJVSjjnVh9itKqBB2SgQ3mmxIyTdKvY1MZzMgW7R08FmpQ3KnkAaxypCvPUiY7aQ9o8po8QvZODifBG6ul5jIDwhQKiSZYxOYUG4Bcf79YmT+TJgtPtWIZdIoQ7qO7BevOIpy1LL23+FN51Q4rryZGxPQu+n0K6fvqq+TW/X+2hIJSpT9Q/U7j0tJWJfWwC5/ZezanqUA6GWfResOjCoYu4aYDdTLQBFZvzf0jv9zYpNlHcokTrh5YxTjaH47r7jOGZLQgP8jNzX98haKZJlbt6W492cpFWyfOfw==))

It show black screen only. Even I make very simple.

```auto
void draw() 
{
  background(0);
  translate(width/2, height/2);
  shader.set("resolution", float(width), float(height));
  shader.set("time", millis() / 1000.0);
  
  shader(shader);
  shape(ring);

}

```

---

<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:** [January 28, 2019, 3:31am UTC](https://discourse.processing.org/t/glsl-shader-on-3d-ring-not-working/7757/10 "2019-01-28T03:31:54Z")

</div>

Hi! Could you share your full Processing program to test (including shaders)?

For some reason the shdr link you shared shows the default shader for me (mapping normals to colors). Maybe you can verify if your link is correct?

Cheers!

---

<div class="post-metadata">

**Author:** ![pblancos](https://avatars.discourse-cdn.com/v4/letter/p/7bcc69/32.png) [@pblancos](https://discourse.processing.org/u/pblancos)\
**Post date:** [January 28, 2019, 8:10am UTC](https://discourse.processing.org/t/glsl-shader-on-3d-ring-not-working/7757/11 "2019-01-28T08:10:08Z")

</div>

[https://goo.gl/PRmxPB](https://goo.gl/PRmxPB)  
my pattern i try.

My Sketch:

```auto
PShape ring;
PShader shader;

void setup() 
{
  size(800, 600, P3D);
  
  ring = loadRing(160,80,24,24);
  shader = loadShader("fragment.glsl","vertex.glsl");
}

void draw() 
{
  background(0);
  
  translate(width/2, height/2);
  
  shader(shader);
  shape(ring);
}

```

I get black screen, but on site it shows pattern.

---

<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:** [January 28, 2019, 9:09am UTC](https://discourse.processing.org/t/glsl-shader-on-3d-ring-not-working/7757/12 "2019-01-28T09:09:07Z")

</div>

Did you update the shaders to work with Processing? The uniform names are different in every platform (like ShaderToy, shdr, Procesing, openFrameworks, etc). So you can’t unfortunately copy paste the shaders from shdr to Processing.

Here are the [default Processing shaders](https://github.com/processing/processing/tree/master/core/src/processing/opengl/shaders) so you can look up the attributes and uniforms.

If you want the texture to be attached to the object, you should pass the position to the fragment shader without multiplying it by any matrix, so it uses the objects coordinates. Like [here](http://shdr.bkcore.com/#1/lVJNb4MwDP0rFifoGIW2O6zV1MOk3TbttMuYJgahTQUJSgLrh/rfZ5JAP9ZK24EQx8/P9rN3TsbTuiRMSWf67lSCpFRSzmBJF8sK8oInahazmDWJ2FC2gIakY8hfuaQKYbMLjl9vL1yUSWFYSDoCRQvi6ptUn5T5JgtsOS/R9GK2ixmAIKoWDHKRpMrVQBj0GCTbt3wxM7FVohQR7ITV3OmWHJFaEx601w2DO+/Wvg3QmLWY9tOxdYM4WXKullKRyrVA3/5vLEUYhpHn66ReT6Bj8Rj8mUAbURBiQadUVoi6CdYDPDaH3htOMygTytyuP9s/5m4nEaw3MxgOYZTNgXEF42yuRWj9eghS+RHm9477HkPKCy6MRGO3Uxahttx7z/P0MAEWxeeTSBaPh4CJq6P9yLDuHf/qTiGxoF+1IiZrdVipMw/r9qdmNMc7tqy61+cEoetT3wRKnpHijZLvy+5K8BVJ22S9/8rG/mvrLw3EUqE4pl6cvHtcOS6IMc0MWgVbJRB/1gMCtbydTD5E3eD6ujCq0lPf9u/mqataT+wYfSYEJql0K3vnw3d0Bc7U/OVQcVHLYCWd/Q8=).