完善粒子

src/plugin/particle/particle.ts

@@ -49,6 +49,10 @@ export class Particle {
 
     /** 需要渲染的粒子列表 */
     list: ParticleOne[] = [];
+    /** 是否需要更新缓冲区数据 */
+    needUpdateBuffer: boolean = false;
+    /** 当前缓存信息 */
+    cache?: Float32Array;
 
     /** 是否需要更新 */
     private needUpdate: boolean = false;
@@ -175,6 +179,27 @@ export class Particle {
         this.list = particles;
     }
 
+    /**
+     * 获取粒子的Float32Array信息
+     */
+    getArrayInfo() {
+        if (!this.cache || this.needUpdateBuffer) {
+            const array = this.list;
+            const particleArray = new Float32Array(
+                array
+                    .map(v => {
+                        const [r, g, b, a] = v.color;
+                        return [v.x, v.y, v.z, r, g, b, a, v.r, 0];
+                    })
+                    .flat()
+            );
+            this.cache = particleArray;
+            return particleArray;
+        } else {
+            return this.cache;
+        }
+    }
+
     /**
      * 每帧执行的粒子更新器
      */
@@ -185,10 +210,12 @@ export class Particle {
         // check number
         if (this.list.length > this.density) {
             this.list.splice(this.density);
+            this.needUpdateBuffer = true;
         } else if (this.list.length < this.density) {
             this.list.push(
                 ...this.generateNewParticles(this.density - this.list.length)
             );
+            this.needUpdateBuffer = true;
         }
 
         // check radius
@@ -198,6 +225,7 @@ export class Particle {
                 this.list.forEach(v => {
                     v.r += delta;
                 });
+                this.needUpdateBuffer = true;
             }
         }
 
@@ -214,6 +242,7 @@ export class Particle {
                     v.color[2] += b;
                     v.color[3] += a;
                 });
+                this.needUpdateBuffer = true;
             }
         }
 
@@ -228,6 +257,7 @@ export class Particle {
                     v.y += y;
                     v.z += z;
                 });
+                this.needUpdateBuffer = true;
             }
         }
 
@@ -266,6 +296,7 @@ export class Particle {
                         }) as ParticleColor;
                     });
                 }
+                this.needUpdateBuffer = true;
             }
         }
 
@@ -298,6 +329,6 @@ export class Particle {
      * 渲染这个粒子
      */
     private render() {
-        this.renderer?.render(this);
+        this.renderer?.render();
     }
 }

src/plugin/particle/render.ts

@@ -202,15 +202,8 @@ export class Renderer {
      * 更新一个粒子的缓冲区数据
      * @param array 粒子的粒子元素数组
      */
-    private updateOneParticleBufferData(array: ParticleOne[]) {
+    private updateOneParticleBufferData(particle: Particle) {
-        const particleArray = new Float32Array(
+        const particleArray = particle.getArrayInfo();
-            array
-                .map(v => {
-                    const [r, g, b, a] = v.color;
-                    return [v.x, v.y, v.z, r, g, b, a, v.r, 0];
-                })
-                .flat()
-        );
         this.gl.bufferData(
             this.gl.ARRAY_BUFFER,
             particleArray,
@@ -240,7 +233,7 @@ export class Renderer {
      * @param particle 要渲染的粒子
      */
     private renderOne(particle: Particle) {
-        const arr = this.updateOneParticleBufferData(particle.list);
+        const arr = this.updateOneParticleBufferData(particle);
         const size = arr.BYTES_PER_ELEMENT;
 
         const { position, color, radius } = this.attribLocation;
@@ -307,11 +300,9 @@ window.addEventListener('load', async () => {
     camera.lookAt([1, 1, 5], [0, 0, 0], [0, 1, 0]);
     camera.setPerspective(20, 1, 1, 100);
 
-    console.log(camera.view, camera.projection);
+    particle.setColor([0.3, 0.6, 0.7, 1.0]);
-
+    particle.setRadius(2);
-    particle.setColor([0.3, 0.6, 0.7, 0.7]);
+    particle.setDensity(5000);
-    particle.setRadius(3);
-    particle.setDensity(1000);
     particle.setThreshold({
         posX: 0.2,
         posY: 0.2,

src/plugin/webgl/matrix.ts

@@ -1,4 +1,3 @@
-import { cloneDeep } from 'lodash';
 import { has } from '../utils';
 
 export class Matrix extends Array<number[]> {