Warp Texture With Opengles

I'm making an Android app using opengles 2.0 and I have camera preview like this : and using this as a texture. But I want simply warp in side of the red donut shape. So I'm t

Solution 1:

Lets assume we have a rectangle R with uv coordinages (s, t) where s,t element [0,1]. And we have the ring given by a center C, a inner radius ri and an outer radius ro.

If we want to map the uv coordinates (s,t) to coordinates in the ring texture (s_tex, t_tex), then this can be done by using the following formulas:

//alpha: angle
alpha = t * 2 * PI //maps the [0,1] range of t to [0, 2*PI] (circle)//r: distance from the center 
r = ir + s * (or - ir) //maps s=[0,1] to [ir, or]//d: direction from the center c
d = [sin(alpha), cos(alpha)]
//final coordinates
[s_tex, t_tex] = C + d * r

Note, that C, ri, ro have to be given in texture coordinates of the ring texture.

Depending on where you want to have the cut in the ring (location where start/end of the rectangle are mapped to), it can be necessary to add a constant factor to alpha. At the moment this factor is 0, which means that the cut goes from C horizontally to the right.