diff --git a/Framework/rendering/cubismrenderer_WebGL.ts b/Framework/rendering/cubismrenderer_WebGL.ts index 2532544..e84248e 100644 --- a/Framework/rendering/cubismrenderer_WebGL.ts +++ b/Framework/rendering/cubismrenderer_WebGL.ts @@ -1477,11 +1477,6 @@ export namespace Live2DCubismFramework this._bufferData.index = null; this._bufferData = null; - for (const ite: csmmap.iterator = this._textures.begin(); ite.notEqual(this._textures.end()); ite.preIncrement()) - { - this.gl.deleteTexture(ite.ptr().second); - } - this._textures.clear(); this._textures = null; } diff --git a/Sample/TypeScript/Demo/src/lappmodel.ts b/Sample/TypeScript/Demo/src/lappmodel.ts index 859156f..da96371 100644 --- a/Sample/TypeScript/Demo/src/lappmodel.ts +++ b/Sample/TypeScript/Demo/src/lappmodel.ts @@ -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); } diff --git a/Sample/TypeScript/Demo/src/lapptexturemanager.ts b/Sample/TypeScript/Demo/src/lapptexturemanager.ts index c2ac651..a2bd273 100644 --- a/Sample/TypeScript/Demo/src/lapptexturemanager.ts +++ b/Sample/TypeScript/Demo/src/lapptexturemanager.ts @@ -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 = 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 = 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; // ファイル名 } \ No newline at end of file diff --git a/Sample/TypeScript/Demo/src/lappview.ts b/Sample/TypeScript/Demo/src/lappview.ts index 3114947..46cbf6b 100644 --- a/Sample/TypeScript/Demo/src/lappview.ts +++ b/Sample/TypeScript/Demo/src/lappview.ts @@ -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)