require("../global.php");
entete();
?>
Texte original par Feymour/Japotek, paru dans Hugi 15
Traduction par Allergy/Idle
Bienvenue dans ce tutorial sur CommentFaireUnBlurRadialEnTempsRéelDansVotreDemo !
Entrons immédiatement dans le vif du sujet:
Nous avons un 'écran' (un tableau de pixels). Commencons par le diviser en quatre secteurs:
+---------------+----------+ | | | | A | B | | | | | | | +---------------*----------+ | | | | C | D | | | | +---------------+----------+ * = le centre du blur radial
Les lignes divisent l'écran en quatre parties. Nous allons nous occuper de chacune d'elles (l'ordre n'a pas d'importance). Voici la manière de procéder :
. . : : | | |ABCDEFGHIJKLMNOPQRSTUVW... | - - --*-------------------------------------------------------+ | | : : A étant le premier pixel à traiter
Pour chaque pixel, il faut calculer un vecteur qui pointe vers le centre du blur (*).
Pour le pixel A, on voit bien ici que ce vecteur vaudra V(-1,-1). Ensuite, il faut échelonner
ce vecteur (une longueur de 1 à 5 est une bonne idée). Des longueurs différentes donneront
des résultats et intensités différentes pour le blur.
Ensuite, on prend le pixel P, qui se trouve à la position pointée par le vecteur qu'on aurait
appliqué à A. Par exemple, on prendrendra P(A.x+V.x, A.y+V.y).
Ensuite, on va mixer la valeur de P avec celle de A : A = (A+P)/2 et mettre cette
valeur dans A. ATTENTION ! J'ai bien dit "dans A" ! Source = destination. On travaille toujours
dans le même buffer, sinon, la méthode ne marche pas.
Pour le pixel B, on aura V(-2,-1) avant la remise à l'échelle. On calcule les coordonnées du pixel P1 (grace à la remise à l'échelle, si vous avez suivi), qu'on mixe avec B. Comme la valeur de A vient d'être calculée, elle peut être utilisée si nécessaire.
. . : : | | |ABCDEFGHIJKLMNOPQRSTUVW... | |#######################################################| - - --*-------------------------------------------------------+ | | : : les # ont déjà été calculés
Et on fait pareil avec cette ligne: trouver V qui pointe vers *, le mettre à l'échelle, faire la moyenne des deux valeurs. Comme la ligne en dessous a déjà été calculée, il est possible d'utiliser les valeurs qu'elle contient.
C'est à peu près tout. Bien sûr, il est possible de faire un *PAQUET* d'optimisations esthétiques (pensez à du filtrage bilinéaire etc.). Vous devez aussi savoir comment faire un vecteur, le multiplier par un scalaire, et comment calculer une moyenne. Mais je ne vais pas expliquer ça ici. Si vous avez des question, vous pouvez m'envoyer un mail.
A+
- Feymour/JapoTek aka Simone Ghiaroni
PS : Ce document ne décrit qu'une manière plus ou moins mathématique d'arriver à ce résultat. Lors de l'implémentation, vous pouvez faire des approximations pour accélérer le code.
JapoTek's site: http://www.cis.it/japotek (mort)
Feymour's page: http://members.xoom.com/feymour
PiedDePage(); ?>