Journal Open Earth View

Posté par  . Licence CC By‑SA.
Étiquettes :
30
9
mai
2016

Salut à tous,

Environ un an après mon dernier journal sur le sujet, voici juste une petite démo de mon dernier système de navigation cartographique web 3D: http://www.openearthview.net (C'est pas du https actuellement, désolé).

Il s'agit ni plus ni moins que des tuiles de types Open Street Map mises dans une scène 3D, avec prise en compte de la distance entre caméra et plan au sol pour le choix des niveau de zoom des tuiles. D'un point de vue algorithmique, rien de très avancé, mais le résultat me parraît assez intéressant à observer pour en faire un journal. J'ai volontairement laissé apparaître les bordures des tuiles pour que l'on puisse observer ce qu'il se passe.

Coté technoe, j'ai abandonné le format X3D et la lib js x3dom pour passer à three.js, beaucoup plus facile à manipuler pour des besoins particuliers. Malheureusement, au change, j'ai perdu un système pour pouvoir charger des objets 3D générés "simplement" (cube, parallèlépipède, sphère, cone, etc).

Vos retours sur le système de navigation sont les bienvenus.

Prochaines étapes:
* prise en compte des infos de bâtiment pour un rendu 3D.
* prise en compte des élévations de terrain.

Bien à vous!

  • # localhost

    Posté par  (site web personnel) . Évalué à 3.

    Bonjour,

    C’est surprenant les appels à localhost. C’est d’ailleurs bloqué par défaut chez moi.

    Autrement, les dalles s’affichent avec parfois un scintillement
    (Debian 8, Iceweasel)

  • # navigation?

    Posté par  . Évalué à 4.

    Je visite avec un smartphone:
    Pas trouvé comment on navigue!
    Je ne peux que faire des rotations et des zooms.

    • [^] # Re: navigation?

      Posté par  (site web personnel) . Évalué à 2.

      1 doigt pour la rotation
      2 doigts pour le zoom
      et …
      3 doigts pour la translation

      • [^] # Re: navigation?

        Posté par  . Évalué à 2.

        Bien vu, je ne savais même pas que ça pouvait fonctionner sur smartphone! ;-)

  • # Commandes

    Posté par  . Évalué à 4.

    Salut,

    Un petit retour sur les commandes, avec l'habitude pour e déplacer j'ai fait un clic gauche et j'ai bouger la souris, alors que sur ton site cela fonctionne avec le clic droit et non le gauche.

    Je sais pas pour les autres mais j'ai toujours eu l'habitude de faire comme ça sur n'importe quelle map. Peut-être serait-il intéressant de reprendre les "standards" niveau commandes de déplacement ?

    • [^] # Re: Commandes

      Posté par  . Évalué à 5.

      OK, boutons droite et gauche maintenant inversés !

      • [^] # Re: Commandes

        Posté par  . Évalué à 3.

        C'est parfait comme ça.
        [JeuDeMot]
        Me voila moins déboussolé :D
        [/JeuDeMot]

      • [^] # Re: Commandes

        Posté par  (site web personnel) . Évalué à 2.

        Impec, je trouve aussi ça mieux comme ça.

        Un truc que je trouve aussi sympa sur d'autres site :
        - lors d'un double clic gauche, ça centre la carte sur le point du clic et zoom (permet de zoomer facilement en double cliquant plusieurs fois à la suite)
        - lors d'un double clic droit, ça dé-zoom.

        Peut être as tu prévu une autre utilisation des double clic ?

        S'il y a un problème, il y a une solution; s'il n'y a pas de solution, c'est qu'il n'y a pas de problème.

  • # Erreurs Javascript

    Posté par  . Évalué à 2.

    Avec Firefox 35 rien ne s'affiche et j'ai des erreurs Javascript :

    THREE.WebGLRenderer: Error creating WebGL context.
THREE.WebGLRenderer()three.js (line 24997)
www.openearthview.net()www.ope...iew.net (line 75)
console.error( 'THREE.WebGLRenderer: ' + error );
three.js (line 24997)

TypeError: gl is null
extension = gl.getExtension( 'WEBGL_depth_texture' ) || gl.getExtension( 'MOZ_WE...

    • [^] # Re: Erreurs Javascript

      Posté par  . Évalué à 3. Dernière modification le 09 mai 2016 à 09:49.

      Avec la version 45.0.2 j'ai les mêmes erreurs

      PS : Je viens d'avoir la mise à jour vers la version 46.0.1 et je n'ai plus ces erreur. Ça fonctionne modulo les appel au localhost.

  • # ciel

    Posté par  . Évalué à 3.

    Sympa, un petit dégradé de bleu à la place du fond noir pourrait rendre encore plus sympathique le truc.

    • [^] # Re: ciel

      Posté par  . Évalué à 1.

      OK, je prends en compte, je fais ça dans la semaine…
      Merci pour l'idée!

  • # Et c'est libre ?

    Posté par  . Évalué à 1.

    Ben pas vu de licence ..
    pas vu de wiki associé..

    T.

    • [^] # Re: Et c'est libre ?

      Posté par  . Évalué à 2.

      Oui, c'est pas écrit, bien vu.

      Objectif: LGPL v3.
      Pourquoi: je souhaite mettre à dispo le code pour tous et pouvoir empécher de fermer son accès.
      Qu'en pensez-vous? Est-ce une licence adaptée pour du code web (client et serveur)?
      Sachant que three.js est sous licence MIT et que j'ai repris un peu de leur code (de manière isolée), j'imagine que je ne peux que partiellement mettre mon code sous LGPLv3…

      Le code source est dispo et mis à jour sur framagit: https://git.framasoft.org/pizaninja/OpenEarthView/tree/master

      Une présentation du projet (à mettre à jour d'ailleur): http://wiki.openstreetmap.org/wiki/Open_Earth_View

      • [^] # Re: Et c'est libre ?

        Posté par  (site web personnel) . Évalué à 4.

        je souhaite mettre à dispo le code pour tous et pouvoir empécher de fermer son accès. (…) Est-ce une licence adaptée pour du code web (client et serveur)?

        Non, ça ne fera pas ton but. de la même manière que Google cache des modifications faites à Linux sur leurs serveurs.
        Il faudrait AGPL, faute de ALGPL, mais du coup tu forces toute l'appli à être compatible AGPL ce qui n'est pas forcément ton but. Bref, difficile pour toi.

        Sachant que three.js est sous licence MIT et que j'ai repris un peu de leur code (de manière isolée), j'imagine que je ne peux que partiellement mettre mon code sous LGPLv3…

        Tu peux mettre TOUT ton code sous licence que tu veux. après il faut voir le livrable, quelle licence il a.
        Chance que tu as, MIT permet le relicensing, donc pour pas d’embêter tu peux relicensier three.js en license que tu veux, par exemple la même que celle que tu choisis (en d'autres mots : tu peux diffuser le tout en LGPL v3 si tu as envie)

        Après, le copyleft peut t'apporter plus d'emmerdes (compatibilité) sans apporter ce que tu veux (pas de ALGPL pour ce que tu veux faire donc obligé de "forcer" la compatibilité AGPL pour tout), tu peux aussi simplement utiliser le choix de la lib que tu as adapté, soit MIT. Regarde ce que tu gagnes vraiment à tenter de limiter la fermeture de ton code, et aussi demande-toi pourquoi three.js est sous licence MIT.

      • [^] # Re: Et c'est libre ?

        Posté par  . Évalué à 4.

        je souhaite mettre à dispo le code pour tous et pouvoir empécher de fermer son accès.

        Bah, pourquoi embêter avec les contraintes de la LPGLv3 ?

        Après, tout dépend de ce que tu penses en faire, si tu as un business model derrière ou juste du "fun".
        Mais ce genre de miniprojet a tout à gagner à s'ouvrir le plus possible.

        Considérer BSD, MIT, APACHE peut donc aussi être une option.

  • # Très sympa !

    Posté par  . Évalué à 2.

    J'aime beaucoup.
    Perso, je vois deux points d'amélioration :
    - intégrer une gestion des déplacements de type « navigation », c'est-à-dire telle qu'on la verrait en marchant ou en roulant, un peu similaire à ce que proposent les GPS qui gèrent une vue « 3D » ; en pratique, ça veut principalement dire que les déplacements puissent être dépendants du relief présent à la verticale du point plutôt qu'absolus (mmm suis-je clair ??)
    - il arrive que l'affichage des tuiles ne soit pas homogène, on a alors une tuile à un niveau de zoom, et la tuile voisine à un autre niveau, ce qui entraîne une rupture un peu gênante visuellement ; je pense qu'il s'agit d'un réglage de l'angle de vue ou truc du genre pour limiter la bande passante ou le cache des tuiles, il faudrait agrandir un peu cela si possible
    - un petit troisième, pour la route : je ne connais pas ton objectif, mais il pourrait être intéressant de mettre en argument la position de la « caméra », pour pouvoir partager une vue précise sur la carte ; ça pourrait être pratique pour le déboguage, notamment, par exemple j'aurais pu te donner une url montrant précisément un exemple de ce que je décris au point 2 ;) mais il y a plein d'autres applications possibles
    Bonne continuation !

    • [^] # Re: Très sympa !

      Posté par  . Évalué à 2.

      Merci beaucoup, j'apprécie beaucoup ce type de retour.

      Point numéro 1: je ne suis clairement pas très doué pour le tuning de la navigation. J'ai un autre objectif (ambitieux vu mon niveau en dev 3D): rendre le terre ronde et non plate ;-)

      Pour le point numéro 2: niveau de zoom choisi pour les tuiles, j'ai fait plusieurs essais et celui mis en oeuvre actuellement est un compromis entre niveau de détails acceptable et optimisatin pour charger les moins de tuiles possibles. Malgrè tout, rien n'est fixé.

      Je vais mettre en oeuvre le point numéro 3 (coordonnées GPS dans l'url) rapidement, je sais déjà exactement comment (avec mise à jour dynamique de l'url dans la barre d'adresse si souhaité).

      • [^] # Re: Très sympa !

        Posté par  . Évalué à 2.

        Point numéro 1: je ne suis clairement pas très doué pour le tuning de la navigation. J'ai un autre objectif (ambitieux vu mon niveau en dev 3D): rendre le terre ronde et non plate ;-)

        Tu rigoles, mais en fonction de la projection utilisée, c'est pas forcément trivial d'appliquer les textures sur du 3D.

        D'ailleurs, si quelqu'un sait si les cartes numériques utilisent une quelconque projection ou font de la "vraie" cartographie, ça m'intéresse :)

        Linuxfr, le portail francais du logiciel libre et du neo nazisme.

        • [^] # Re: Très sympa !

          Posté par  . Évalué à 4.

          D'ailleurs, si quelqu'un sait si les cartes numériques utilisent une quelconque projection ou font de la "vraie" cartographie, ça m'intéresse :)

          https://en.wikipedia.org/wiki/Web_Mercator

          Après, tout le monde est libre de présenter ses données dans la projection qui va bien. Mais les tuiles "courantes" utilisent généralement cette "projection"-là.

    • [^] # Re: Très sympa !

      Posté par  . Évalué à 1.

      • Point numéro 1: vue sur globe faite.
      • Point numéro 2: je n'ai rien à proposer. Mon objetif est la visualisation de batiment, avec vue intérieure. Donc, je ne vais pas m'orienter vers une vue générale d'une grande ville.
      • Point numéro 3: pris en compte ici

  • # Simple et efficace

    Posté par  (site web personnel) . Évalué à 4.

    mais le résultat me paraît assez intéressant à observer pour en faire un journal

    Tout à fait d'accord avec toi, c'est réactif et fonctionnel, bravo.

    Peut être une petite boussole dans un coin afin de ne pas perdre le nord ;-)

    kentoc'h mervel eget bezan saotred

  • # Encore plus en 3D ?

    Posté par  . Évalué à 3.

    Je suppose que ça serait encore plus difficile de le mettre en relief comme avec OSM2World ou OSMbuildings ?

  • # bientot le mapping sur une carte avec les reliefs ?

    Posté par  . Évalué à 4.

    et avec ca tu obtiendrais un remplacant à google earth ;)

  • # Pas mal du tout

    Posté par  . Évalué à 1.

    J'avais suivi ton précédent journal à ce sujet - si c'est bien toi dont je me souviens - et le progrès en termes d'utilisabilité (quel vilain mot!) est époustouflant. J'ai quand même quelques remarques ou questions.

    1) ton LOD marche assez bien, mais c'est un peu dommage de masquer les tuiles existantes le temps de télécharger leurs remplaçantes plus/moins détaillées. Du coup, la navigation devient un peu ardue quand on scrolle avec un biais : plein d'endroits visibles passent au noir, et on a l'impression d'avoir fait une connerie (ou que ton scroll foire et nous a emporté au mauvais endroit, alors que pas du tout).

    2) pour tes bâtiments, tu as quoi en tête, sans indiscrétion? Déformation (ex-)professionnelle, mais si je dois modéliser des trucs j'aime autant le faire directement dans le bon format :)

    3) ce n'est pas forcément le plus véloce - mais ça peut peut-être se superposer à un Three.js existant - mais as-tu vu passer aframe.io? Scènes 3D déclaratives avec plein de choses sympathiques dessus (WebVR "gratuit", support des formats de fichiers usuels, et j'en passe), plutôt facile à générer côté serveur.

    • [^] # Re: Pas mal du tout

      Posté par  . Évalué à 1.

      • pour les "tuiles noires", je dois pouvoir faire quelques améliorations pour un rendu plus fluide (éviter d'attendre le chargement d'un paquet de tuiles avant affichage).
      • pour les bâtiments, ça consiste principalement à faire des opérations d'extrusion verticale de contours de bâtiments, réalisées côté serveur, et à transmettre les données aux clients web. Formats supportés: geojson, x3djson, X3D. Pour fonctionner avec three.js, j'ai pas encore figé mes choix de format. Je veux pouvoir gérer pour chaque tuile: ** des objets complexes (tour eiffel), ** des bâtiments simples (parallélépipède) ** et des élévations de terrain.
      • aframe.io est vraiment une approche très intéressante. J'ai fait quelques tests et il y a un très bon support technique par chat via slack. Cependant, ça devient vite complexe à adapter à des besoins particuliers. Par exemple, les modes de navigation sont exclusivement pensés pour une utilisation avec casque et mouvements "humains", ce qui est cohérent. Du coup, c'est vite devenu ingérable pour moi.

      • [^] # Re: Pas mal du tout

        Posté par  . Évalué à 3.

        Lier tuiles et ponctuels est un peu risqué, non? Tu vas forcément avoir des bâtiments qui chevauchent plusieurs tuiles (y compris au zoom max). Ça ne serait pas plus robuste de dé-correler les deux, avec le bâti qui serait un overlay de la carte (tenant éventuellement compte de l'élévation si besoin)?

        • [^] # Re: Pas mal du tout

          Posté par  . Évalué à 1.

          J'ai déjoué le problème en me basant sur le centroïde de l'empreinte au sol.

          J'utilise le niveau de zoom pour attribuer le LoD des bâtiments.

          À terme, les tuiles seront des grilles d'élévation pour prendre en compte le relief.

          Donc, je garde le concept de tuile à tous les niveaux.

  • # Très sympa

    Posté par  (site web personnel) . Évalué à 1.

    Salut,

    C'est très sympa à utiliser !
    Je comprends bien qu'il y a encore plein de travail à faire.

    Quelques remarques :
    - un wiki avec un minimum de doc (comment utiliser l'outil) serait sympa
    - se déplacer n'est pas toujours facile : si on est en "vision inclinée" et qu'on se déplace par clic gauche + déplacement vertical, le déplacement n'est pas très évident. Si on est en "vision à plat" (vision de dessus "normale"), alors le déplacement "fonctionne" bien.

    J'ai également constaté des problèmes énoncés précédemment : tuiles avec des niveaux de zoom différents, tuiles noires.
    Petits bugs qui seront résolus, j'en suis sur.

    Super projet : bon courage pour la suite.

  • # pas de 3D

    Posté par  . Évalué à 1.

    Avec Chromium 47, je ne vois qu'une carte à plat, pas de 3D.
    Comment peut-on activer la 3D ?

Suivre le flux des commentaires

Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.