Support morph animation.

[GuoLei1990]

System Design:
Realization ideas:

1. Realize using CPU and GPU, CPU compute the vertices and upload to GPU.
2. Realize using pure GPU by multi attributes.
3. Realize using GPU float texture.

Performance: 2 and 3 is better than 1, because 1 need upload data from CPU to GPU.
Feature: 1 and 3 is better than 2, because many mobile GPU ony support 16 attributes, 2 has functional defect.
Memory: 2 and 3 is better than 1, because 1 maybe store extra memory in SkinnedMeshRenderer.

Conclusion:
It seems that 3 is perfect, but 3 need support float texture and gl_vertexID in shader,so must webgl2.0. but i still like, 3 is facing the future.
We need choose another to support webgl1.0, I think 2 is enough.
Finally I decide to use 3+2 to implement.

API Design (WIP):

Feat API:

class SkinnedMeshRenderer
{
    ...................

    /**
     * The weights of the BlendShapes.
     */
    get blendShapeWeights(): number[];
  
    set blendShapeWeights(value: number[]);
}

class ModleMesh
{
    ........................
  
    /**
     * BlendShape count of this ModleMesh.
     */
    get blendShapes(): Readonly<BlendShape[]>;
  
    /**
     * Add a BlendShape for this ModleMesh.
     * @param blendShape - The BlendShape.
     */
    addBlendShape(blendShape: BlendShape): void;
  
    /**
     * Clear all BlendShapes.
     */
    clearBlendShapes(): void;
}

Class to strore BlendShape Data:

import { Vector3 } from "@oasis-engine/math";
import { BlendShapeFrame } from "./BlendShapeFrame";
/**
 * BlendShape.
 */
export declare class BlendShape {
    /** Name of BlendShape. */
    name: string;
    /**
     * Frames of BlendShape.
     */
    get frames(): Readonly<BlendShapeFrame[]>;
    /**
     * Create a BlendShape.
     * @param name - BlendShape name.
     */
    constructor(name: string);
    /**
     * Add a BlendShapeFrame.
     * @param frame - The BlendShapeFrame.
     */
    addFrame(frame: BlendShapeFrame): void;
    /**
     * Add a BlendShapeFrame by weight, deltaPositions, deltaNormals and deltaTangents.
     * @param weight - Weight of BlendShapeFrame
     * @param deltaPositions - Delta positions for the frame being added
     * @param deltaNormals - Delta normals for the frame being added
     * @param deltaTangents - Delta tangents for the frame being added
     */
    addFrame(weight: number, deltaPositions: Vector3[], deltaNormals: Vector3[] | null, deltaTangents: Vector3[] | null): BlendShapeFrame;
    /**
     * Clear all frames.
     */
    clearFrames(): void;
}

/**
 * BlendShapeFrame.
 */
export declare class BlendShapeFrame {
    /** Weight of BlendShapeFrame. */
    weight: number;
    /** Delta positions for the frame being added. */
    deltaPositions: Vector3[];
    /** Delta normals for the frame being added. */
    deltaNormals: Vector3[] | null;
    /** Delta tangents for the frame being added. */
    deltaTangents: Vector3[] | null;
    /**
     * Create a BlendShapeFrame.
     * @param weight - Weight of BlendShapeFrame
     * @param deltaPositions - Delta positions for the frame being added
     * @param deltaNormals - Delta normals for the frame being added
     * @param deltaTangents - Delta tangents for the frame being added
     */
    constructor(weight: number, deltaPositions: Vector3[], deltaNormals: Vector3[] | null, deltaTangents: Vector3[] | null);
}

Usage:

// Organize data.
const blendShape = new BlendShape("ShapeA");
blendShape.addFrame(0.5, deltaPositions0, deltaNormals0, deltaTangens0);
blendShape.addFrame(1.0, deltaPositions1, deltaNormals1, deltaTangens1);
mesh.addBlendShape(blendShape);

// Apply blend shape.
meshRenderer.setBlendShapeWeight(0, 0.8);

[GuoLei1990]

Some references:
https://developer.nvidia.com/gpugems/gpugems3/part-i-geometry/chapter-3-directx-10-blend-shapes-breaking-limits