l

build/fyge.min.js

@@ -13418,7 +13418,7 @@ function getLoopInPingpongTween(objArr, round, op) {
 }
 var totalOp = 0;
 var lottieData;
-function handleLottieData(data) {
+function lottieToSvgaData(data) {
     if (data.svgaData)
         return data.svgaData;
     totalOp = data.op;
@@ -13471,7 +13471,7 @@ function handleLottieData(data) {
     videoEntity.sprites.reverse();
     return lottieData.svgaData = videoEntity;
 }
-exports.handleLottieData = handleLottieData;
+exports.lottieToSvgaData = lottieToSvgaData;
 function addFrames(layerData) {
     var ks = layerData.ks;
     var ip = layerData.ip;
@@ -13834,7 +13834,7 @@ var MovieClip = (function (_super) {
                 var child = this.addChild(new Sprite_1.default(this.rawData.textures ?
                     this.rawData.textures[ele.imageKey] :
                     utils_1.TextureCache[ele.imageKey] ||
-                        utils_1.TextureCache[ele.imageKey + ".png"]));
+                        utils_1.TextureCache[ele.imageKey + ".png"] || null));
                 child["frames"] = ele.frames;
                 if (ele.frames[0].alpha < 0.05) {
                     child.alpha = 0;
@@ -16209,26 +16209,16 @@ var D3Renderer = (function (_super) {
                 };
                 if (geo._indices)
                     glVaoBuffer.indexBuffer = glCore_1.GLBuffer.createIndexBuffer(gl, null, gl.STATIC_DRAW);
-                var float32View = geo._attrBuffer.float32View;
-                var count = 0;
-                for (var j = 0; j < geo._vertices.length / 3; j++) {
-                    float32View[count++] = geo._vertices[j * 3];
-                    float32View[count++] = geo._vertices[j * 3 + 1];
-                    float32View[count++] = geo._vertices[j * 3 + 2];
-                    float32View[count++] = geo._colors[j * 3];
-                    float32View[count++] = geo._colors[j * 3 + 1];
-                    float32View[count++] = geo._colors[j * 3 + 2];
-                    float32View[count++] = geo._uvs[j * 2];
-                    float32View[count++] = geo._uvs[j * 2 + 1];
-                    float32View[count++] = geo._normals[j * 3];
-                    float32View[count++] = geo._normals[j * 3 + 1];
-                    float32View[count++] = geo._normals[j * 3 + 2];
-                    if (1) { }
+                if (geo._morphPositions) {
+                    glVaoBuffer.morphTargetBuffers = [];
+                    for (var m = 0; m < geo._morphPositions.length; m++) {
+                        glVaoBuffer.morphTargetBuffers.push(glCore_1.GLBuffer.createVertexBuffer(gl, null, gl.STATIC_DRAW));
+                    }
                 }
+                packGeometry(geo);
             }
             var vao = glVaoBuffer.vaos[curShader._glShaderKey];
             var attrs = curShader.attributes;
-            this.packGeometry();
             if (!vao) {
                 vao = glVaoBuffer.vaos[curShader._glShaderKey] = this.renderer.createVao()
                     .addAttribute(glVaoBuffer.attrBuffer, attrs.aPosition, gl.FLOAT, false, geo._vertByteSize, 0 * 4)
@@ -16242,6 +16232,12 @@ var D3Renderer = (function (_super) {
                 glVaoBuffer.attrBuffer.upload(geo._attrBuffer.vertices, 0, false);
                 if (geo._indices)
                     glVaoBuffer.indexBuffer.upload(geo._indices, 0, false);
+                if (geo._morphPositions) {
+                    var len = geo._morphNormals ? 4 : 8;
+                    for (var n = 0; n < len; n++) {
+                        glVaoBuffer.morphTargetBuffers[n];
+                    }
+                }
             }
             else {
                 this.renderer.bindVao(vao);
@@ -16257,11 +16253,26 @@ var D3Renderer = (function (_super) {
         }
         this.meshes.length = 0;
     };
-    D3Renderer.prototype.packGeometry = function () {
-    };
     return D3Renderer;
 }(ObjectRenderer_1.default));
 exports.D3Renderer = D3Renderer;
+function packGeometry(geo) {
+    var float32View = geo._attrBuffer.float32View;
+    var count = 0;
+    for (var j = 0; j < geo._vertices.length / 3; j++) {
+        float32View[count++] = geo._vertices[j * 3];
+        float32View[count++] = geo._vertices[j * 3 + 1];
+        float32View[count++] = geo._vertices[j * 3 + 2];
+        float32View[count++] = geo._colors[j * 3];
+        float32View[count++] = geo._colors[j * 3 + 1];
+        float32View[count++] = geo._colors[j * 3 + 2];
+        float32View[count++] = geo._uvs[j * 2];
+        float32View[count++] = geo._uvs[j * 2 + 1];
+        float32View[count++] = geo._normals[j * 3];
+        float32View[count++] = geo._normals[j * 3 + 1];
+        float32View[count++] = geo._normals[j * 3 + 2];
+    }
+}
 WebglRenderer_1.WebglRenderer.registerPlugin('d3', D3Renderer);
 
 
@@ -16479,6 +16490,7 @@ var Mesh3D = (function (_super) {
         var _this = _super.call(this) || this;
         _this.geometry = geometry;
         _this.material = material;
+        _this.updateMorphTargets();
         return _this;
     }
     Mesh3D.prototype._render = function (renderer) {
@@ -16487,6 +16499,14 @@ var Mesh3D = (function (_super) {
         renderer.batchManager.setObjectRenderer(renderer.plugins["d3"]);
         renderer.plugins["d3"].render(this);
     };
+    Mesh3D.prototype.updateMorphTargets = function () {
+        var morphPositions = this.geometry._morphPositions;
+        if (morphPositions) {
+            this.morphTargetInfluences = [];
+            for (var i = 0; i < morphPositions.length; i++)
+                this.morphTargetInfluences.push(0);
+        }
+    };
     Mesh3D.prototype.raycast = function (raycaster, intersects) {
         if (!this.visible || !this.geometry || !this.material || this.material.wireframe)
             return;
@@ -16540,6 +16560,9 @@ var Mesh3D = (function (_super) {
         }
     };
     ;
+    Mesh3D.prototype.clone = function () {
+        return new Mesh3D(this.geometry, this.material).copy(this);
+    };
     return Mesh3D;
 }(Object3D_1.Object3D));
 exports.Mesh3D = Mesh3D;

src/3D/D3Renderer.ts

@@ -12,6 +12,7 @@ import { BLEND_MODES } from "../2d/const";
 import { BatchBuffer } from "../2d/renderers/webgl/BatchBuffer";
 import { BaseMaterial, RenderSideType } from "./materials/BaseMaterial";
 import { getCusShader } from "./shaders/getCusShader";
+import { Geometry } from ".";
 
 
 //需要管理渲染的状态 resetToDefault  resetTo3D
@@ -141,42 +142,32 @@ export class D3Renderer extends ObjectRenderer {
                 //有索引
                 if (geo._indices) glVaoBuffer.indexBuffer = GLBuffer.createIndexBuffer(gl, null, gl.STATIC_DRAW);
                 //有变形顶点
-                
+                if (geo._morphPositions) {//长度可以根据位置，还是根据
+                    glVaoBuffer.morphTargetBuffers = [];mesh.morphTargetInfluences.length
+                    for (let m = 0; m < geo._morphPositions.length; m++) {
+                        glVaoBuffer.morphTargetBuffers.push(
+                            GLBuffer.createVertexBuffer(gl, null, gl.STATIC_DRAW)
+                        )
+                    }
+                }
                 //有变形法线
-
-                //计算一次，打包所有的顶点属性
-                const float32View = geo._attrBuffer.float32View;
-                var count = 0;
-                for (var j = 0; j < geo._vertices.length / 3; j++) {
-                    //顶点
-                    float32View[count++] = geo._vertices[j * 3];
-                    float32View[count++] = geo._vertices[j * 3 + 1];
-                    float32View[count++] = geo._vertices[j * 3 + 2];
-                    //@ts-ignore 颜色，以后搞成一位，现在有bug
-                    // geo._attrBuffer.uint32View[count++] = rgb2hex(geo._colors.slice(j * 3, j * 3 + 3)) + (1 * 255 << 24)
-                    float32View[count++] = geo._colors[j * 3];
-                    float32View[count++] = geo._colors[j * 3 + 1];
-                    float32View[count++] = geo._colors[j * 3 + 2];
-                    // float32View[count++] = 1;
-                    //uv
-                    float32View[count++] = geo._uvs[j * 2];
-                    float32View[count++] = geo._uvs[j * 2 + 1];
-                    //法线,可能不需要法线的情况，也加上先
-                    float32View[count++] = geo._normals[j * 3];
-                    float32View[count++] = geo._normals[j * 3 + 1];
-                    float32View[count++] = geo._normals[j * 3 + 2];
-
-                    //如果存在mo
-                    if (1) { }
+                if (geo._morphNormals) {
+                    glVaoBuffer.morphNormalBuffers = [];
+                    for (let m = 0; m < geo._morphNormals.length; m++) {
+                        glVaoBuffer.morphNormalBuffers.push(
+                            GLBuffer.createVertexBuffer(gl, null, gl.STATIC_DRAW)
+                        )
+                    }
                 }
+
+                //计算一次，打包所有的顶点属性，位置，颜色，uv，法线
+                packGeometry(geo);
             }
             //@ts-ignore
             var vao = glVaoBuffer.vaos[curShader._glShaderKey];
             var attrs = curShader.attributes;
-            //计算打包顶点信息
-            this.packGeometry()
             if (!vao) {
-                //@ts-ignore
+                //@ts-ignore vao添加各种attribute
                 vao = glVaoBuffer.vaos[curShader._glShaderKey] = this.renderer.createVao()
                     //索引
                     // .addIndex(glVaoBuffer.indexBuffer)
@@ -190,22 +181,32 @@ export class D3Renderer extends ObjectRenderer {
                 if (attrs.aNormal) vao.addAttribute(glVaoBuffer.attrBuffer, attrs.aNormal, gl.FLOAT, false, geo._vertByteSize, 8 * 4);
                 //索引看情况加
                 if (geo._indices) vao.addIndex(glVaoBuffer.indexBuffer);
-                //变形顶点
+                //变形顶点，最多8个，有法线的话传4个
+                if (geo._morphPositions) {
 
+                }
                 //变形法线
 
                 // 首次需要绑定buffer到vao
                 this.renderer.bindVao(vao);
+                //所有数据绑定buffer，其实可以在上面构造GLBuffer里传数据，现在还是单独处理吧，这样判断比较多
                 //需要分别绑定
-                glVaoBuffer.attrBuffer.upload(geo._attrBuffer.vertices, 0, false)
+                glVaoBuffer.attrBuffer.upload(geo._attrBuffer.vertices, 0, false);
                 //有索引才改
-                if (geo._indices) glVaoBuffer.indexBuffer.upload(geo._indices, 0, false)
+                if (geo._indices) glVaoBuffer.indexBuffer.upload(geo._indices, 0, false);
+                //变形顶点
+                if (geo._morphPositions) {
+                    var len = geo._morphNormals ? 4 : 8;
+                    for (let n = 0; n < len; n++) {
+                        glVaoBuffer.morphTargetBuffers[n]
+                    }
+                }
             } else {
                 this.renderer.bindVao(vao);
                 //不修改，估计都不要变，需要修改时候
                 // glVaoBuffer.attrBuffer.upload(glVaoBuffer._attrBuffer.vertices, 0, true)
                 // glVaoBuffer.indexBuffer.upload(glVaoBuffer._indexBuffer, 0, true)
-                //变形的数据可能传入的会改变，所以需要upload
+                //变形的数据可能传入的会改变，所以需要upload，还要重新修改数据，有removeAttribute的情况，TODO
 
             }
             //根据材质切换渲染面
@@ -221,10 +222,37 @@ export class D3Renderer extends ObjectRenderer {
         }
         this.meshes.length = 0
     }
+}
 
-    private packGeometry() {
-
+/**
+ * 组转集合的所有属性到一个_attrBuffer
+ * @param geo 
+ */
+function packGeometry(geo: Geometry): void {
+    const float32View = geo._attrBuffer.float32View;
+    var count = 0;
+    for (var j = 0; j < geo._vertices.length / 3; j++) {
+        //顶点
+        float32View[count++] = geo._vertices[j * 3];
+        float32View[count++] = geo._vertices[j * 3 + 1];
+        float32View[count++] = geo._vertices[j * 3 + 2];
+        //@ts-ignore 颜色，以后搞成一位，现在有bug
+        // geo._attrBuffer.uint32View[count++] = rgb2hex(geo._colors.slice(j * 3, j * 3 + 3)) + (1 * 255 << 24)
+        float32View[count++] = geo._colors[j * 3];
+        float32View[count++] = geo._colors[j * 3 + 1];
+        float32View[count++] = geo._colors[j * 3 + 2];
+        // float32View[count++] = 1;
+        //uv
+        float32View[count++] = geo._uvs[j * 2];
+        float32View[count++] = geo._uvs[j * 2 + 1];
+        //法线,可能不需要法线的情况，也加上先
+        float32View[count++] = geo._normals[j * 3];
+        float32View[count++] = geo._normals[j * 3 + 1];
+        float32View[count++] = geo._normals[j * 3 + 2];
     }
+}
+
+function updateMorphtargets(morphTargetInfluences:number[],geo:Geometry,){
 
 }
 

src/3D/Geometry.ts

@@ -52,12 +52,11 @@ export class Geometry extends HashObject {
     /**
      * 顶点变形数据数组
      */
-
+    _morphPositions: Float32Array[] | number[][];
     /**
-     * 法线顶点数据数组
-     * 
+     * 法线变形数据数组
      */
-
+    _morphNormals: Float32Array[] | number[][];
     /**
      * 
      * @param vertices 
@@ -144,9 +143,17 @@ interface VaoBufferInt {
      */
     indexBuffer?: GLBuffer,
     /**
-     * 顶点相关属性
+     * 顶点相关属性，位置，颜色，uv，法线
      */
     attrBuffer: GLBuffer,
+    /**
+     * 变形位置数据，数组，最大长度8
+     */
+    morphTargetBuffers?: GLBuffer[],
+    /**
+     * 变形法线数据，数组，最大长度4
+     */
+    morphNormalBuffers?: GLBuffer[],
     /**
      * 需要根据着色器程序id作为指向，
      * 灯光重置过着色器，基本要重来一次，上面的buffer可以留着，重新addAttr到新的vao

src/3D/Mesh3D.ts

@@ -17,15 +17,17 @@ export class Mesh3D extends Object3D {
     /**
      * 外部可设置
      * 用于变形权重，
-     * 
+     * 最大长度8
      */
     public morphTargetInfluences: number[];
+    //这个暂时不知道有啥用，到时看three的
+    // morphTargetDictionary
     constructor(
         public geometry: Geometry,
         public material: BaseMaterial
     ) {
         super();
-
+        this.updateMorphTargets();
     }
     _render(renderer) {
         if (!this.visible) return
@@ -34,37 +36,12 @@ export class Mesh3D extends Object3D {
     }
 
     updateMorphTargets() {
-
-        // var geometry = this.geometry;
-        // var m, ml, name;
-
-        // var morphAttributes = geometry.morphAttributes;
-        // var keys = Object.keys(morphAttributes);
-
-        // if (keys.length > 0) {
-
-        //     var morphAttribute = morphAttributes[keys[0]];
-
-        //     if (morphAttribute !== undefined) {
-
-        //         this.morphTargetInfluences = [];
-        //         this.morphTargetDictionary = {};
-
-        //         for (m = 0, ml = morphAttribute.length; m < ml; m++) {
-
-        //             name = morphAttribute[m].name || String(m);
-
-        //             this.morphTargetInfluences.push(0);
-        //             this.morphTargetDictionary[name] = m;
-
-        //         }
-
-        //     }
-
-        // }
-
-
-
+        var morphPositions = this.geometry._morphPositions;
+        if (morphPositions) {
+            this.morphTargetInfluences = [];
+            //根据morphPositions的长度来定权重长度
+            for (var i = 0; i < morphPositions.length; i++) this.morphTargetInfluences.push(0);
+        }
     }
 
     raycast(raycaster: Raycaster, intersects: IntersectData[]) {

src/3D/gltf/GLTFLoader.ts

@@ -322,7 +322,7 @@ function addMorphTargets(geometry, targets, accessors) {
 		}
 
 	}
-
+//morphPositions是个positionAttribute的数组，我那边应该只需要数据，步长啥的都自己干
 	if (hasMorphPosition) geometry.morphAttributes.position = morphPositions;
 	if (hasMorphNormal) geometry.morphAttributes.normal = morphNormals;
 

src/glCore/VertexArrayObject.ts

@@ -150,8 +150,9 @@ export class VertexArrayObject {
      * @param normalized {Boolean}
      * @param stride     {Number}
      * @param start      {Number}
+     * @param name       {string} 名字，用于移除，否则不需要传
      */
-    public addAttribute(buffer, attribute, type?, normalized?, stride?, start?) {
+    public addAttribute(buffer, attribute, type?, normalized?, stride?, start?, name?: number) {
         this.attributes.push({
             buffer: buffer,
             attribute: attribute,
@@ -160,13 +161,32 @@ export class VertexArrayObject {
             type: type || this.gl.FLOAT,
             normalized: normalized || false,
             stride: stride || 0,
-            start: start || 0
+            start: start || 0,
+
+            name: name,//名字，用于移除用，
         });
 
         this.dirty = true;
 
         return this;
     };
+    /**
+     * 移除attribute，暂时attributes是数组，是否考虑变成对象，现在按数组遍历移除，到时重名可能还有问题TODO
+     * @param name 
+     * @param onlyOne  
+     */
+    public removeAttribute(name: string, onlyOne: boolean = true): this {
+        let len = this.attributes.length;
+        for (var i = len - 1; i >= 0; i--) {//倒序
+            let attr = this.attributes[i]
+            if (attr.name === name) {//同名移除
+                this.attributes.splice(i, 1);//从数组移除
+                //只需要移除一个就break
+                if (onlyOne) break;
+            }
+        }
+        return this
+    }
 
     /**
      * 添加索引数据