We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.
IndexProgramming Questions & HelpSyntax Questions › texture looks odd under certain camera positions.
Page Index Toggle Pages: 1
texture looks odd under certain camera positions. (Read 784 times)
texture looks odd under certain camera positions.
Apr 19th, 2009, 11:23am
 
Hi, I want to make somekind of textured shoebox that has no roof so you look in it from the top. Only the texture protection looks really odd under certain angles. How does that become and is there anything that can be done about it?

...
...

Code:
import peasy.*;

PeasyCam cam;

PImage vloer;

void setup(){
size(1000, 1000, P3D);
//noLoop();

cam = new PeasyCam(this, 100);
cam.setMinimumDistance(50);
//cam.setMaximumDistance(500);

noStroke();

vloer = loadImage("vloer.png");
}

void draw(){

background(204);
box(10);
beginShape();
texture(vloer);
vertex(0, 0, 0, 0);
vertex(1000, 0, 1000, 0);
vertex(1000, 800, 1000, 800);
vertex(0, 800, 0, 800);
endShape();
}

Re: texture looks odd under certain camera positions.
Reply #1 - Apr 20th, 2009, 2:24am
 
There is a good example that comes with Processing called Texture Cube  - go to examples-3D-textures-texture cube (or something like that). But to get you started here are some suggestions.
If you think about a shoe box in 3D then it has 8 corners and 6 faces (5 if you want to see inside). to display the box in draw() you need something like

beginShape(QUADS);
 texture(vloer);
// draw a single face
vertex(x1,y1,z1,s1,t1);
vertex(x2,y2,z3,s2,t2);
vertex(x3,y3,z3,s3,t3);
vertex(x4,y4,z4,s4,t4);

// repeat for remaining faces

endShape();

the x,y,z are the coordinates for the 4 corners of the face (make sure you specify them in either clockwise or anitclockwise order as you look at the face)
the s and t values are to control the texture and their value is always in the range >= 0.0 to <=1.0)
If you picture the texture image then s=0.0,t=0.0 represents the top left pixel and 1.0,1.0 is the bottom right. If you are using the whole image then s and t will always have the value 0 or 1, but it is possible to use different parts of the image for different faces if you wish.

The box() command in your code is not needed.

PeaseyCam provides an orbiting camera so when you ceate it with
 cam = new PeasyCam(this, 100);
the 100 represents the distance to view your shoebox so should be big enough to be outside the shoebox.
By default PeaseyCam 'looksat' location (0,0,0) so when you calculate the coordinates of the shoebox corners, make sure it is centerd about (0,0,0)

Hope this helps.
Re: texture looks odd under certain camera positions.
Reply #2 - Apr 20th, 2009, 6:08am
 
where did you get about the 1.0 and 0.0?
I tried it and it didn't work, look here there they also use the width of the image.
http://processing.org/reference/vertex_.html

here are the textures if you would like to try?

http://rapidshare.com/files/223578955/textures.zip.html

During typing this post I just found out what it was,
P3D sucks, if I change to opengl then there is no strange texture protection.

must this be reported as a P3D bug?
Re: texture looks odd under certain camera positions.
Reply #3 - Apr 20th, 2009, 7:45am
 
can u or someone else help me, I need the texture on the green surface rotated  90 degrees so the black dot is close to the other black dot.
If you want the textures, check prev post.

...

Code:
import peasy.*;
import processing.opengl.*;

PeasyCam cam;

PImage vloer;
PImage links;
PImage rechts;
PImage voor;
PImage achter;


void setup(){
size(1000, 1000, OPENGL);

cam = new PeasyCam(this, 100);
cam.setMinimumDistance(50);
//cam.setMaximumDistance(500);

noStroke();

vloer = loadImage("vloer.png");
links = loadImage("links.png");
rechts = loadImage("rechts.png");
voor = loadImage("voor.png");
achter = loadImage("achter.png");
}

void draw(){

pushMatrix();
translate(-500, -500, 0);

background(204);

beginShape(); //vloer
texture(vloer);
vertex(0, 0, 0, 0);
vertex(1000, 0, 1000, 0);
vertex(1000, 800, 1000, 800);
vertex(0, 800, 0, 800);
endShape();

beginShape();//links
texture(links);
vertex(0, 800, 450, 0, 0);
vertex(0, 0, 450, 800, 0);
vertex(0, 0, 0, 800, 450);
vertex(0, 800, 0, 0, 450);
endShape();

popMatrix();
}
Re: texture looks odd under certain camera positions.
Reply #4 - Apr 20th, 2009, 9:59am
 
I fixed it but I dont understand it.
The texture for links.png has a size of 800x450 but in the texture coordinates 450 is never used?

could someone explain?

Code:
import peasy.*;
import processing.opengl.*;

PeasyCam cam;

PImage vloer;
PImage links;
PImage rechts;
PImage voor;
PImage achter;


void setup(){
size(1000, 1000, OPENGL);
smooth();

cam = new PeasyCam(this, 100);
cam.setMinimumDistance(500);
cam.setMaximumDistance(2000);

noStroke();

vloer = loadImage("vloer.png");
links = loadImage("links.png");
rechts = loadImage("rechts.png");
voor = loadImage("voor.png");
achter = loadImage("achter.png");
}

void draw(){

pushMatrix();
translate(-500, -500, 0);

background(204);

beginShape(); //vloer
texture(vloer);
vertex(0, 0, 0, 0);
vertex(1000, 0, 1000, 0);
vertex(1000, 800, 1000, 800);
vertex(0, 800, 0, 800);
endShape();

beginShape();//links
texture(links);
vertex(0, 800, 450, 0, 800);//0 0
vertex(0, 0, 450, 0, 0);//800 0
vertex(0, 0, 0, 800, 0);//800 450
vertex(0, 800, 0, 800, 800);//0 450
endShape();

popMatrix();
}


//float[] rotations = camera.getRotations(); // x, y, and z rotations required to face camera in model space
//camera.setRotations(double pitch, double yaw, double roll); // rotations are applied in that order

// stroke(0);
// strokeWeight(10);
//point(0, 800, 450);
Re: texture looks odd under certain camera positions.
Reply #5 - Apr 20th, 2009, 1:33pm
 
I will try and answer your various questions.

where did you get about the 1.0 and 0.0?
I tried it and it didn't work, look here there they also use the width of the image.


Although you can use the image width and height to set texture coordinates this is not recommended -what if you want to use a texture of a different size you would need to alter all the vertex statements. By using
Code:
  textureMode(NORMAL); 


we use the values 0 to 1 for texture coordinates - see my earlier post.
Note in my earlier post I used s and t whereas in the Processing documentation they use u and v which is more correct - so I will do the same.
In your code you have used 2 versions of vertex one with 4 parameters and one with 5 these correspond to
Code:

vertex(x1,y1,u1,v1);
vertex(x2,y2,z3,u2,v2);

Since we are using 3D then we need the one with 5 parameters.


P3D sucks, if I change to opengl then there is no strange texture protection.
must this be reported as a P3D bug?

No - P3D uses Java 3D for rendering it is quicker than OPENGL but there are sacrifices to be made - poor texture mapping is one of them.

I think that just about covers it all you need now is the solution and here it is.

Code:
 
import peasy.*;
import processing.opengl.*;

PeasyCam cam;

PImage vloer;
PImage links;
PImage rechts;
PImage voor;
PImage achter;


void setup(){
 size(1000, 1000, OPENGL);

 cam = new PeasyCam(this, 1800);
 cam.lookAt(0,0,0);
 cam.setMinimumDistance(500);
 cam.setMaximumDistance(2500);
 
 smooth();
 noStroke();

 vloer = loadImage("vloer.png");
 links = loadImage("links.png");
 rechts = loadImage("rechts.png");
 voor = loadImage("voor.png");
 achter = loadImage("achter.png");
}

void draw(){
 background(204);
 textureMode(NORMAL);
 pushMatrix();

 beginShape(QUADS); //vloer
 texture(vloer);
 vertex(-500, -200, 500, 0, 0);
 vertex(500, -200, 500, 1, 0);
 vertex(500, -200, -500, 1, 1);
 vertex(-500, -200, -500, 0, 1);
 endShape();

 beginShape(QUADS);
 texture(links);
 // -X "left" face
 vertex(-500, -200, -500, 1, 1);
 vertex(-500, -200,  500, 1, 0);
 vertex(-500,  200,  500, 0, 0);
 vertex(-500,  200, -500, 0, 1);
 endShape();
 
 beginShape(QUADS);
 texture(achter);
   // +X "right" face
 vertex( 500, -200,  500, 0, 0);
 vertex( 500, -200, -500, 1, 0);
 vertex( 500,  200, -500, 1, 1);
 vertex( 500,  200,  500, 0, 1);
 endShape();
 
 beginShape(QUADS);
 texture(rechts);
 // +Z "front" face
 vertex(-500, -200,  500, 0, 0);
 vertex( 500, -200,  500, 1, 0);
 vertex( 500,  200,  500, 1, 1);
 vertex(-500,  200,  500, 0, 1);
 endShape();
 
 beginShape(QUADS);
 texture(voor);
 // -Z "back" face
 vertex( 500, -200, -500, 0, 0);
 vertex(-500, -200, -500, 1, 0);
 vertex(-500,  200, -500, 1, 1);
 vertex( 500,  200, -500, 0, 1);
 endShape();
 
 popMatrix();
}


I have centered the shoebox arround the origin (0,0,0) to simplify the rotation.

You can rotate the textures by 'rotating' the u/v coordinates within the 4 vextors that make up the shape
Re: texture looks odd under certain camera positions.
Reply #6 - Apr 20th, 2009, 2:55pm
 
thx a lot!

I changed back to P3D to see if this way of texturing doesnt have strange protections and it turns out that it works great now (which is a good thing to know). It's only god damn slow.. OPENGL for the win.
Re: texture looks odd under certain camera positions.
Reply #7 - Apr 20th, 2009, 2:59pm
 
The textures you are using have very little detail so you won't see much if any difference between P3D and OPENGL but if you use images containing straight lines / edges then you will. The same is true if you are displaying text with P3D in most cases its hardly legible.
Page Index Toggle Pages: 1