Smooth Zooming in UIScrollView - how can it be realized in OpenGL ES 1.1 ?

[-Jeka-]

Hello everybody!

I have two UIScrollView, which should be scrolled and redrawn synchronously.
Also I have got EAGLView view (over the other view), where the content of these two UIScrollView is drawn.
EAGLView view has the array of UIScrollView views and activates the drawing function for each of them.

[self BeginRedrawWindow];
for (unsigned int nView = 0; nView < nCountViews; nView++)
{
curView = &(views[nView]);
rcViewFrame = [curView->m_pDrawView GetFrameRect];
rcClipRect = CGRectMake(rcViewFrame.origin.x - rcOwnFrame.origin.x, 
rcViewFrame.origin.y - rcOwnFrame.origin.y, 
rcViewFrame.size.width, 
rcViewFrame.size.height);
curView->m_DrawContext.BeginDrawing(rcClipRect.origin.x, rcClipRect.origin.y); //just reset some params
curView->m_DrawContext.SetClipRect(&rcClipRect);
[curView->m_pDrawView DrawInToDeviceContext:&(curView->m_DrawContext)];
}
[self EndRedrawWindow];

where

- (void)BeginRedrawWindow
{
glViewport(0, 0, m_nBackingWidth, m_nBackingHeight);
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
glOrthof(0.0f, (GLfloat)m_nBackingWidth, 0.0f, (GLfloat)m_nBackingHeight, 0.0f, 1.0f);
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
// Clears the view with black
glClearColor(0.0f, 0.0f, 0.0f, 0.0f);
// Make sure that you are drawing to the current context
[EAGLContext setCurrentContext:m_context];
glBindFramebufferOES(GL_FRAMEBUFFER_OES, m_viewFramebuffer);
glClear(GL_COLOR_BUFFER_BIT);
//correct matrix pos
glTranslatef(0, (CGFloat)m_nBackingHeight, 0);
}

- (void)EndRedrawWindow
{
ImgSize curImgSize = _skinMgr.GetCurrentImgSize();
glBindTexture(GL_TEXTURE_2D, m_cellsTextureArr[curImgSize]);
// Enable use of the texture
glEnable(GL_TEXTURE_2D);
// Set a blending function to use
glBlendFunc(GL_ONE, GL_ONE_MINUS_SRC_ALPHA);
// Enable blending
glEnable(GL_BLEND);
GLDrawItem* curView;
for (unsigned int nView = 0; nView < nCountViews; nView++)
{
curView = &(views[nView]);
[self ApplyContextData:&(curView->m_DrawContext)];
}
 
glBindRenderbufferOES(GL_RENDERBUFFER_OES, m_viewRenderbuffer);
[m_context presentRenderbuffer:GL_RENDERBUFFER_OES];
}

- (void)ApplyContextData:(GLDrawContext*)ctx
{
CGRect clipRect;
BOOL bEnableClipRect = ctx->GetClipRect(&clipRect);
//set clip rect
if (bEnableClipRect)
{
glEnable(GL_SCISSOR_TEST);
glScissor(clipRect.origin.x, m_nBackingHeight - clipRect.origin.y - clipRect.size.height, clipRect.size.width, clipRect.size.height);
}
const unsigned int nCountItems = ctx->GetCountCells();
if (nCountItems > 0)
{
const GLfloat* verticesBack = ctx->GetVertices_Back();
const GLfloat* texcoordsBack = ctx->GetTexcoords_Back();
glVertexPointer(2, GL_FLOAT, 0, verticesBack);
glEnableClientState(GL_VERTEX_ARRAY);
glTexCoordPointer(2, GL_FLOAT, 0, texcoordsBack);
glEnable(GL_TEXTURE_2D);
glEnableClientState(GL_TEXTURE_COORD_ARRAY);
glDrawArrays(GL_TRIANGLES, 0, POINTS_PER_CELL * nCountItems);
glDisableClientState(GL_VERTEX_ARRAY);
glDisableClientState(GL_TEXTURE_COORD_ARRAY);
}
//disable clip rect
if (bEnableClipRect)
{
glDisable(GL_SCISSOR_TEST);
}
}

The drawing function for UIScrollView looks approximately like the following:
//go throuth lines
for (int nCellY = firstDrawCell.y; nCellY < m_nCountRows; nCellY++)
{
//go throuth cell by x axe
for (int nCellX = firstDrawCell.x; nCellX < m_nCountCols; nCellX++)
{
CCell* pCurCell = m_pPuzzleBoard->GetCell(eMainCells, nCellX, nCellY);
bool bSelected = false;
//
if (m_bPressedOnCell)
{
if ((m_PressedCell.x == nCellX) || (m_PressedCell.y == nCellY))
bSelected = true;
}
ImgCellType cellType = _skinMgr.GetCellTypeFromState(pCurCell->m_eState, bSelected);
pDrawCtx->AddNewCell(cellType, curDrawPoint.x, curDrawPoint.y);
//for separator
if (((nCellX + 1) < m_nCountCols) && ((nCellX + 1) % m_GridStep.cx == 0))
{
curDrawPoint.x += m_nGridSize;
}
curDrawPoint.x += m_cellSize.width;
//
if (curDrawPoint.x >= rect.size.width)
break;
} 
//for separator
if (((nCellY + 1) < m_nCountRows) && ((nCellY + 1) % m_GridStep.cy == 0))
{
curDrawPoint.y += m_nGridSize;
}
curDrawPoint.y += m_cellSize.height;
curDrawPoint.x = firstDrawCellPoint.x;
//
if (curDrawPoint.y >= rect.size.height)
break;
}

BOOL GLDrawContext:: AddNewCell(ImgCellType cellType, float posX, float posY)
{
ImgElDimensionsF cellDimensions = _skinMgr.GL_GetCurrerntCellDimensions(cellType);
ImgTextureInfoF imgCellInfo = m_pCellTextureInfo[cellType];
if (m_nCurAddCrossCell >= m_nMaxCountCrossCell)
return FALSE;
const int idx = m_nCurAddCrossCell * ELEMENTS_PER_CELL;
//*-------
//|  3--4
//|  |  |
//|  1--2
//*
/* 1X */
m_spriteVerticesCross[idx + 0] = posX;
/* 1Y */
m_spriteVerticesCross[idx + 1] =  -posY - cellDimensions.fHeight;
/* 2X */
m_spriteVerticesCross[idx + 2] = posX + cellDimensions.fWidth;
/* 2Y */
m_spriteVerticesCross[idx + 3] = -posY - cellDimensions.fHeight;
/* 3X */
m_spriteVerticesCross[idx + 4] = posX;
/* 3Y */
m_spriteVerticesCross[idx + 5] = -posY;
/* 2X */
m_spriteVerticesCross[idx + 6] = posX + cellDimensions.fWidth;
/* 2Y */
m_spriteVerticesCross[idx + 7] = -posY - cellDimensions.fHeight;
/* 3X */
m_spriteVerticesCross[idx + 8] = posX;
/* 3Y */
m_spriteVerticesCross[idx + 9] = -posY;
/* 4X */
m_spriteVerticesCross[idx + 10] = posX + cellDimensions.fWidth;
/* 4Y */
m_spriteVerticesCross[idx + 11] = -posY;
//1--2
//|  |
//3--4
//
/* 1X */
m_spriteTexcoordsCross[idx + 0] = imgCellInfo.fX;
/* 1Y */
m_spriteTexcoordsCross[idx + 1] = imgCellInfo.fY + imgCellInfo.fHeight;
/* 2X */
m_spriteTexcoordsCross[idx + 2] = imgCellInfo.fX + imgCellInfo.fWidth;
/* 2Y */
m_spriteTexcoordsCross[idx + 3] = imgCellInfo.fY + imgCellInfo.fHeight;
/* 3X */
m_spriteTexcoordsCross[idx + 4] = imgCellInfo.fX;
/* 3Y */
m_spriteTexcoordsCross[idx + 5] = imgCellInfo.fY;
/* 2X */
m_spriteTexcoordsCross[idx + 6] = imgCellInfo.fX + imgCellInfo.fWidth;
/* 2Y */
m_spriteTexcoordsCross[idx + 7] = imgCellInfo.fY + imgCellInfo.fHeight;
/* 3X */
m_spriteTexcoordsCross[idx + 8] = imgCellInfo.fX;
/* 3Y */
m_spriteTexcoordsCross[idx + 9] = imgCellInfo.fY; 
/* 4X */
m_spriteTexcoordsCross[idx + 10] = imgCellInfo.fX + imgCellInfo.fWidth;
/* 4Y */
m_spriteTexcoordsCross[idx + 11] = imgCellInfo.fY;
//
return TRUE;
}

Content of each UIScrollView consists of cells (like chessboard). There are four arrays of cells, each array contains cells with specified size. While zooming, the sells with the most optimal size for drawing are chosen and these are drawn with the OpenGL 1.1.The initialization of all four textures takes place at the beginning while initialization of drawing windows.
Zoom of the content takes place in these windows. Zoom value is formed by adding of calculated new distance (which is passed by fingers (moving apart or converging)) multiplied on a constant coefficient:

fNewZoom += fDistance * fCoef;

fDistance can have negative value while decreasing.
The drawing function of redrawing is called while message processing:

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event

Zoom is made not gradually, but sharply. Somehow drawing is very slow (about 6-7 fps). How should I do the right zoom? How can I optimize drawing, for example, like in Crosswords for iPhone/iPad program ? Is drawing of 500 – 600 small squares with the OpenGL 1.1 is really very resource-intensive job? What am I doing wrong? Please, help me to cope with this problem.