THREEjs flower animation on GPU

HTREEjs flower
Dragg mouse to rotate the scene. 3-key points (age = 0, 0.5, 1) animation by cubic spline interpolation on GPU (see also Mesh interpolation on CPU and Direct approach).

Comments

3-key points (positions and normals) are generated and set as attributes. BAS.PhongAnimationMaterial (from THREE.BAS library) is used to interpolate attributes on GPU.
    new BAS.PhongAnimationMaterial({
      vertexColors: THREE.VertexColors,
      side: THREE.DoubleSide,

      uniforms: { a: {value: new THREE.Vector3(1,0,0)} },
      vertexPosition: [ 'transformed =  a[0]*transformed + a[1]*position1 + a[2]*position2;' ],
      vertexNormal:   [ 'objectNormal = a[0]*objectNormal + a[1]*normal1 + a[2]*normal2;' ],
      vertexParameters: [
        'uniform vec3 a;',
        'attribute vec3 position1;',
        'attribute vec3 position2;',
        'attribute vec3 normal1;',
        'attribute vec3 normal2;'
      ]
    });
vec3 a - interpolation coefficients.
See the page source (~12 kb) for details.
Interactive splines. Contents
updated   28 Jan 2021