PShader/PeasyCam texture not rotating

Processing Coding Questions
1

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

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

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

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

2

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

sorry can 't help much there

3

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!

4

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. :grin:
So … here’s a solution…

main sketch

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

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

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

4 Likes