Stretch a texture on a 2D polygon

Started by
2 comments, last by SiLiZiUMM 11 years, 11 months ago
Hi,

I have a texture that I am able to display on a 2D square (easy). I want also to stretch that texture on a custom 2D polygon in order to fill it:
- Without losing pixels in the process (yes, the texture *will* be distorted and this is what I need)
- Without converting the texture (I need to display the same texture on a square and on a custom polygon at the same time)

Example picture of what I want to achieve:
texture-fill.png
I can't seem to find how to do this with OpenGL. Can it be done with shaders only? Any other ideas?

Thanks for all your input!
Advertisement
if you have enough vertices inside the poligon (so a dense grid) you need only to move vertices.
Else you have to do some math based-distortion (like following a spline, sinus wave) wich gives you some limits on wich distortion you can achieve (and only possible with a pixel shader)..


you can of course use te math based -distortion inside vertex shader if you have a dense grid or a tessellated polygon.

By the way adjusting manually vertices is the simplest option to achieve that I think, and give you total control on the distortion that you want to achieve (not very good for real time applications, so that's why using a shader is preferrable even if limited in complexity)

Peace and love, now I understand really what it means! Guardian Angels exist! Thanks!

As demonRad said, it can be achieved in a shader, but for your needs, i'd think that'd be a bit overkill.

As he also said, the general approach is to build a grid of vertice's and distort the grid in the direction you need, for example:

4zw4yf.png

the uv's along the grid should be mapped from 0-1, and the best way to draw it is probably a triangle strip.

still, this is only one approach of many possible ways.
Check out https://www.facebook.com/LiquidGames for some great games made by me on the Playstation Mobile market.
First, thanks for your answers!

Currently, I create the following VBO square with 2 triangles:


GLfloat vertices[] = {


-1.0, -1.0,
-1.0, 1.0,
1.0, -1.0,
1.0, 1.0
};

glGenBuffers(1, &vbo);
glBindBuffer(GL_ARRAY_BUFFER, vbo);
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);



Then I create my texture data coords:

GLfloat texcoords[] = {



0.0, 0.0,
0.0, 1.0,
1.0, 0.0,
1.0, 1.0,
};
glGenBuffers(1, &vbo_texcoords);
glBindBuffer(GL_ARRAY_BUFFER, vbo_texcoords);
glBufferData(GL_ARRAY_BUFFER, sizeof(texcoords), texcoords, GL_STATIC_DRAW);

When I render, everything looks fine (the weird texture is actual data rendered to a 2d buffer):

ogl2.png


Now I add vertexes and bend them to create another shape:


GLfloat vertices[] = {
-1.0, -0.5,
-0.2, 1.0,
-0.5, -1.0,
-0.1, 0.9,
0.5, -1.0,
0.1, 0.9,
1.0, -0.5,
0.2, 1.0,
};


GLfloat cube_texcoords[] = {
0.00, 0.0,
0.00, 1.0,
1.0/3.0, 0.0,
1.0/3.0, 1.0,
2.0/3.0, 0.0,
2.0/3.0, 1.0,
1.00, 0.0,
1.00, 1.0,

};

Result is not that ok (purple lines added in paint):
ogl1.png

Note how the texture orientation is wrong in the smaller triangles. I render the shape using GL_TRIANGLE_STRIP. The order of the vertexes seems fine though. What went wrong?

In the end , what I'd like to achieve is exactly this: http://vimeo.com/38715344

Note how the shape (the video in this case -- on my side, it's a 2D buffer with rendered data) is distorted without clipping of the actual texture.

Thanks!

This topic is closed to new replies.

Advertisement