THREEjs flower animation on GPU
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