Discussion :

[lightbulb]

Bonjour à tous,
Je travaille actuellement sur un moteur en webGL permettant de gérer un jeu de type FPS.
Je cherche une technique me permettant de réaliser un impact de balle sur un modèle lorsqu'on lui tire dessus par exemple.

Pour un objet solide sujet aux tile map (comme un mur) il suffit de récupérer le point d'impact et de superposer un polygone avec une alpha et ça marche très bien ! Mais lorsqu'il s'agit d'un modèle animé qui est sujet aux déformations placer un polygone au point d'impact est une solution difficilement maintenable.

J'ai donc pensé a une solution que je vous ai résumé sur l'image ci-dessous :



1 - On récupère le point d'impact.
2 - On transpose ce point d'impact en coordonnées UV.
3 - On crée une texture full alpha
4 - On merge l'impact de balle sur la texture centré sur la coordonnée UV.
5 - Lors du rendu => multi-texturing pour obtenir l'impact.

Je trouve le principe simple mais je butte sur les étapes 3 et 4. Comment faire pour créer un texture alpha et comment faire pour lui merger une image par dessus aux bonnes coordonnées UV?

Si jamais vous avez des infos n'hésitez pas !

Merci

[p3ga5e]

Pour les étapes 3 et 4 tu peux créer et manipuler facilement une image en utilisant le context 2D d’un canvas , qui peut être envoyé en VRAM tel quel via la signature WebGL de texImage2D :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

void texImage2D(GLenum target, GLint level, GLenum internalformat, GLenum format, GLenum type, HTMLCanvasElement canvas)

Toutefois ta solution, semble très très coûteuse. A mon avis tous doit pouvoir se faire sur le pipeline de rendu, comme par exemple définir la trajectoire de ton tire par un uniform sous la forme d’une équation de droite et faire tes 5 étape sur le GPU, probablement dans ton pixel shader.

Cette discussion mériterait d’être déplacée dans le forum 2D-3D, afin de bénéficier de plus de retour …

[lightbulb]

Je ne savais pas réellement ou placer ce sujet, comme j'utilise le webGL je l'ai mise ici.

En réalité récupérer la position de l'impact est déjà faite par tracé de rayon et détermination du point d'impact plan/rayon. c'est une opération mathématique légère. (cf. théorème de graam-shmidt + barycentre) Je m'en sert déjà pour le picking et la contrainte au sol.

Après benchmark déterminer les collisions sur 950faces avec cet algo prend moins d'une milliseconde sur un portable datant de 5ans et ce en javascript en respectant toutes les contraintes d'optimisation du V8 de chrome.

Pour le multi-texturing, c'est réalisé au niveau du fragment shader effectivement car le moteur gère déjà les specular map, normal map et transparency map. La technique ne pose aucun problème.

Le véritable problème est réellement de blender plusieurs textures pour former une texture finale qui sera multi-texturé sur la diffuse pour donner l'effet d'impact souhaité...

Ca se rapproche du texture painting je pense, j'ai trouvé une démo qui se rapproche ou on peut peindre de la couleur sur une texture :
http://www.spacegoo.com/tiananmen/

Bien sur le petit malin a mignifié et obfusqué son code rendant l’interprétation impossible mais le principe est la sauf que dans mon cas j'utiliserai des textures pour peindre...

[p3ga5e]

Pour le multi-texturing, c'est réalisé au niveau du fragment shader effectivement car le moteur gère déjà les specular map, normal map et transparency map. La technique ne pose aucun problème.

Toutes ces techniques de multi-texturing c’est toi qui les as écrites ? ou bien tu utilise un moteur 3D déjà tous fait ?

Le véritable problème est réellement de blender plusieurs textures pour former une texture finale qui sera multi-texturé sur la diffuse

Ben n’y a rien de plus simple : fonction mix

[lightbulb]

J'écris mon propre moteur 3D webGL à partir de 0 en respectant au maximum les bonnes pratiques d'optimisation du moteur d'interprétation javascript V8 entre autre.

Par contre pour l'architecture je me suis inspiré de la librairie TDL de google et pour les maths la librairie de Brandon Jones et Colin MacKenzie IV : gl-matrix, pour les opérations matricielles et vectorielles de base.

Pour tout le reste je dors avec des bouquins de 3D et de mathématiques pour la 3D. Mais ça ne résout pas tout ! :p

La fonction mix permet d'interpoller linéairement, quand on regarde ce fragment shader tout simple tiré du lien que tu viens de me donner :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
                float t = (cos(time)+1.0)/2.0;
		vec4 frontPixel= texture2D(image1, p);
		vec4 backPixel = texture2D(image2, p);
		gl_FragColor = mix(backPixel,frontPixel,t);

On interpole front et back en fonction du temps(t) ce qui donne ici un effet de fondu. En interne ca revient tout simplement à multiplier front et back en faisant varier les alphas de l'un et de l'autre, ça ne résout pas mon problème.

Je souhaite obtenir une nouvelle texture définitive comme quand on fait "aplatir les calques" sous photoshop dont je puisse me servir en multiplication sur la diffuse.

Je viens de penser à une solution avec ce que tu m'as donné mais je ne suis pas convaincu de son optimisation :

1 - Point d'impact => transformation vers UV coord
2 - Envoi de ces coordonnées, de l'image d'impact dans un shader dédié qui va sortir la texture dans un nouveau framebuffer.
3 - On utilise la texture en sortie du framebuffer en multi texture dans le shader principal.

Théoriquement c'est juste mais de manière pratique j'ai quelques réserves du point de vu optimisation.

Inconvénients :
Utiliser un useProgram en phase de rendu est ce que je cherche à éviter au maximum car ça demande de réupload toutes les informations du shader vers la carte graphique et c'est un ralentissement non négligeable. Si le joueur se fait mitrailler on va générer plusieurs dizaines d'impacts rapprochés si on souhaite afficher tous les impacts. Ouch !

Avantages :
Une fois la texture dans le shader principal aucun traitement supplémentaire n'est nécessaire.

Merci de m'avoir ouvert l'esprit sur ça mais si une solution plus courante et moins gourmande vous vient à l'esprit, n'hésitez pas à en parler !

[p3ga5e]

A mon avis:

• Le temps d’upload d’un program doit être très certainement inferieur à celle d’une texture
• L’upload du programme doit se faire lors des compileShader plutôt que dans useProgram.

Ensuite pourquoi vouloir a tous pris générer une texture ?

1. Envois le point d’impact dans un uniform de type vec3
2. projette le dans le vertex shader dans un varying vec2 ... bon ce point ne varie pas pour chaque sommet mais puisque ce calcule s’effectue sur GPU cela n’est pas grave
3. Dans ton pixel shader calcul les cordonnée UV a partir de ce point point d’impact projeté et les coordonnées du pixel en cours de rasterisation (gl_FragCoord.xy)