Merge pull request #20 from Live2D/feature/fix_texture_management

Fix texture management.

Framework/rendering/cubismrenderer_WebGL.ts

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

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();
+                let onLoad = (textureInfo: TextureInfo) : void => 
-                img[modelTextureNumber].onload = () =>
                 {
-                    // テクスチャオブジェクトの作成
+                    this.getRenderer().bindTexture(modelTextureNumber, textureInfo.id);
-                    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._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);
             }
 

Sample/TypeScript/Demo/src/lapptexturemanager.ts

@@ -1,13 +1,14 @@
 /*
-* Copyright(c) Live2D Inc. All rights reserved.
+ * Copyright(c) Live2D Inc. All rights reserved.
-*
+ *
-* Use of this source code is governed by the Live2D Open Software license
+ * 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.
+ * 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;           // ファイル名 
 }

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)