Can't understand these UV texture coordinates (range is NOT 0.0 to 1.0)

Question

I am trying to draw a simple 3D object generated by Google SketchUp 8 Pro onto my WebGL app, the model is a simple cylinder.

I opened the exported file and copied the vertices positions, indices, normals and texture coordinates into a .json file in order to be able to use it on javascript. Everything seems to work fine, except for the texture coordinates which have some pretty big values, like 46.331676 and also negative values. Now I don't know if I am wrong, but isn't 2D texture coordinates supposed to be in a range from 0.0 to 1.0 only?

Well, drawing the model using these texture coordinates gives me a totally weird look, and I can only get to see the texture properly when I am very close (not really me, the cam) to the model, as if the texture has been insanely reduced in it's size and repeated infinitely across the model's faces. (yeah, I am using GL_REPEAT on that texture wrap thing)

What I noticed is that if I get all these coordinates and divide them by 10 or 100 I get a much "normal" look, but still not in the 0.0 to 1.0 range.

Here's my json file: http://pastebin.com/Aa4wvGvv

Here are my GLSL Shaders: http://pastebin.com/DR4K37T9

And here is the .X file exported by SketchUp: http://pastebin.com/hmYAJZWE

I've also tried to draw this model using XNA, but still not working. Using this HLSL shaders: http://pastebin.com/RBgVFq08

I tried exporting the same model to different formats, collada, fbx, and x. All those yields the same thing.

Answer 1

You are correct UV's typically go from 0-1 though as David X mentioned this isn't a requirement. In your case the issue is the frequency of the SketchUp generated UV coordinates. For example if your Y axis (V coordinate) goes from 0 to 46 then that texture, if wrapping is enabled, will repeat 46 times in the V direction. Wrapping also makes it look smaller because you have to duplicate the image many times across the same surface area. Re-exporting as FBX or Collada doesn't do anything to resolve the issue because it's the same UV's either way. To fix this you need to go back to SketchUp and change how it's generating UV's for the cylinder. Perhaps you can specify the UV range yourself or maybe you have to change how the geometry is parameterized. I've never used SketchUp so I don't know exactly how it handles those sorts of things.

Lastly it looks like the vertex winding of the cylinder may be the opposite of your cubes. Graphics API's like OpenGL and DirectX use triangle vertex winding to determine which direction the triangle is facing. This is how they perform backface culling - not rendering the triangles facing away from the camera as an optimization. In the case of your cylinder it appears that the view is looking into the cylinder because the triangles closest to the camera are facing the wrong direction. Once again this is an issue that would need to be resolved in SketchUp and it can be verified by looking at the direction of the face normal for each triangle (it should be pointing outward, not inward).

Answer 2

If you want your uv coordinates to be exactly between 0 and 1, you could use a scale matrix for your model.

So on loading your model, you could check for your max u and v coordinate and create a scaling matrix that will make it more "normal". So that will replace your manual scaling of 10 or 100. So to let it fit, you will need to scale your uv coordinates down to [0,1].

|1/uMax|0     |
|0     |1/vMax|

Of course this is just a workaround and you could better find a way to set Sketchup in the right settings (I think your exporter or Sketchup itself goes wrong here). But if it doesn't work out for you, create your post-loading-processor and save a texture scaling matrix.

Answer 3

(Texture coordinates can definitely be outside of 0-1.) I think this is just OpenGL being weird. IIRC, Spheres use texture coordinates that put the 0-1 square on ~1/16 of the surface, and I wouldn't be suprised if Cylinders do something similar. Fix-wise, you might have to write your own cylinder code, issuing the appropiate texture coordinates.

Answer 4

Looks like SketchUp isn't normalizing your texture coordinates, or using a metric of its own. Having texcoords < 0 or > 1 and GL_REPEAT as texture wrapping means that the texture will be scaled down to fit the geometry and repeated horizontally and vertically.

Try importing the mesh in another modelling package (MilkShape, Blender) and fixing the uv map from there.