Skip to content

Commit

Permalink
Fix texture management.
Browse files Browse the repository at this point in the history
  • Loading branch information
cubism-dev committed Jan 16, 2019
1 parent 301c897 commit 8af62c5
Show file tree
Hide file tree
Showing 4 changed files with 50 additions and 77 deletions.
5 changes: 0 additions & 5 deletions Framework/rendering/cubismrenderer_WebGL.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1477,11 +1477,6 @@ export namespace Live2DCubismFramework
this._bufferData.index = null;
this._bufferData = null;

for (const ite: csmmap.iterator<number, WebGLTexture> = this._textures.begin(); ite.notEqual(this._textures.end()); ite.preIncrement())
{
this.gl.deleteTexture(ite.ptr().second);
}
this._textures.clear();
this._textures = null;
}

Expand Down
43 changes: 10 additions & 33 deletions Sample/TypeScript/Demo/src/lappmodel.ts
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,8 @@ import CubismDefaultParameterId = cubismdefaultparameterid;

import {LAppDefine} from "./lappdefine";
import {LAppPal} from "./lapppal";
import { gl, canvas, frameBuffer} from "./lappdelegate";
import {gl, canvas, frameBuffer, LAppDelegate} from "./lappdelegate";
import {TextureInfo} from "./lapptexturemanager";
import "whatwg-fetch";

function createBuffer(path: string, callBack: any): void
Expand Down Expand Up @@ -166,7 +167,7 @@ export class LAppModel extends CubismUserModel {
}
else
{
console.log("ModelData is not exist");
LAppPal.printLog("Model data does not exist.");
}

// Expression
Expand Down Expand Up @@ -476,7 +477,6 @@ export class LAppModel extends CubismUserModel {
{
// テクスチャ読み込み用
let textureCount: number = this._modelSetting.getTextureCount();
let img: HTMLImageElement[] = new Array(textureCount);

for(let modelTextureNumber = 0; modelTextureNumber < textureCount; modelTextureNumber++)
{
Expand All @@ -491,34 +491,10 @@ export class LAppModel extends CubismUserModel {
let texturePath = this._modelSetting.getTextureFileName(modelTextureNumber);
texturePath = this._modelHomeDir + texturePath;

// データのオンロードをトリガーにする
img[modelTextureNumber] = new Image();
img[modelTextureNumber].onload = () =>
// ロード完了時に呼び出すコールバック関数
let onLoad = (textureInfo: TextureInfo) : void =>
{
// テクスチャオブジェクトの作成
let tex: WebGLTexture = gl.createTexture();

// テクスチャを選択
gl.bindTexture(gl.TEXTURE_2D, tex);

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

// Premult処理を行わせる
if(usePremultiply)
{
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, 1);
}

// テクスチャにピクセルを書き込む
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img[modelTextureNumber]);

// ミップマップを生成
gl.generateMipmap(gl.TEXTURE_2D);

this.getRenderer().bindTexture(modelTextureNumber, tex);
this.getRenderer().bindTexture(modelTextureNumber, textureInfo.id);

this._textureCount++;

Expand All @@ -527,9 +503,10 @@ export class LAppModel extends CubismUserModel {
// ロード完了
this._state = LoadStep.CompleteSetup;
}
}
img[modelTextureNumber].src = texturePath;

};

// 読み込み
LAppDelegate.getInstance().getTextureManager().createTextureFromPngFile(texturePath, usePremultiply, onLoad);
this.getRenderer().setIsPremultipliedAlpha(usePremultiply);
}

Expand Down
75 changes: 38 additions & 37 deletions Sample/TypeScript/Demo/src/lapptexturemanager.ts
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
/*
* Copyright(c) Live2D Inc. All rights reserved.
*
* Use of this source code is governed by the Live2D Open Software license
* that can be found at http://live2d.com/eula/live2d-open-software-license-agreement_en.html.
*/
* Copyright(c) Live2D Inc. All rights reserved.
*
* Use of this source code is governed by the Live2D Open Software license
* that can be found at http://live2d.com/eula/live2d-open-software-license-agreement_en.html.
*/

import {Live2DCubismFramework as csmvector} from "../../../../Framework/type/csmvector";
import Csm_csmVector = csmvector.csmVector;
import { gl } from "./lappdelegate";
import csmVector_iterator = csmvector.iterator;
import {gl} from "./lappdelegate";

/**
* テクスチャ管理クラス
Expand All @@ -28,41 +29,34 @@ export class LAppTextureManager
*/
public release(): void
{
this._textures.clear();
for(let ite: csmVector_iterator<TextureInfo> = this._textures.begin(); ite.notEqual(this._textures.end()); ite.preIncrement())
{
gl.deleteTexture(ite.ptr().id);
}
this._textures = null;
}

/**
* プリマルチプライ処理
* @param red 画像のRed値
* @param green 画像のGreen値
* @param blue 画像のBlue値
* @param alpha 画像のAlpha値
*/
public premultiply(red: number, green: number, blue: number, alpha: number): number
{
return (
(red * (alpha + 1) >> 8) |
((green * (alpha + 1) >> 8) << 8) |
((blue * (alpha + 1) >> 8) << 16) |
(((alpha)) << 24)
);
}

/**
* 画像読み込み
*
* @param fileName 読み込む画像ファイルパス名
* @param usePremultiply Premult処理を有効にするか
* @return 画像情報、読み込み失敗時はnullを返す
*/
public createTextureFromPngFile(fileName: string, callback: any): TextureInfo
public createTextureFromPngFile(fileName: string, usePremultiply: boolean, callback: any): void
{
// search loaded texture already
for(let i: number = 0; i < this._textures.getSize(); i++)
for(let ite: csmVector_iterator<TextureInfo> = this._textures.begin(); ite.notEqual(this._textures.end()); ite.preIncrement())
{
if(this._textures.at(i).fileName == fileName)
if(ite.ptr().fileName == fileName && ite.ptr().usePremultply == usePremultiply)
{
return this._textures.at(i);
// 2回目以降はキャッシュが使用される(待ち時間なし)
ite.ptr().img.onload = () =>
{
callback(ite.ptr());
}
ite.ptr().img.src = fileName;
return;
}
}

Expand All @@ -80,31 +74,36 @@ export class LAppTextureManager
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

// Premult処理を行わせる
if(usePremultiply)
{
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, 1);
}

// テクスチャにピクセルを書き込む
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);

// ミップマップを生成
gl.generateMipmap(gl.TEXTURE_2D);

// テクスチャをバインド
gl.bindTexture(gl.TEXTURE_2D, tex);
gl.bindTexture(gl.TEXTURE_2D, null);

let textureInfo: TextureInfo = new TextureInfo();

if(textureInfo != null)
{
textureInfo.fileName = fileName;
textureInfo.width = img.width;
textureInfo.height = img.height;
textureInfo.id = tex;
textureInfo.img = img;
textureInfo.usePremultply = usePremultiply;
this._textures.pushBack(textureInfo);
}

callback(textureInfo);
}
img.src = fileName;

return null;
}

/**
Expand All @@ -116,7 +115,7 @@ export class LAppTextureManager
{
for(let i: number = 0; i < this._textures.getSize(); i++)
{
this._textures.set(i, void 0);
this._textures.set(i, null);
}

this._textures.clear();
Expand All @@ -137,7 +136,7 @@ export class LAppTextureManager
continue;
}

this._textures.set(i, void 0);
this._textures.set(i, null);
this._textures.remove(i);
break;
}
Expand All @@ -155,7 +154,7 @@ export class LAppTextureManager
{
if(this._textures.at(i).fileName == fileName)
{
this._textures.set(i, void 0);
this._textures.set(i, null);
this._textures.remove(i);
break;
}
Expand All @@ -170,8 +169,10 @@ export class LAppTextureManager
*/
export class TextureInfo
{
img: HTMLImageElement; // 画像
id: WebGLTexture = null; // テクスチャ
width: number = 0; // 横幅
height: number = 0; // 高さ
usePremultply: boolean; // Premult処理を有効にするか
fileName: string; // ファイル名
}
4 changes: 2 additions & 2 deletions Sample/TypeScript/Demo/src/lappview.ts
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,7 @@ export class LAppView
this._back = new LAppSprite(x, y, fwidth, fheight, textureInfo.id);
};

textureManager.createTextureFromPngFile(resourcesPath + imageName, initBackGroundTexture);
textureManager.createTextureFromPngFile(resourcesPath + imageName, false, initBackGroundTexture);

// 歯車画像初期化
imageName = LAppDefine.GearImageName;
Expand All @@ -157,7 +157,7 @@ export class LAppView
this._gear = new LAppSprite(x, y, fwidth, fheight, textureInfo.id);
};

textureManager.createTextureFromPngFile(resourcesPath + imageName, initGearTexture);
textureManager.createTextureFromPngFile(resourcesPath + imageName, false, initGearTexture);

// シェーダーを作成
if(this._programId == null)
Expand Down

0 comments on commit 8af62c5

Please sign in to comment.