2021SC@SDUSC 【软件工程应用与实践】Claygl项目代码分析（八）

2021SC@SDUSC

（接上文）

目录

ParticleRenderable.js

4.2函数

_updateVertices

---

ParticleRenderable.js

4.2函数

_updateVertices

        var geometry = this.geometry;
        var animTileX = this.spriteAnimationTileX;
        var animTileY = this.spriteAnimationTileY;
        var animRepeat = this.spriteAnimationRepeat;
        var nUvAnimFrame = animTileY * animTileX * animRepeat;
        var hasUvAnimation = nUvAnimFrame > 1;
        var positions = geometry.attributes.position.value;
        var normals = geometry.attributes.normal.value;
        var uvs = geometry.attributes.texcoord0.value;
        var uvs2 = geometry.attributes.texcoord1.value;

首先定义了一些属性变量并赋值，这些涉及到粒子的几何数据和UV动画部分，包括UV贴图数、UV动画重复次数，是否包含UV动画，以及位置、贴图属性等相关信息；

        var len = this._particles.length;
        if (!positions || positions.length !== len * 3) {
            // TODO Optimize
            positions = geometry.attributes.position.value = new Float32Array(len * 3);
            normals = geometry.attributes.normal.value = new Float32Array(len * 3);
            if (hasUvAnimation) {
                uvs = geometry.attributes.texcoord0.value = new Float32Array(len * 2);
                uvs2 = geometry.attributes.texcoord1.value = new Float32Array(len * 2);
            }
        }

随后，定义粒子数量len；

确认位置信息若是不存在或者数据不正确，则进行补充优化，包括位置信息、normals的设置，如果其包含UV动画，还将设置相应的纹理坐标；

        var invAnimTileX = 1 / animTileX;
        for (var i = 0; i < len; i++) {
            var particle = this._particles[i];
            var offset = i * 3;
            for (var j = 0; j < 3; j++) {
                positions[offset + j] = particle.position.array[j];
                normals[offset] = particle.age / particle.life;
                normals[offset + 1] = 0;
                normals[offset + 2] = particle.spriteSize;
            }
            var offset2 = i * 2;
            if (hasUvAnimation) {
                var p = particle.age / particle.life;
                var stage = Math.round(p * (nUvAnimFrame - 1)) * animRepeat;
                var v = Math.floor(stage * invAnimTileX);
                var u = stage - v * animTileX;
                uvs[offset2] = u / animTileX;
                uvs[offset2 + 1] = 1 - v / animTileY;
                uvs2[offset2] = (u + 1) / animTileX;
                uvs2[offset2 + 1] = 1 - (v + 1) / animTileY;
            }
        }

根据当前属性更新粒子相应位置，normals信息，若含有UV动画，则更新uv数组信息；

geometry.dirty();

最后调用dirty()，其在GeometryBase.js中定义，是通常在更改属性的数据后调用的用于标记需要更新的属性和索引的函数。

（待续）