Discussion :

[Darkyl]

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++.

[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 ?

[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?

[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...

[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 ?

[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 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...

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.

[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

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 !

[Darkyl]

p3ga5e :
Là, je suis en train de reproduire la physique de l'eau (enfin j'essaye ) 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

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