【问题标题】:Rendering multiple textures at different points on screen without using point sprites在不使用点精灵的情况下在屏幕上的不同点渲染多个纹理
【发布时间】:2012-06-30 01:36:11
【问题描述】:

我正在构建一个 ios 绘图应用程序,并且很难在屏幕上的不同点绘制油漆纹理。大多数在线教程都是指在屏幕上渲染特定尺寸的单个纹理。

但是,我正在寻找的是提供一个 2d 顶点数组,用于绘制基于用户在屏幕上触摸的位置计算的绘制纹理。

我使用的点精灵不需要我指定纹理坐标和用于绘制纹理的原始对象。

但是,我想使用纹理坐标来提供原始对象(例如用三角形条绘制的四边形)。

关于如何做到这一点的任何想法?任何指针都会有所帮助。

库纳尔

【问题讨论】:

  • 我不太确定您具体遇到了什么问题。只需使用一个纹理绘制任意数量的图元,绑定不同的纹理,绘制更多图元等......直到完成。还是我错过了什么?
  • 我想不通的是如何在用户触摸时为基元提供坐标。我可能想把它们画成 GL_TRIANGLE_STRIPS,对吧?在这种情况下,我必须为每个三角形提供 3 个顶点?

标签: ios opengl-es opengl-es-1.1


【解决方案1】:

如果我理解正确,您想在用户触摸屏幕的点绘制许多纹理(相同的图像)。对于我的粒子系统,我使用这个:

float squarevData[12]={
        -1,1,
        1,1,
        -1,-1,
        1,1,
        1,-1,
        -1,-1,
    };
float squarevData2[12]={
        -1,1,
        1,1,
        -1,-1,
        1,1,
        1,-1,
        -1,-1,
    };
class BatchRenderer
{
public:
    float* partVdata;
    float* partCdata;
    float* partTdata;

    int counter1,counter2,counter3;
    int count;
    bool isz;
    BatchRenderer(int maxTextures,bool iszi)
    {
        isz=iszi;
        if(isz)partVdata=(float*)malloc(maxTextures*18*4);
        else partVdata=(float*)malloc(maxTextures*12*4);

        partCdata=(float*)malloc(maxTextures*24*4);
        partTdata=(float*)malloc(maxTextures*12*4);
    }

    void Draw(float x,float y,float z,float scalex,float scaley,float angle,float r,float g,float b,float a)
    {
        angle*=0.017453f;
        for(int c2=0;c2<12;c2+=2)
        {
                float x=squarevData[c2]*scalex;
                float y=squarevData[c2+1]*scaley;
                float cos1=cos(angle);
                float sin1=sin(angle);
                squarevData2[c2] = (cos1*x) - ( sin1*y);
                squarevData2[c2+1] = (sin1*x) + ( cos1*y);
        }

        partVdata[counter1++]=x+squarevData2[0];
        partVdata[counter1++]=y+squarevData2[1];
        if(isz)partVdata[counter1++]=z;
        partCdata[counter2++]=r;
        partCdata[counter2++]=g;
        partCdata[counter2++]=b;
        partCdata[counter2++]=a;
        partTdata[counter3++]=0;
        partTdata[counter3++]=1;


        partVdata[counter1++]=x+squarevData2[2];
        partVdata[counter1++]=y+squarevData2[3];
        if(isz)partVdata[counter1++]=z;
        partCdata[counter2++]=r;
        partCdata[counter2++]=g;
        partCdata[counter2++]=b;
        partCdata[counter2++]=a;
        partTdata[counter3++]=1;
        partTdata[counter3++]=1;

        partVdata[counter1++]=x+squarevData2[4];
        partVdata[counter1++]=y+squarevData2[5];
        if(isz)partVdata[counter1++]=z;
        partCdata[counter2++]=r;
        partCdata[counter2++]=g;
        partCdata[counter2++]=b;
        partCdata[counter2++]=a;
        partTdata[counter3++]=0;
        partTdata[counter3++]=0;

        partVdata[counter1++]=x+squarevData2[6];
        partVdata[counter1++]=y+squarevData2[7];
        if(isz)partVdata[counter1++]=z;
        partCdata[counter2++]=r;
        partCdata[counter2++]=g;
        partCdata[counter2++]=b;
        partCdata[counter2++]=a;
        partTdata[counter3++]=1;
        partTdata[counter3++]=1;

        partVdata[counter1++]=x+squarevData2[8];
        partVdata[counter1++]=y+squarevData2[9];
        if(isz)partVdata[counter1++]=z;
        partCdata[counter2++]=r;
        partCdata[counter2++]=g;
        partCdata[counter2++]=b;
        partCdata[counter2++]=a;
        partTdata[counter3++]=1;
        partTdata[counter3++]=0;

        partVdata[counter1++]=x+squarevData2[10];
        partVdata[counter1++]=y+squarevData2[11];
        if(isz)partVdata[counter1++]=z;
        partCdata[counter2++]=r;
        partCdata[counter2++]=g;
        partCdata[counter2++]=b;
        partCdata[counter2++]=a;
        partTdata[counter3++]=0;
        partTdata[counter3++]=0;

        count++;

    }
    void RenderStart()
    {
        counter1=counter2=count=counter3=0;

    }
    void RenderStop(int textureid)
    {
        glEnable(GL_TEXTURE_2D);
        glTexEnvf(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE,GL_MODULATE);
        glEnableClientState(GL_COLOR_ARRAY);
        glEnableClientState(GL_TEXTURE_COORD_ARRAY);
        glEnableClientState(GL_VERTEX_ARRAY);
        glBindTexture(GL_TEXTURE_2D, textureid);
        glTexCoordPointer(2, GL_FLOAT, 0, partTdata);
        glColorPointer(4, GL_FLOAT, 0,partCdata );
        if(isz)glVertexPointer(3, GL_FLOAT, 0, partVdata);
        else glVertexPointer(2, GL_FLOAT, 0, partVdata);
        glDrawArrays(GL_TRIANGLES, 0, count*6);
        glDisableClientState(GL_COLOR_ARRAY);
        glDisableClientState(GL_TEXTURE_COORD_ARRAY);
        glDisableClientState(GL_VERTEX_ARRAY);

    }
};

怎么用?

BatchRenderer* br=new BatchRenderer(500,false)//the max number of textures that can be drawn , and if you want z axis

void Render()
{
      br->RenderStart();
      for(int c=0;c<POINTS;c++)
      {                          
    br->Draw(p[c].x,p[c].y,0,p[c].scalex,p[c].scaly,p[c].angle,p[c].r,p[c].g,p[c].b,p[c].a);
      }
      br->RenderStop(yourtextureid);

}

您可以使用中间设备以 60 fps 的速度绘制 500 多个纹理,并且每个纹理都可以具有独特的比例、旋转和颜色

【讨论】:

    【解决方案2】:

    我终于让它工作了。我将用户触摸的每个点绘制为 TRIANGLE_STRIP 基元,其中两个一起形成一个正方形。

        GLfloat *tBuffer = malloc(4 * 2 * sizeof(GLfloat));
        tBuffer[0] = 0.0;
        tBuffer[1] = 1.0;
        tBuffer[2] = 1.0;
        tBuffer[3] = 1.0;
        tBuffer[4] = 0.0;
        tBuffer[5] = 0.0;
        tBuffer[6] = 1.0;
        tBuffer[7] = 0.0;
        glTexCoordPointer(2, GL_FLOAT, 0, tBuffer);
    
        CGFloat padding = 16;
        vBuffer[0] = xCenter - padding;
        vBuffer[1] = yCenter - padding;
    
        vBuffer[2] = xCenter + padding;
        vBuffer[3] = yCenter - padding;
    
        vBuffer[4] = xCenter - padding;
        vBuffer[5] = yCenter + padding;
    
        vBuffer[6] = xCenter + padding;
        vBuffer[7] = yCenter + padding;
    
        CGFloat degrees = atan2(end.y - start.y, end.x - start.x) * 180 / M_PI;
    
        // rotate the texture in the direction of the stroke.
        glMatrixMode(GL_TEXTURE);
        glPushMatrix();
        glTranslatef(0.5, 0.5, 0);
        glRotatef(degrees, 0, 0, 1);
        glTranslatef(-0.5, -0.5, 0);
        glVertexPointer(2, GL_FLOAT, 0, vBuffer);
        glDrawArrays(GL_TRIANGLE_STRIP, 0, count);
        glPopMatrix();
        glMatrixMode(GL_MODELVIEW);
    

    xCenter,yCenter 是用户触摸的地方。填充决定了图元的大小。

    我也旋转纹理,但在旋转之前将其转换到中心,因为旋转发生在原点处的枢轴。

    希望这会有所帮助!

    更新

    通过运行以下旋转命令集,我能够将 openGL 调用次数减少 1:

    请注意,通过运行以下旋转命令集(删除推送/弹出矩阵),我能够将 OpenGL 调用次数减少 1

        glMatrixMode(GL_TEXTURE);
        glLoadIdentity();
        glTranslatef(0.5, 0.5, 0);
        [GLManager rotateBrush:degrees];
        glTranslatef(-0.5, -0.5, 0);
        [GLManager drawVertexBuffer:vBuffer withVertexNumber:4];
        glMatrixMode(GL_MODELVIEW);`
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2013-01-14
      • 2014-08-12
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-11-03
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多