How to set background image with OpenGL API for GLKView when rendering live2d.

niyao

Hi, I am developing an iOS App with Live2D SDK 2.1.04 and I have to set background image when rendering the live2d model. However, when I using OpenGL API render a background image in GLKView context it only display half texture of the background image



Code as below.

#pragma mark - GLKViewDelegate
- (void)glkView:(GLKView *)view drawInRect:(CGRect)rect {
    CGFloat width = self.viewWidth;
    CGFloat height = self.viewHeight;

    glClearColor(1.0f, 1.0f, 1.0f, 1.0f);
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); EXC_BAD_ACCESS

    GLfloat squareVertexData[] =
    {
        1, -1, 0.0f,    1.0f, 0.0f, 
        -1, 1, 0.0f,    0.0f, 1.0f,
        -1, -1, 0.0f,   0.0f, 0.0f, 
        1, 1, -0.0f,    1.0f, 1.0f, 
    };

    GLuint indices[] =
    {
        0, 1, 2,
        1, 3, 0
    };
    self.mCount = sizeof(indices) / sizeof(GLuint);

    GLuint buffer;
    glGenBuffers(1, &buffer);
    glBindBuffer(GL_ARRAY_BUFFER, buffer);
    glBufferData(GL_ARRAY_BUFFER, sizeof(squareVertexData), squareVertexData, GL_STATIC_DRAW);

    GLuint index;
    glGenBuffers(1, &index);
    glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, index);
    glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);

    glEnableVertexAttribArray(GLKVertexAttribPosition); 
    glVertexAttribPointer(GLKVertexAttribPosition, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 5, (GLfloat *)NULL + 0);


    glEnableVertexAttribArray(GLKVertexAttribTexCoord0); 
    glVertexAttribPointer(GLKVertexAttribTexCoord0, 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 5, (GLfloat *)NULL + 3);


    [self.mEffect prepareToDraw];
     glDrawElements(GL_TRIANGLES, self.mCount, GL_UNSIGNED_INT, 0);

    CGSize screen = CGSizeMake(width, height);

    float scx = 3 / live2DModel->getCanvasWidth() ;
    float scy = -3 / live2DModel->getCanvasWidth() *(screen.width/screen.height);
    float x = -1.5;
    float y = 1;
    float matrix []= {
        scx , 0 , 0 , 0 ,
        0 , scy ,0 , 0 ,
        0 , 0 , 1 , 0 ,
        x , y , 0 , 1
    } ;

    live2DModel->setMatrix(matrix) ;

    if (self.refreshAction) {
        self.refreshAction();
    }

    live2DModel->update() ;
    live2DModel->draw() ;
}

When I remove the live2d rendering source code, it will display the total image.


I think perhaps OpenGL API in my code is conflict with live2d, so how to set background image with OpenGL and live2d in a proper way?

Waiting for the answer...

[Deleted User]

Hi,

GLfloat squareVertexData[] =
    {
        1, -1, 0.0f,    1.0f, 0.0f,
        -1, 1, 0.0f,    0.0f, 1.0f,
        -1, -1, 0.0f,   0.0f, 0.0f,
        1, 1, -0.0f,    1.0f, 1.0f,
    };
    
    GLuint indices[] =
    {
        0, 1, 2,
        1, 3, 0
    };

In this part, polygons for the background on the bottom left is set as CCW (Counter Clock Wise). In live2DModel->draw(), setting of Culling is changed. However, triangles are regarded as background and are not displayed because the setting of Culling is not restored.

In order ti solve this problem, you can restore settings of Culling after live2DModel->draw() or make the order of vertexes of the polygons for the background CW (Clock Wise). In case of the first solution written above, OpenGL settings changed in Live2D can be saved and restored by using DrawProfileCocos2D class in Live2D library. The class can be used by adding DrawProfileCocos2D:: preDraw() before live2DModel->draw(), and DrawProfileCocos2D:: postDraw() after live2DModel->draw()

DrawProfileCocos2D::preDraw();
live2DModel->draw();
DrawProfileCocos2D::postDraw();

Thanks,

niyao

Thanks for your reply! It worked for me! Thanks a lot! Great!