Comment keyframe animer une échelle et faire pivoter à partir d'un point d'ancrage d'un cube webGL?

Question

J'ai créé un cube dans WebGL. J'ai une animation en tête mais j'ai du mal à la faire se rencontrer.

Le code complet est d'environ 150 LNS de code Voici donc un exemple de travail: Working Plunkr Code

Voici un wireframe vidéo de l'animation, je suis en train de réaliser: https://youtu.be/sZeBm8EM3mw

1 animations -Les définit un point d'ancrage en bas à gauche du cube. 2 -L'animation redimensionne le cube à partir du point d'ancrage.

3 -Les animations font tourner le cube du point d'ancrage à peu près à mi-chemin de l'échelle.

shaders: (Vertex)

attribute vec4 coords; 
attribute float pointSize; 
uniform mat4 transformMatrix; 
attribute vec4 colors; 
varying vec4 varyingColors; 
uniform mat4 perspectiveMatrix; 
void main(void) { 
    gl_Position = perspectiveMatrix * transformMatrix * coords; 
    gl_PointSize = pointSize; 
    varyingColors = colors; 
} 

(Fragment)

precision mediump float; 
uniform vec4 color; 
varying vec4 varyingColors; 
void main(void) { 
    gl_FragColor = varyingColors; 
} 

J'utilise gl-matrix faire murer la transformation de la matrice

transformations irait au tirage au sort fn et utilisez le mat4 gl-matrix.

function draw() { 

    var transformMatrix = gl.getUniformLocation(shaderProgram, "transformMatrix"); 
    gl.uniformMatrix4fv(transformMatrix, false, matrix); 
    // mat4.rotateY(matrix, matrix, 0.01); // This is example of rotations 
    gl.clear(gl.COLOR_BUFFER_BIT); 
    gl.drawElements(gl.TRIANGLES, indexCount, gl.UNSIGNED_BYTE, 0); 
    requestAnimationFrame(draw); 
} 

Answer 1

Vous devez ajouter ce qu'on appelle un "Pivot" dans votre transformation. La transformation habituelle et simple est définie comme suit:

transform = scale * rotate * translate; 

où:

scale =  | rotate = | translate = 

Sx 0 0 0 | Xx Xy Xz 0 | 1 0 0 0 
0 Sy 0 0 | Yx Yy Yz 0 | 0 1 0 0 
0 0 Sz 0 | Zx Zy Zz 0 | 0 0 1 0 
0 0 0 1 | 0 0 0 1 | Tx Ty Tz 1 

Pour effectue la rotation/échelle autour d'un point de pivot (ancrage), vous devez ajouter une matrice de pivot décrivant la position de pivot (par rapport au centre de l'objet):

pivot = 

1 0 0 0 
0 1 0 0 
0 0 1 0 
Px Py Pz 1 

Et votre formule de transformation devient le suivi:

transform = inverse(pivot) * scale * rotate * pivot * translate; 

Problème est que, alors que le scale * rotate * translate est facile à optimiser (simplifier pour éviter de réelles multiplications matricielles), avec le pivot cela devient plus difficile à optimiser.

Remarque: Vous pouvez également inspirer de this documentation, qui est la documentation Maya API Transform Class, qui fournit une formule de transformation «overkill». J'ai utilisé cela dans le passé pour comprendre comment les transformations fonctionnent.