When Textures Are Displayed Incorrectly

Updated: 11/24/2021

Translucent Areas Darken

NativeCompornent、SDK for Native

Causes

Occurs when a pre-multiplied alpha image is read in as a non-multiplied file.
The reason for this is that the colors are darkened due to the double multiplication of alpha values during compositing and creating images.

If translucent areas such as cheeks are rendered correctly, this is a different problem.

Countermeasures

Set True in CubismRenderer::IsPremultipliedAlpha or convert the image to a form that does not use multiplied alpha.

Translucent Areas Emit Light

NativeCompornent、SDK for Native

Causes

The cause is the same as for darkening, but the phenomenon is caused by the opposite setting.
This occurs when an image that is not a multiplied alpha image is treated as a multiplied alpha file.
The image is processed as if it were glowing in order to make it appear brighter as if it were darker.

Countermeasures

Set False in CubismRenderer::IsPremultipliedAlpha or convert the image to a multiplied alpha.

Noticeable Jaggies, Rough Borders

NativeCompornent、SDK for Native、Unity

Causes

The switching occurs sharply when drawing without mipmaps,
giving the impression that antialiasing is ineffective, that lines are rough, and that jaggies are present.

Countermeasures (Unity)

Check Generate Mip Maps in the inspector of the texture to generate mipmaps.

Countermeasures (Native)

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR_MIPMAP_LINEAR );
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR );
glGenerateMipmap(GL_TEXTURE_2D);

In OpenGL, select GL_LINEAR_MIPMAP_LINEAR and GL_LINEAR for the texture usage.
Also, generate a mipmap with glGenerateMipmap.

Faint Borders

Unity

Causes and Countermeasures

This happens when the Alpha Is Transparency setting in the inspector of the texture is off.
After checking the box, press Apply in the lower right corner.

Low Resolution (Partial)

NativeCompornent、SDK for Native、Unity

Causes

This occurs when the interpolation method for the image is interpolated using only one of the most recent points (Point (no filter) or GL_NEAREST).

Countermeasures (Unity)

Change the Filter Mode to Bilinear or Trilinear in the inspector of the texture.

Countermeasures (Native)

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR_MIPMAP_LINEAR );
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR );

Set the mipmap use setting to Liner as when jaggies appear.

UV Distorted on Some Mobile Devices

Cubism SDK for Native and Cubism SDK for Web

Causes

If the floating point precision of the values used in OpenGL’s FragmentShader is low, the UVs of the mesh may be at unintended coordinates depending on the terminal where it is run.

Countermeasures

Change the precision mediump float defined in FragmentShader to a precision highp float.

Please let us know what you think about this article.