Fonction qui déforme une image selon les 4 points du quadrangle

Version imprimable

Voir 40 message(s) de cette discussion en une page

05/06/2012, 17h29
Darkyl

Fonction qui déforme une image selon les 4 points du quadrangle

Bonjour,

Je recherche partout, en vain, une fonction (ou une API) javascript qui déforme une image selon les 4 points de ces côtés... J'ai essayé de la faire toute la nuit mais je suis juste arrivé à stretché une image si les lignes point1->point2 et point3->point4 sont parralèles... Hors dans mon moteur, elles ne sont pas parralèles.

Je ne veux pas utilisé le webGL, mais j'utilise canvas par contre. Le but pour moi est d'habiller une map que je dessine avec des lineto. Chaque case est définie par 4 points (qui peut être de n'importe quelle forme). Aussi il me faudra une fonction qui me renvoit (ou me dessine directement selon ces 4 points) une image stretché...

J'ai trouvé des fonctions mais dans des langages de PC... tel pascal ou c++.
05/06/2012, 21h18
p3ga5e

Salut !

Pourquoi exclure WebGL ? si c’est un problème compatibilité entre navigateur, il existe de nombreux plugins permettant d’y remédier ( unity , flash player 11 , … et bien d’autres )

Persister à rastériser tes quadrilatères texturés en JavaScript avec l’api Canvas 2D context me semble aberrant … les cartes graphiques depuis les années 90 ont été développés pour répondre a ton type de problème, l’api GL est développé depuis plus de 20 ans pour répondre a ton type de problème … pourquoi refuser ses technologies ?
05/06/2012, 21h23
Darkyl

ben, le truc c'est que j'ai pas trouvé un bon tuto en webGL, j'ai firefox 12 mais il est pas compatible, alors ça m'a vite refroidi. En plus, j'en ai besoin que pour cela, alors je me suis dis que je pourrais faire sans.
Mais tu as raison, tu sais où je peux trouver un bon tuto?
06/06/2012, 10h03
MaitreKaio

L'API Canvas 2d est limitée par le fait que tu appliques une matrice de transformation à ton opération. Ce qui veut dire que si tu es en train de dessiner une image sur le canevas et que tu veut déformer cette image, c'est possible mais il y aura une relation mathématique entre les différents points. Le mieux que tu puisses obtenir en fait, c'est un parallélogramme.
Hors toi tu veux que tes 4 points soient complètement indépendants. A ma connaissance, ce n'est pas possible avec l'API 2d, donc effectivement, tente ta chance du côté WebGL, mais là je ne connais pas du tout...
06/06/2012, 11h59
p3ga5e

Pour ta version de firefox, il te faut peut-être activer WebGL en modifiant les préférences par about:config

Je sais pas si il existe un tuto WebGL meilleur qu’un autre, Souvent ces tutos se focalise sur une fonctionnalité de l’API, cela ne permet pas d’apprendre vraiment les concepts généraux sur la programmation d’un pipeline graphique. Perso j’aime bien les tutoriaux du site Nvidia, par exemple le début du chapitre 1 décrit ces concepts généraux ! Ne connaissant pas d’équivalant en WebGL / HLSL , je te conseil de suivre au moins les 3 1ers .

Tu mentionne, dans le titre de cette discussion, que tes quadrilatères sont des quadrangles, cela éveil ma curiosité, c’est une propriété peut commune cela résulte-il d’une projection ? dans quel contexte travaille tu ?
06/06/2012, 12h31
Darkyl

Merci de vos réponses

p3ga5e : heu je crois que je me suis un peut avancer sur 'quadrangle', en faite je ne sais pas ce que cela veux dire :aie: mais j'ai vu un topic sur un autre site où la personne voulais faire exactement ce que je veux et l'avais appelé comme cela...:lol:

Sinon si tu veux voir : lien moteur graphique

Pour le site de nvidia, j'irai voir, merci. Je me suis jamais mis à la 3d par manque de courage et de bon tuto (dans n'importe quel techno ou/et langage d'ailleurs).

Merci de vos réponse.

En fait, ce topic rejoins celui là topic.
06/06/2012, 17h40
p3ga5e

Du courage ! tu n’as pas dû en manquer pour écrire un moteur 3D isométrique ! La prochaine étape serrat-elle l’écriture d’un moteur de Ray-casting ? Ainsi tu couvriras l’évolution des différentes techniques de rendu 3D temps réel des années 80 à nos jours :mrgreen:

N’hésite pas à sauter le pas pour la 3D, apprendre des techniques obsolètes n’est pas forcement inutile, mais ne perd pas de vue les techniques actuel (3D projeté) ou les éventuel techniques futures (peut être un moteur de Raytracing temps réel avec les technique de programmation // comme openCL ou l’extension River Trail )

Si ton but est d’étudier les techniques de génération de terrain je te conseil la technique Texture Splatting , très simple a mettre en œuvre elle permet d’obtenir un résultat saisissant !
06/06/2012, 20h25
Darkyl

p3ga5e :
Là, je suis en train de reproduire la physique de l'eau (enfin j'essaye :aie:) et c'est pas du tout évident...(Je dis bien la physique, genre on déclare qu'il y a tant de quantité d'eau sur une case et l'eau remplis les cases qu'elle devrait remplir en vrai). J'aurais du suivre en physique math au lycée :calim2:

Sinon, j'ai passé deux heures sur les liens que tu m'as donnée, j'ai suivi les tutos, et je ne suis même pas arrivé à afficher un canard en webgl donc j'abandonne la 3d aussi vite que je m'y suis mis...Trop compliqué pour quelqu'un qui bosse seul. J'espère bosser un jour avec quelqu'un qui s'y connait en 3d...

Mais merci beaucoup pour tous les tutos et liens que tu m'as donné. Quand j'aurais le temps, je m'y mettrais serieusement.

Au fait, j'ai découvert le jeu drakensang, quelqu'un sait avec quelle techno il est codé? (webgl je suppose...).
Impressionnant le jeu. A mon avis, c'est pas un projet amateur :P
07/06/2012, 10h27
Invité

slt,

pour revenir a la question.
Est-ce qu'il s'agit de trouver une transfo du style
soient les 4 points de limage a,b,c,d
soient les 4 points desires r,s,t,u
de trouver une fonction f telle que
f:a->r
f:b->s
f:c->t
f:d->u

parce que si cest le cas une transfo homographique fera l'affaire
07/06/2012, 11h45
Darkyl

Heu, je sais pas si j'i tout compris.
Mon but est:
j'ai 4 points à l'écran : (par sex, point1.x=100;point1.y=100;...;point4.x=200,point4.x=200)
Ces 4 points sont variables et il n'y a pas de logique entre eux. Pas de parallèle ou de perpendiculaire. En fait, cela forme un quadrilatère quelconque et je veux y mettre une texture dedans. Une texture étant représenté par une image (qui est carré), je cherche une fonction qui me lit cette image et me la déforme dans le quadrilatère.

Cela m'embête de sortir l'artillerie lourde (webgl) pour utilisé juste cette fonction, donc je la recherche en 2d simple...
07/06/2012, 13h44
SpaceFrog

http://stackoverflow.com/questions/4...g-html5-canvas

Merci merci merci :lol:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
function textureMap(ctx, texture, pts) {
    var tris = [[0, 1, 2], [2, 3, 0]]; // Split in two triangles
    for (var t=0; t<2; t++) {
        var pp = tris[t];
        var x0 = pts[pp[0]].x, x1 = pts[pp[1]].x, x2 = pts[pp[2]].x;
        var y0 = pts[pp[0]].y, y1 = pts[pp[1]].y, y2 = pts[pp[2]].y;
        var u0 = pts[pp[0]].u, u1 = pts[pp[1]].u, u2 = pts[pp[2]].u;
        var v0 = pts[pp[0]].v, v1 = pts[pp[1]].v, v2 = pts[pp[2]].v;
 
        // Set clipping area so that only pixels inside the triangle will
        // be affected by the image drawing operation
        ctx.save(); ctx.beginPath(); ctx.moveTo(x0, y0); ctx.lineTo(x1, y1);
        ctx.lineTo(x2, y2); ctx.closePath(); ctx.clip();
 
        // Compute matrix transform
        var delta = u0*v1 + v0*u2 + u1*v2 - v1*u2 - v0*u1 - u0*v2;
        var delta_a = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2;
        var delta_b = u0*x1 + x0*u2 + u1*x2 - x1*u2 - x0*u1 - u0*x2;
        var delta_c = u0*v1*x2 + v0*x1*u2 + x0*u1*v2 - x0*v1*u2
                      - v0*u1*x2 - u0*x1*v2;
        var delta_d = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2;
        var delta_e = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2;
        var delta_f = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2
                      - v0*u1*y2 - u0*y1*v2;
 
        // Draw the transformed image
        ctx.transform(delta_a/delta, delta_d/delta,
                      delta_b/delta, delta_e/delta,
                      delta_c/delta, delta_f/delta);
        ctx.drawImage(texture, 0, 0);
        ctx.restore();
    }
}

Je vais voir si cette fonction marche, si c'est le cas, c'est merveilleux...

07/06/2012, 15h33
Darkyl

Bon cette fonction marche bien. Voilà le résultat...
test

Mais je crois que je vais faire une reconnaissance de frome plane et ainsi réduire le nombre de quadrangle à l'écran, ainsi je pourrai gérer les ombres.

Mais encore deux questions:

Le traitement et l'affichage est assez long (5-6sc), comment empécher firefox de croire que le script bug?
Puis pouvez le tester sous chrome, moi il affiche les texture une fois sur 4...
Donc je comprend pas trop.

Merci.

Sinon merci SpaceFrog pour les liens, j'ai trouvé en plus des biblio sympa.
07/06/2012, 15h44
SpaceFrog

a part splitter le traiement ... en modifiant l'affichage par bouts (zones) au fur et a mesure ?
07/06/2012, 16h08
Invité

Citation:

Le traitement et l'affichage est assez long (5-6sc), comment empécher firefox de croire que le script bug?

normalement cest denote par un freeze de l'IHM.
Si tu utilises des workers, ca devrait aller mieux.
07/06/2012, 16h16
Darkyl

Citation:

a part splitter le traiement ... en modifiant l'affichage par bouts (zones) au fur et a mesure ?

heu, là j'avoue ne pas comprendre ce que tu dis...:aie: (tu veux dire, en quelque sorte, qu'à chaque modif (ou lot de modif) je fais un petit sleep?)

Citation:

normalement cest denote par un freeze de l'IHM.

heu, là non plus (re :aie:)

Je dois me faire vieux.
Par contre, les workers, je vois ce que c'est (:mrgreen:). Je comptais utiliser les workers pour des taches non modificatrice du dom... hors là, le but de cette fonction est de modifier le dom non? (le dessin du canvas devra être interpréter par le script principale et non le worker , mais c'est cela qui prend du temps... Les calculs et les modif des array sont assez rapide...)

Sinon pour chrome, une idée?

Citation:

normalement cest denote par un freeze de l'IHM.

j'insiste.
Si tu fais du heavy process javascript, alors par exemple, ca commence à ralentir si tu essaies de scroller de taper dans un input, ... (pdt que tu affiches ta map)

Citation:

Citation:
a part splitter le traiement ... en modifiant l'affichage par bouts (zones) au fur et a mesure ?
heu, là j'avoue ne pas comprendre ce que tu dis... (tu veux dire, en quelque sorte, qu'à chaque modif (ou lot de modif) je fais un petit sleep?)

ouais genre dans ta fonction quadriller_map (jcrois que c'est elle), il faut que tu fasses un timeout. Grossomodo comme ca :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 var funcsToDraw = [ function(){}//plot for 0<x<10; 0<y<10, function(){}//plot for 10<x<20; 10<y<20 //etc ]; //funcToDraw is an array of function to call one after the others function drawMap(funcsToDraw){ if(funcsToDraw.length>0){ window.setTimeout(function(){ var drawMe = funcsToDraw.pop(); drawMe();//plot a part of the map drawMap(funcsToDraw); },0); } }
l'idée, c'est tu dessines une zone.
Et une fois que tu l'as dessinée, tu mets un timeout de 0.
Si entre temps t'avais eu des events (genre IHM) ou n'importe quoi d'autre, ils sont traités avant. Et ensuite ya ton event pour le timeout qui execute la suite (donc dessin de la zone suivante), etc...

edit:bien sûr, le sample ci-dessus, le teableau de fonctions c'est qu'un exemple, ya plein d'autres implem mieux pensées probablement. Le but de l'exemple c'est juste d'expliciter comment employer le timeout

10/06/2012, 01h01
Darkyl

galerien69: concernant ta méthode avec le settimeout, je l'ai implémenté et je ne gagne (pour l'instant) rien, voir je suis pls lent (et cela ne marche même pas sur chrome, à moins que cela ne vienne d'autre part...:aie:).

Mais merci de te pencher sur ces questions d'optimisation.

Pour les workers, j'ai essayé de m'en servir, j'ai suivi un tuto, essayé de faire un worker trés simple, et pour l'instant, c'est l'échec... J'arrive à rien..
Mais je me décourage pas.
Sinon pour ceux que le moteur 3d iso intéresse, je poursuis sa construction. Je pense écrire un éditeur complet de map, avec fonction topographique (oua le nom...8-) intégrée et le plus de variables modifiable (taille carte, taille case, angle de vue).

Pour l'instant j'ai encore un soucis avec les textures, mais voila les avancées:
http://s408852608.onlinehome.fr/test...-d-ecran_3.jpg
http://s408852608.onlinehome.fr/test...-d-ecran_4.jpg
http://s408852608.onlinehome.fr/test...-d-ecran_5.jpg

Des suggestions pour améliorer le rendu? Des astuces pour la suite?
10/06/2012, 02h58
Watilin
Ca a de la gueule.

Si je puis ajouter ma pierre à l'édifice... A mon avis, tu essayes de faire faire à Javascript (donc sur le processeur principal) du travail graphique, en calculant chaque quadrilatère un par un. C'est un travail pour lequel les cartes graphiques ont été conçues et optimisées. C'est pourquoi on te suggérait de te mettre à WebGL. Personnellement, je ne connais pas d'autre moyen de rendre ton script vraiment plus efficace... Mais peut-être que je me trompe.

Si tu tiens à rester en 2D, j'avais trouvé il y a quelques temps sur le MDN quelques conseils d'optimisation des scripts, je te fais la traduction ici de ceux qui me semblent utiles pour ton cas :
- Pré-calculer les primitives similaires ou les objets répétitifs sur un canvas non affiché.
  => Si tu arrives à détecter « à l'avance » les objets qui seront identiques, ça pourrait te faire gagner du temps.
- Grouper les appels canvas ensemble (par exemple, utiliser une poly-line au lieu de plusieurs lignes séparées).
  => Je ne sais pas si ça va être évident à appliquer, mais tu pourrais essayer de dessiner une grille ligne par ligne, plutôt que chaque quadrilatère séparément.
- Eviter les coordonnées à virgule flottante, utiliser à la place des entiers.
  => Ca peut paraître évident, mais on ne le sait pas toujours.
- Eviter shadowBlur.
  => A priori tu ne l'utilises pas, donc pas de souci...
11/06/2012, 17h19
Darkyl

Citation:

Ca a de la gueule.

Merci.

Citation:

A mon avis, tu essayes de faire faire à Javascript (donc sur le processeur principal) du travail graphique, en calculant chaque quadrilatère un par un.

C'est exactement cela. Mais là où je me questionne c'est sur la lenteur d'affichage et non de calcul. Je m'explique: calculer les coord de tous les points de la map, ça c'est relativement rapide. C'est faire les lineto + fill (ou stroke) qui prend un temps fou... Donc je comprend pas trop pourquoi l'accés au canvas est si lent que cela.

Citation:

C'est pourquoi on te suggérait de te mettre à WebGL.

J'aimerai bien mais comme déjà préciser , j'y arrive pas. J'ai beau lire des tutos, ça coince toujours quelque part (d'autant qu'il n'y a pas de tuto webgl en français).

Il y a personne pour faire un tuto webgl en français sur developpez.com ? :aie:

Citation:

Si tu tiens à rester en 2D

Je n'y tiens pas particulièrement mais forcer de constaté que j'y suis obligé.

Citation:

Pré-calculer les primitives similaires ou les objets répétitifs sur un canvas non affiché.

Comme dis plus haut, ce n'est pas le calcul qui est lent dans ma méthode, c'est le fait de dessiner sur le canvas.

Citation:

Grouper les appels canvas ensemble (par exemple, utiliser une poly-line au lieu de plusieurs lignes séparées).

Ca par contre, ça peut le faire , mais à terme, il n'y aura plus que des textures (image) drawé et stretché au bonne coord (plus de lineto) donc cette solution peut fonctionner pour mon mode filaire mais pas pour le rendu final.

Citation:

Eviter les coordonnées à virgule flottante, utiliser à la place des entiers.

Je fais déjà un Math.round de tous mes calculs.

Citation:

Eviter shadowBlur.

Je ne sais pas ce que c'est mais s'il faut l'éviter, je ne vais pas chercher alors...:ccool:

Ceci étant dit, j'avoue être un peu perplexe sur la suite à donner. En effet, dans mon moteur graphique, tant que je n'avais pas d'élévation de terrain trés haute, je n'avais pas besoins de jouer sur la priorité d'affichage des cases et des objets présents. Un personnage (par exemple) ne pouvais pas passer derrière une montagne (parce qu'il n'y avait pas de montagne assez haute). Je n'avais donc pas besoin de rafraichir la map.
Mais maintenant que je me permet toutes les fantaisies en terme dénivellé, il me faut actualiser ma carte avec tous les objets présents (perso + batiment), mais là, je n'ai pas le fps suffisant avec ma technique en 2d.
Faudra-t-il que je passe en 3d? je crois bien, et j'en déprime d'avance...

Si quelqu'un sait bien ce servir de webgl et qu'il serait intéressé par partager ces connaissances (d'une part) et écrire un moteur 3d iso ( en gros l'affichage de x*y cases qui ont leurs coord, leurs z et l'image de texture)(mon but est de faire un moteur 3d iso réutilisable sur plusieurs projets différents (la 3d iso n'est qu'un cas prédéfini du moteur global)...
Je suis preneur. Sinon, ben le temps que j'apprenne le webgl :cry:...

En tout cas, merci Watilin de tes conseils et du temps que tu as pris à annalyser ma démarche et à y répondre.

Voir 40 message(s) de cette discussion en une page