Howdy, Stranger!

It looks like you're new here. Sign in or register to get started.

If you have any questions, reports, suggestions, or requests about Live2D, please send them to this community.
※We cannot guarantee statements or answers from Live2D staff. Thank you for your understanding in advance.
Live2D Cubism
Cubism Products and Downloads
Cubism product manuals and tutorials
Cubism Editor Manual    Cubism Editor Tutorial    Cubism SDK Manual    Cubism SDK Tutorial
"[NOTICE]" About the support for Mac models
Cubism Editor is not supported with Apple M1 processors.
Please refer to System Requirements for details.
We will not respond to any related inquiries with this message.
Please note that Cubism SDK is not supported with Apple M1 processors and macOS 11.0 Big Sur.
Live2D user has created a tutorial video(unoffilcial) in English. SEE ALSO.
Thank you, brian_tsui!
[Live2D Tutorial 2020] Introduction to Tools and Technical Concepts

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.