# PShader/PeasyCam texture not rotating

**URL:** https://discourse.processing.org/t/pshader-peasycam-texture-not-rotating/31224
**Category:** Coding Questions
**Created:** [July 13, 2021, 8:55am UTC](https://discourse.processing.org/t/pshader-peasycam-texture-not-rotating/31224 "2021-07-13T08:55:51Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)
#### Post date: [July 13, 2021, 8:55am UTC](https://discourse.processing.org/t/pshader-peasycam-texture-not-rotating/31224/1 "2021-07-13T08:55:51Z")

</div>

Hi,

I’ve a simple processing sketch which should use a shader to texture a sphere and use peasycam for rotation. if running the sketch the texture is applied quite well, but it doesn’t apply the rotation. Has anyone an idea why this happens, or better any idea how to solve it in such a way the cam rotation would be also applied to the texture ? Thanks in advance for your help !

* * *

## main sketch

```auto
import peasy.*;

PShader shader;
PImage tex;
PeasyCam cam;

void setup() {
  size(500,500,P3D);
  cam = new PeasyCam(this, 300);
  tex = loadImage("UV_checker.jpg");
  shader = loadShader("shader.frag", "shader.vert");
  shader.set("mytexture", tex);
}

void draw() {
  background(0);
  shader(shader);    
  stroke(128);
  fill(255);
  sphere(100);  
}

```

* * *

## vertex shader

```auto
uniform mat4 transform;
uniform mat4 modelview;
uniform mat3 normalMatrix;

attribute vec4 vertex;
attribute vec3 normal;

varying vec3 texCoords;

void main()
{  	
   gl_Position = transform * vertex;
   texCoords = normalize(normalMatrix * normal);
}

```

* * *

## fragment shader

```auto
uniform sampler2D mytexture;
varying vec3 texCoords;

void main(void) {
  vec2 uvcoords = vec2((atan(texCoords.x, texCoords.z) / 3.1415926 + 1.0) * 0.5,
                                       (asin(texCoords.y) / 3.1415926 + 0.5));

  gl_FragColor = texture2D(mytexture, uvcoords);
}

```

![out](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/938754f547effe2c560e34634a970d314e9d4bbb.gif)

---

<div class="post-metadata">

### Author: ![th75](https://avatars.discourse-cdn.com/v4/letter/t/ebca7d/32.png) [@th75](https://discourse.processing.org/u/th75)
#### Post date: [July 16, 2021, 1:02am UTC](https://discourse.processing.org/t/pshader-peasycam-texture-not-rotating/31224/2 "2021-07-16T01:02:07Z")

</div>

hi,

i don’t think it s related to PeasyCam as if you remove it, and add a rotate in your draw() it have the same behaviour…

i guess you can pass to shader cam.getRotations(); and…calculate rotations there (no idea how)

or may be add peasycam to :  
[https://processing.org/examples/texturesphere.html](https://processing.org/examples/texturesphere.html)

sorry can 't help much there

---

<div class="post-metadata">

### Author: ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)
#### Post date: [July 16, 2021, 9:41am UTC](https://discourse.processing.org/t/pshader-peasycam-texture-not-rotating/31224/3 "2021-07-16T09:41:58Z")

</div>

Hi th75,  
Thanks! Got the same Idea to pass the getRotations to the Shader and apply it to the texture, but it seems that that those values are not gives the rotation needed (looks rather odd) and don’t get an idea how to transform it to the correct ones. I’m also sure that this is not an issue with peasycam, but rather in the shader, as the normal coordinates which are used in the shader are not changing. But I really don’t know how to handle (ie. transform) the cam rotation there.  
Also this is only a stripped down code for example purpose. Want to use it in a more complex case, and I need to get the shader running in that way…

Maybe someone else can give further help …

Cheers!

---

<div class="post-metadata">

### Author: ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)
#### Post date: [July 16, 2021, 10:29am UTC](https://discourse.processing.org/t/pshader-peasycam-texture-not-rotating/31224/4 "2021-07-16T10:29:01Z")

</div>

Ok! Finally found the solution. The rotations from the cam passed to the shader needs to applied in the correct order (z,y,x) instead of (x,y,z) to the matrix operation. 😁  
So … here’s a solution…

* * *

**main sketch**

* * *

```auto
import peasy.*;

PShader shader;
PImage tex;

PeasyCam cam;

void setup() {
  size(500,500,P3D);
  cam = new PeasyCam(this, 300);
  tex = loadImage("UV_checker.jpg");
  shader = loadShader("shader.frag", "shader.vert");
  shader.set("mytexture", tex);
}

void draw() {
  background(0);
  shader.set("rotation",cam.getRotations(),3);  
  shader(shader);    
  stroke(128);
  fill(255);
  sphere(100);
}

```

* * *

**vertex shader**

* * *

```auto
uniform mat4 transform;
uniform mat3 normalMatrix;
uniform vec3 rotation;
attribute vec4 vertex;
attribute vec3 normal;
varying vec3 texCoords;

mat3 vec3RotMat(vec3 axis, float ang) {
    vec3 a = normalize(axis);
    float s = sin(ang);
    float c = cos(ang);
    float oc = 1.0 - c; 
    return mat3(oc*a.x*a.x+c,oc*a.x*a.y-a.z*s,oc*a.z*a.x+a.y*s,
                oc*a.x*a.y+a.z*s,oc*a.y*a.y+c,oc*a.y*a.z-a.x*s,
                oc*a.z*a.x-a.y*s,oc*a.y*a.z+a.x*s,oc*a.z*a.z+c);
}
void main() {  	
   gl_Position = transform * vertex;      
   texCoords = normalize(normalMatrix * normal)
             * vec3RotMat(vec3(0.0,0.0,1.0),rotation.z)
             * vec3RotMat(vec3(0.0,1.0,0.0),rotation.y)   					 
             * vec3RotMat(vec3(1.0,0.0,0.0),rotation.x);
}

```

* * *

**fragment shader**

* * *

```auto
uniform sampler2D mytexture;
varying vec3 texCoords;

void main(void) {
     vec2 uv = vec2((atan(texCoords.x, texCoords.z) / 3.1415926 + 1.0) * 0.5
                   ,(asin(texCoords.y) / 3.1415926 + 0.5));
     gl_FragColor = texture2D(mytexture, uv);
}

```

* * *

**Example**

* * *

![out](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/271dba6942c8a1a6c09bf4277559a635fe5a54e1.gif)
