IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

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


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé
    Avatar de Darkyl
    Homme Profil pro
    autodidacte en recherche d'emploi
    Inscrit en
    Novembre 2004
    Messages
    440
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : autodidacte en recherche d'emploi

    Informations forums :
    Inscription : Novembre 2004
    Messages : 440
    Billets dans le blog
    1
    Par défaut 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++.

  2. #2
    Membre chevronné

    Profil pro
    Inscrit en
    Octobre 2010
    Messages
    311
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2010
    Messages : 311
    Par défaut
    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 ?

  3. #3
    Membre éclairé
    Avatar de Darkyl
    Homme Profil pro
    autodidacte en recherche d'emploi
    Inscrit en
    Novembre 2004
    Messages
    440
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : autodidacte en recherche d'emploi

    Informations forums :
    Inscription : Novembre 2004
    Messages : 440
    Billets dans le blog
    1
    Par défaut
    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?

  4. #4
    Membre expérimenté Avatar de MaitreKaio
    Profil pro
    Freelance Java / Web / Mobile
    Inscrit en
    Juin 2007
    Messages
    140
    Détails du profil
    Informations personnelles :
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Freelance Java / Web / Mobile
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Juin 2007
    Messages : 140
    Par défaut
    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...

  5. #5
    Membre chevronné

    Profil pro
    Inscrit en
    Octobre 2010
    Messages
    311
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2010
    Messages : 311
    Par défaut
    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 ?

  6. #6
    Membre éclairé
    Avatar de Darkyl
    Homme Profil pro
    autodidacte en recherche d'emploi
    Inscrit en
    Novembre 2004
    Messages
    440
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : autodidacte en recherche d'emploi

    Informations forums :
    Inscription : Novembre 2004
    Messages : 440
    Billets dans le blog
    1
    Par défaut
    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.

  7. #7
    Membre chevronné

    Profil pro
    Inscrit en
    Octobre 2010
    Messages
    311
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2010
    Messages : 311
    Par défaut
    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 !

  8. #8
    Membre éclairé
    Avatar de Darkyl
    Homme Profil pro
    autodidacte en recherche d'emploi
    Inscrit en
    Novembre 2004
    Messages
    440
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : autodidacte en recherche d'emploi

    Informations forums :
    Inscription : Novembre 2004
    Messages : 440
    Billets dans le blog
    1
    Par défaut
    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

Discussions similaires

  1. Réponses: 1
    Dernier message: 15/02/2011, 23h32
  2. [MySQL] probleme avec une fonction qui retaille mes images
    Par mademoizel dans le forum PHP & Base de données
    Réponses: 7
    Dernier message: 01/02/2011, 21h26
  3. [ImageMagick] Fonction qui redimensionne une image
    Par gregal dans le forum Bibliothèques et frameworks
    Réponses: 1
    Dernier message: 30/11/2006, 14h30
  4. Fonction qui séléctionne une partie d'image
    Par meera dans le forum Visual C++
    Réponses: 10
    Dernier message: 07/11/2006, 17h25
  5. Réponses: 13
    Dernier message: 09/07/2006, 15h53

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo