perf: improve resource management performance (#10)

* perf: update ResourceManager * fix resourceManager reset bug * fix typo * update examples & fix something...
hiloteam · May 29, 2020 · 6ff8cbd · 6ff8cbd
1 parent 7944d70
commit 6ff8cbd
Show file tree

Hide file tree

Showing 6 changed files with 189 additions and 65 deletions.
diff --git a/examples/resourceManagerTest.html b/examples/resourceManagerTest.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <title>Hilo3d ResourceManager Test</title>
+    <link rel="stylesheet" type="text/css" href="./example.css">
+</head>
+<body>
+    <div id="container"></div>
+    <script src="../build/Hilo3d.js"></script>
+    <script src="./js/stats.js"></script>
+    <script src="./js/OrbitControls.js"></script>
+    <script src="./js/init.js"></script>
+    <script>
+        var boxGeometry = new Hilo3d.BoxGeometry();
+        boxGeometry.setAllRectUV([[0, 1], [1, 1], [1, 0], [0, 0]]);
+
+        var colorBox = new Hilo3d.Mesh({
+            geometry: boxGeometry,
+            material: new Hilo3d.BasicMaterial({
+                diffuse: new Hilo3d.Color(0.8, 0, 0)
+            }),
+            x: -1,
+            onUpdate: function() {
+                this.rotationX += .5;
+                this.rotationY += .5;
+            }
+        });
+        stage.addChild(colorBox);
+
+        var colorBox2 = new Hilo3d.Mesh({
+            geometry: boxGeometry,
+            material: new Hilo3d.BasicMaterial({
+                diffuse: new Hilo3d.Color(0.8, 0, 0)
+            }),
+            x: -1.2,
+            onUpdate: function() {
+                this.rotationX += .5;
+                this.rotationY += .5;
+            }
+        });
+        stage.addChild(colorBox2.setScale(0.5));
+
+        var angle = 0;
+        var axis = new Hilo3d.Vector3(1, 1, 1).normalize();
+        var textureBox = new Hilo3d.Mesh({
+            geometry:boxGeometry,
+            material: new Hilo3d.BasicMaterial({
+                diffuse:new Hilo3d.LazyTexture({
+                    crossOrigin:true,
+                    src:'//gw.alicdn.com/tfs/TB1iNtERXXXXXcBaXXXXXXXXXXX-600-600.png'
+                })
+            }),
+            x: 1,
+            onUpdate: function() {
+                angle += Hilo3d.math.DEG2RAD;
+                this.quaternion.setAxisAngle(axis, angle);
+            }
+        });
+        stage.addChild(textureBox);
+
+        const sleep = async (time) => {
+            return new Promise((resolve) => {
+                setTimeout(resolve, time);
+            });
+        };
+        (async () => {
+            stage.renderer.onInit(() => {
+                stage.renderer.resourceManager.on('destroyResource', (e) => {
+                    console.log(`%c - ${e.detail}`, 'color:red');
+                });
+            });
+
+            const WAIT_TIME = 1000;
+            await sleep(WAIT_TIME);
+            Hilo3d.logGLResource()
+
+            await sleep(WAIT_TIME);
+            colorBox.destroy(renderer, true);
+            console.log("\n----------------------------\ncolorBox destroy");
+            await sleep(WAIT_TIME);
+            Hilo3d.logGLResource();
+
+            await sleep(WAIT_TIME);
+            colorBox2.destroy(renderer, true);
+            console.log("\n----------------------------\ncolorBox2 destroy");
+            await sleep(WAIT_TIME);
+            Hilo3d.logGLResource();
+
+            await sleep(WAIT_TIME);
+            textureBox.destroy(renderer, true);
+            console.log("\n----------------------------\ntextureBox destroy");
+            await sleep(WAIT_TIME);
+            Hilo3d.logGLResource();
+
+            console.log(`
+queryObjects(WebGLBuffer);
+queryObjects(WebGLProgram);
+queryObjects(Hilo3d.VertexArrayObject);
+`);
+        })();
+    </script>
+</body>
+</html>
diff --git a/src/core/Mesh.js b/src/core/Mesh.js
@@ -58,9 +58,6 @@ const Mesh = Class.create(/** @lends Mesh.prototype */ {
      */
     constructor(params) {
         Mesh.superclass.constructor.call(this, params);
-
-        // store webgl resource
-        this._usedResourceDict = {};
     },
     /**
      * clone 当前mesh
@@ -108,9 +105,15 @@ const Mesh = Class.create(/** @lends Mesh.prototype */ {
         this.geometry.getRenderOption(opt);
         return opt;
     },
-    useResource(res) {
-        if (res) {
-            this._usedResourceDict[res.className + ':' + res.id] = res;
+
+    /**
+     * 是否被销毁
+     * @readOnly
+     * @type {Boolean}
+     */
+    isDestroyed: {
+        get() {
+            return this._isDestroyed;
         }
     },
 
@@ -128,18 +131,13 @@ const Mesh = Class.create(/** @lends Mesh.prototype */ {
         this.removeFromParent();
 
         const resourceManager = renderer.resourceManager;
-        const _usedResourceDict = this._usedResourceDict;
-
-        for (let id in _usedResourceDict) {
-            resourceManager.destroyIfNoRef(_usedResourceDict[id]);
-        }
+        resourceManager.destroyMesh(this);
 
         if (this.material && needDestroyTextures) {
             this.material.destroyTextures();
         }
 
         this.off();
-        this._usedResourceDict = null;
         this.geometry = null;
         this.material = null;
         this._isDestroyed = true;

diff --git a/src/core/Stage.js b/src/core/Stage.js
@@ -357,6 +357,7 @@ const Stage = Class.create(/** @lends Stage.prototype */ {
      * @return {Stage} this
      */
     destroy() {
+        Stage.superclass.destroy.call(this, this.renderer);
         this.releaseGLResource();
         this.traverse((child) => {
             child.off();

diff --git a/src/renderer/VertexArrayObject.js b/src/renderer/VertexArrayObject.js
@@ -365,22 +365,22 @@ const VertexArrayObject = Class.create(/** @lends VertexArrayObject.prototype */
             attributeObject.useInstanced = true;
         });
     },
+
     /**
-     * 使用了资源
-     * @param  {WebGLResourceManager} resourceManager
-     * @param  {Mesh} mesh
-     * @return {VertexArrayObject}
+     * 获取资源
+     * @param {Object[]} [resources=[]]
+     * @return {Object[]}
      */
-    useResource(resourceManager, mesh) {
+    getResources(resources = []) {
         this.attributes.forEach((attributeObject) => {
-            resourceManager.useResource(attributeObject.buffer, mesh);
+            resources.push(attributeObject.buffer);
         });
 
         if (this.indexBuffer) {
-            resourceManager.useResource(this.indexBuffer, mesh);
+            resources.push(this.indexBuffer);
         }
 
-        return this;
+        return resources;
     },
     /**
      * 没有被引用时销毁资源
@@ -402,13 +402,17 @@ const VertexArrayObject = Class.create(/** @lends VertexArrayObject.prototype */
             return this;
         }
 
+        this.instancedExtension = null;
+
         if (this.useVao) {
             this.vaoExtension.deleteVertexArrayOES(this.vao);
+            this.vao = null;
+            this.vaoExtension = null;
         }
         this.gl = null;
         this.indexBuffer = null;
         this.attributes.forEach((attributeObject) => {
-            const attribute = attributeObject;
+            const attribute = attributeObject.attribute || {};
             this[attribute.name] = null;
         });
         this.attributes = null;

diff --git a/src/renderer/WebGLRenderer.js b/src/renderer/WebGLRenderer.js
@@ -629,7 +629,6 @@ const WebGLRenderer = Class.create(/** @lends WebGLRenderer.prototype */ {
         const gl = this.gl;
         const state = this.state;
         const lightManager = this.lightManager;
-        const resourceManager = this.resourceManager;
         const geometry = mesh.geometry;
         const material = this.forceMaterial || mesh.material;
         const shader = Shader.getShader(mesh, material, useInstanced, lightManager, this.fog, this.useLogDepth);
@@ -652,7 +651,9 @@ const WebGLRenderer = Class.create(/** @lends WebGLRenderer.prototype */ {
 
         this.setupVao(vao, program, mesh);
 
-        resourceManager.useResource(vao, mesh).useResource(shader, mesh).useResource(program, mesh);
+        mesh._vao = vao;
+        mesh._shader = shader;
+        mesh._program = program;
 
         return {
             vao,
@@ -695,7 +696,6 @@ const WebGLRenderer = Class.create(/** @lends WebGLRenderer.prototype */ {
         lightManager.reset();
         renderInfo.reset();
         renderList.reset();
-        resourceManager.reset();
 
         semantic.init(this, state, camera, lightManager, this.fog);
         stage.updateMatrixWorld();
@@ -743,7 +743,7 @@ const WebGLRenderer = Class.create(/** @lends WebGLRenderer.prototype */ {
             this.fire('afterRender');
         }
 
-        resourceManager.destroyUnsuedResource();
+        resourceManager.destroyUnsuedResource(stage);
     },
     /**
      * 渲染场景