How to do real time smooth blending of Triangles using OpenGL

OpenGL OpenGL: Advanced Coding
1

Hi everybody,

Though I am new to openGL, so any help is appreciated. I have one very specific
requirement.

I have two triangles (most of time they are of different SHAPES and AREA) with vertices,
say ABC(in Image 1) and MNO (in Image 2).

Vertices A and M, B and N, C and O are corresponding matching vertices.

Now I want to have smooth transition(with color blending very smoothly) from Triangle
ABC to MNO. Is there any API/set of APIs in openGL to do this task real time for
a set of 1000 or more triangles?
Please see the figures below:

Triangle ABC:
A __________ B
| /
| /
| /
| /
| /
| /
| /
| /
|/ C

Triangle MNO:

N
|\
| \
|  \
|___\
M    O

If we do linear interpolation of vertices
then at 0.5 Distance :
the NEW Triangle(PQR,
where A & P & M are correspoinding vertices
where B & Q & N are correspoinding vertices
where C & R & O are correspoinding vertices
) will be(sorry, I could only draw it approximately):
Q
/|
/ |
/ |
/ |
/____|
P R

Now vertices positions are easy to compute,
but it takes a lot of time to blend colors of ABC and MNO
triangles, esp when you have 1000 or more corresponding triangles
in Image 1 & Image 2 (for image size as small as 400x300) respectively.

I have attempted this thing with lot of changes in my algorithms,
data structures and coding(with efficency in mind),
but still I am unable to do it in real time. So I thought to
switch to OpenGL. But I am unable to find any API to do this thing.

Navneet Dalal

2

OpenGL can be seen as an interface between hardware graphics and your app. In fact, it’s quite low-level, and doesn’t support this kind of things directly.
BUT
cards such as the NVIDIA GeForce and ATi Radeon have multiple modelview matrix extensions, that can let you do such things in hardware, so check with them. Otherwise, do your own morphing before sending vertices to OpenGL (that’s the way most, if not all, games do today).

3

Thanks for ur tip. And it is perfectly ok with me if I can use low level API.
But the problem is I am not able to find even the Low level APIs needed to
do this (or say morphing) thing in Real Time.

Here are the steps to get smooth blending:
I assume two triangles ABC and MNO. And the new Triangle is PQR.
And this whole thing is going on in 2D space. My questions are in
enclosed in << and >>

  1. I have used the linear Interpolation for calculating the vertices of new Triangle PQR.
    Which is quite easy to do.
  2. Next we can either go by Backward Warping or Forward Warping.
    I list the steps for Backward warping.

Backward Warping:

A. For every pixel in triangle PQR,
I calcualate the corresponding pixel coordinates in
triangles ABC and MNO, let the points be X(in triangle ABC ) and Y
( in triangle MNO).

(<<i.e. We have to use a triangle
filling algorithm, DOES openGL has
ANY triangle filling API which returns
the x,y coordinate pair of each
pixel in that triangle?>> )

B. I have used the baryo centric method for this calculation. It
is a calculation intensive method. But gives accurate result.

(&lt;&lt;Does openGL api has support of
baryo centric / any other method 
by use of which I can calculate 
the correspoindg point in other
triangle, if vertices are assumed
to be matched?&gt;&gt; )

C. For each such X and Y point, get the color at that point. Now X and Y ususally have
the coordinates in floating point values, So to get the color at these points means I have
to used some Interpolation, and I used the simplest possible, Bilinear interpolation.

Bilinear Interpolation :: Say I have a pt (10.3, 10.6). The color at this pt will
be dependent upon the color of point (10, 10) (10,11) (11,11) and (11,10).
Let Color(x,y) be a function which returns the color at point (x,y).
So the Color(10.3, 10.6) = ( 1 - 0.3 ) * ( 1 - 0.6 ) * Color(10,10) +
( 0.3 ) * (1 - 0.6) * Color(10,11) +
( 0.3 ) * ( 0.6 ) * Color(11,11) +
( 1 - 0.3 ) * ( 0.6 ) * Color(11,10)

(<< Does openGL support this method in LOW Level API or any similar method?>> )

D. In last step I mix the color of Point X and Y using linear interpolation.
i.e. if my triangle PQR is at distance 0.3 from triangle ABC and at 0.7 from triangle
MNO, then the color of each pixel in triangle PQR will be:
color(each Pixel in PQR) = [0.7 * color(X) * (Area of ABC) +
0.3 * color(Y) * (Area of MNO) ] /
(Area of ABC + Area of MNO);
– where both the color of X and Y are calculated using step C
– X and Y themselves are calcualted using step B.
– each pixel in PQR is calculated in step A.

All of the above steps are quite simple to code,
BUT
– when you have to do step A for each triangle,
– step B for each pixel in each triangle,
– step C for each point calculated in step B,
– and Point D for each pixel in each triangle,
for 1000 triangles, in real time (i.e. 16 frames
at least), computer (even the pentinum 500) simply
fails to cope up.

Any openGL API at any step will save time? Any ideas?

thanks
Navneet Dalal

Originally posted by coco:
OpenGL can be seen as an interface between hardware graphics and your app. In fact, it’s quite low-level, and doesn’t support this kind of things directly.
BUT
cards such as the NVIDIA GeForce and ATi Radeon have multiple modelview matrix extensions, that can let you do such things in hardware, so check with them. Otherwise, do your own morphing before sending vertices to OpenGL (that’s the way most, if not all, games do today).

4

OpenGL can automatically fill triangles. All you need to do is to specify a color with glColor. To smoothly interpolate between points, I think you can use glMap1 and glEvalCoord.

5

softland:

In my case, I have two images. And I have divided those two images into triangles,
with corresponding points marked.

Can you correct if I am right:
I create array of Triangle Pairs, with
each pair having one triangle for image one and corresponding triangle from image two.
I set color at each pixel in each such triangle Pairs using glColor. And then I use glMap and glEvalCoord for blending.

I have yet to look for the API call you mentioned, and I try this thing soon.

Do you have any idea how to do this thing efficently in openGL , as I am new to this API.

6

if you could fit a texture map to each triangle, then

you only need to keep the texture coordinates of each vertex the same, and then display the same triangle twice. The triangle drawn on top should have the appropriate alpha/opacity, while the bottom one would be totally opaque.

e.g. the appropriate alpha for your example, if ABC drawn on top is 0.7 * (Area of ABC) / (Area of ABC + Area of MNO)

7

Well, I didn’t expertise yet with glMap1, glMap2 and glEvalCoord but I can give you some guidelines:

First, you prepare a 2-dimensional array (3 columns by 2 rows) that contains the vertices that specify the two triangles T1 and T2:

theArray =

[(T1A, T1B, T1C),
(T2A, T2B, T2C)]

Secondly, you use glMap2 to map the width of your matrix to 1, and the height of it to 1. So, T2B, for instance, will have map coordinates (0.5,1):

glMap2d(GL_MAP2_VERTEX_3, 0, 1, 3, 0, 1, 3*3, theArray);

Start morphing with t=0 and increment t by 0.1 for every frame and compute your morphing triangle(T) vertices as follows:

glColor3f(red, green, blue, alpha);
glEvalCoord2d(0.0, t); // for TA
glEvalCoord2d(0.5, t); // for TB
glEvalCoord2d(1.0, t); // for TC

Then I think you can use blending with alpha values or you can use the accumulation buffer to get motion effect.

I’m not very sure though

[This message has been edited by softland_gh (edited 01-07-2001).]

8

If you want a smooth color transition you can assign the color using “glcolor” for each vertex. This way, an array of colors are automatically interpolated for that triangle.