Texte original par Feymour/Japotek, paru dans Hugi 15
Traduction par Allergy/Idle

 

Le Blur radial en temps réel

 

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