Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Dear Users,

Now, we are seeking users who can give us a hand with expertise to evolve our software more dynamically.
If you are willing to help us, we’d like you to make a registration for “Live2D Creators Circle” via the link below.
Designers, programmers, translators are especially welcomed so far.
(More detailed explanation will be given to you before we ask you to do tasks)

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

edited February 2018 in Help
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);

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);

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

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) {

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...


  • 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()

  • Thanks for your reply! It worked for me! Thanks a lot! Great!
Sign In or Register to comment.