Extract -webkit-transform matrix3d ​​values ​​

Question

Sto provando a eseguire il rendering di forme 3D utilizzando <canvas> (contesto 2D), il che significa che devo eseguire alcune trasformazioni proiettive manuali.

Mi sarebbe molto utile poter recuperare i valori della matrice di trasformazione 3D dal CSS.

Questo può essere fatto?

In caso contrario, come è possibile costruire la trasformazione eseguita da -webkit-perspective-origin? Ho calcolato la trasformazione solo per la sola prospettiva, ma quella ha l'origine della prospettiva in x = y = 0, che non è sempre il caso.

Mi rendo conto che questo caso specifico (prospettiva con origine ad un certo punto x, y, z) può rivelarsi una semplice traduzione x, y, z seguita immediatamente dalla trasformazione prospettica (o viceversa) ma la risposta ideale sarebbe un metodo per estrarre la matrice 3D 4x4 effettiva. Se ho la matrice, non devo più rintracciare i passaggi che ho fatto per trasformare i miei elementi CSS3 per applicare le stesse trasformazioni alla geometria che intendo renderizzare usando <canvas>.

Ho cercato qui (http://www.w3.org/TR/css3-3d-transforms/) come riferimento, ma non sembra che descrivano i valori effettivi assegnati alla matrice quando si applicano le diverse possibili trasformazioni. Penso che ci dovrebbe essere qualche scheda tecnica là fuori che va in dettaglio. Mi sembra di ricordare di averne intravisto (definizioni di matrice con molte funzioni trigonometriche) da qualche parte.

Modifica: ho trovato una panoramica più approfondita dei passaggi eseguiti dal browser per eseguire le trasformazioni here. Non risponde alla mia domanda ma mi avvicina di un passo al mio obiettivo temporaneo.

Answer 1

La matrice di trasformazione di un elemento può essere recuperata tramite getComputedStyle. Ecco un esempio: http://jsfiddle.net/Kxxwu/

Un altro modo sarebbe utilizzare l'interfaccia WebKitCSSMatrix. La sua molto utile, fornisce un oggetto con i valori della matrice e anche alcuni metodi: http://developer.apple.com/library/safari/#documentation/AudioVideo/Reference/WebKitCSSMatrixClassReference/WebKitCSSMatrix/WebKitCSSMatrix.html

La parte negativa è che WebKitCSSMatrix non è implementata in altri browser ...

Vorrei vedere come si sta implementando 3d trasformare in tela. Un buon posto da sbirciare sarebbe three.js. L'hanno fatto e puoi vedere le varie funzioni della matrice lì.

Buona fortuna!