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.
※Please do not use direct messages to contact our staff. We will not reply to your message. Please use the Direct Message function as instructed only when our staff requests files via Direct Message.
Live2D Cubism
Cubism Products and Downloads
Cubism product manuals and tutorials
Cubism Editor Manual    Cubism Editor Tutorial    Cubism SDK Manual    Cubism SDK Tutorial
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
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.
[INFORMATION] (07/08/2022)
Cubism 4 SDK R5 beta4 are now available!
※Only Cubism 4 SDK for Native is version R5 beta4_1 due to some modifications.

Cubism 4 SDK R5 beta4 also supports some of the new features in Cubism Editor 4.2!

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.