Jump to content
  • Advertisement
Sign in to follow this  
EasyCoder

OpenGL How to roll texture around 2D object (square)

This topic is 2484 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

Anybody knows how to roll a texture over the face of an object in OpenGL ES ?

(not rotate the whole object, just roll the texture over the object's face)

It means that the topmost line of pixels will be removed, all lines will be shifted 1 pixel up, and the topmost line of pixels will be added at the very bottom, etc, etc... until the texture ends up in original state.

That will cause the rolling effect of texture over the face of an object, as demonstrated below.

from this:

000XX000
00X00X00
0X0000X0
X000000X

to this:

00X00X00
0X0000X0
X000000X
000XX000

Share this post


Link to post
Share on other sites
Advertisement

you could use a fragment shader to modify your texture coordinates based on time provided trough an uniform.

Can you provide an example ?

Share this post


Link to post
Share on other sites
Actually all you need to do is make a tileable texture. And just each frame add to the y texture coordinates. So on android you will need to modify your texture coords each frame and resend them all down. Or if you have shaders available you can just add to the y values in the shader.

Share this post


Link to post
Share on other sites

Actually all you need to do is make a tileable texture. And just each frame add to the y texture coordinates. So on android you will need to modify your texture coords each frame and resend them all down. Or if you have shaders available you can just add to the y values in the shader.


Would not this move the whole texture over the screen ?

I just want to move texture over a face of an object (square) but the object must stay on the same coordinates on the screen.

If this is what you meant, can you please provide code, or link to web site with an example ? (I have found one in OpenGL, but ES subset does not have those commands).

Share this post


Link to post
Share on other sites
If this is what you meant, can you please provide code[/quote]
(I have found one in OpenGL, but ES subset does not have those commands)[/quote]
Can you currently draw a textured square? Do you send texture coordinates for it? Send new texture coords each frame.

Share this post


Link to post
Share on other sites

Anybody knows how to roll a texture over the face of an object in OpenGL ES ?

(not rotate the whole object, just roll the texture over the object's face)

It means that the topmost line of pixels will be removed, all lines will be shifted 1 pixel up, and the topmost line of pixels will be added at the very bottom, etc, etc... until the texture ends up in original state.

That will cause the rolling effect of texture over the face of an object, as demonstrated below.

from this:

000XX000
00X00X00
0X0000X0
X000000X

to this:

00X00X00
0X0000X0
X000000X
000XX000


modify input texture coordinates as dpadam450 said or...


you can create "float time" in your application and update it each frame call (as how long your application is working)...


in shader do this:



uniform float time;

..................................

const float coeff = 0.001; // speed of rolling

vec2 outTexCoord = inTexCoord + vec2(0.0, time*coeff); // and use it....

..................................









Best wishes, FXACE.

Share this post


Link to post
Share on other sites
Thanks everybody for suggestions.

In OpenGL ES it works however bit different than in plain OpenGL.

I figured that if I will modify part with texture coordinates:

float[] texCoords = // Allocate texture buffer. Float has 4 bytes.
{
0.0f, 1.0f, // A - left-bottom
1.0f, 1.0f, // B - right-bottom
0.0f, 0.0f, // C - left-top
1.0f, 0.0f // D - right-top
};


the way dpadam450 & FXACE suggested:

float[] texCoords = // Allocate texture buffer. Float has 4 bytes.
{
0.0f + roll, 1.0f + roll, // A - left-bottom
1.0f + roll, 1.0f + roll, // B - right-bottom
0.0f + roll, 0.0f + roll, // C - left-top
1.0f + roll, 0.0f + roll // D - right-top
};


I get the desired shift of the texture upwards.

However this will happen only once, on creation of the textured square:

texturedsquare = new TexturedSquare (context);

I need to somehow incorporate it into draw function of the class, so roll changes on every onDrawFrame.

i.e. somewhere within here:

public void draw(GL10 gl, float roll) // Passing roll into draw function
{
gl.glFrontFace(GL10.GL_CCW);

gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
gl.glEnableClientState(GL10.GL_TEXTURE_COORD_ARRAY);
gl.glVertexPointer(3, GL10.GL_FLOAT, 0, vertexBuffer);
gl.glTexCoordPointer(2, GL10.GL_FLOAT, 0, texBuffer);

// draw front face
gl.glPushMatrix();
gl.glTranslatef(0f, 0f, -5.0f);
gl.glBindTexture(GL10.GL_TEXTURE_2D, textureIDs[0]);
gl.glDrawArrays(GL10.GL_TRIANGLE_STRIP, 0, 4);
gl.glPopMatrix();

gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
gl.glDisableClientState(GL10.GL_TEXTURE_COORD_ARRAY);
}

Any ideas ?

Share this post


Link to post
Share on other sites
That was our point. Send the texture coords again. Save that array, add to each y-component in the array, send down before drawing.

Share this post


Link to post
Share on other sites
I am returning to this problem after long time as I still haven't quite cracked it.

I already thought I have figured it out.

When I gradually increase roll variable, texture nicely rolls over the object (square) as desired.

float[] texCoords =
{
0.0f, 1.0f + roll,
// A - left-bottom
1.0f, 1.0f + roll,
// B - right-bottom
0.0f, 0.0f + roll,
// C - left-top
1.0f, 0.0f + roll
// D - right-top
};


However, only in the emulator (on Eclipse).

If I run the same code on the actual device, the texture does not roll continuously over the square (what I am trying to achieve), but scrolls of the square gradually completely until it disappears.

For better understanding, instead of desired effect:

from this:

000XX000
00X00X00
0X0000X0
X000000X

to this:

00X00X00
0X0000X0
X000000X
000XX000

I get:

00X00X00
0X0000X0
X000000X
X000000X

then:

0X0000X0
X000000X
X000000X
X000000X

then:

X000000X
X000000X
X000000X
X000000X

Basically, I get scrolling, instead of rolling sad.png

I suspect it is something in the way how I am wrapping the texture over the square, but I cannot figure out what parameter I have to change to get the desired rolling effect.

Anybody has tried this already before and knows how to achieve the rolling of the texture over the square ?

What I am trying to achieve is that the topmost line of pixels will be removed, all lines will be shifted 1 pixel up, and the topmost line of pixels will be added at the very bottom, etc, etc... until the texture ends up in original state, and then the whole process starts again.

Thanks for any help.

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

GameDev.net is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!