sunyu
/
live2demo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #20 from Live2D/feature/fix_texture_management 

Fix texture management.
translate
Takuya Ito 2019-01-16 16:18:24 +09:00 committed by GitHub
parent 301c897593 8af62c53c0
commit 102eda3c97
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 50 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
Framework/rendering/cubismrenderer_WebGL.ts
View File

@ -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;
}

43
Sample/TypeScript/Demo/src/lappmodel.ts
View File

@ -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
@ -166,7 +167,7 @@ export class LAppModel extends CubismUserModel {
}
else
{
console.log("ModelData is not exist");
LAppPal.printLog("Model data does not exist.");
}
// Expression
@ -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++)
{
@ -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++;
@ -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);
}

75
Sample/TypeScript/Demo/src/lapptexturemanager.ts
View File

@ -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";
/**
* テクスチャ管理クラス
@ -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;
}
}
@ -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;
}
/**
@ -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();
@ -137,7 +136,7 @@ export class LAppTextureManager
continue;
}
this._textures.set(i, void 0);
this._textures.set(i, null);
this._textures.remove(i);
break;
}
@ -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;
}
@ -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
Sample/TypeScript/Demo/src/lappview.ts
View File

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