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

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

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

Can you provide an example ?

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).

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.

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 ?

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

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.