Le PDF en 3D avec WebGL inventé par des membres de Developpez.com
Ils fondent la société SPACEGOO

Le , par Gordon Fowler, Expert éminent sénior
Le PDF en 3D avec WebGL inventé par des membres de Developpez.com
Qui créent un nouveau mode de navigation et fondent SPACEGOO

La standardisation de la technologie WebGL à l’été 2010, et son implémentation par les navigateurs récents (Firefox 4, Chrome 7, Opera 11.50, Webkit) ont permis de faire simplement du rendu 3D de qualité dans le navigateur. La scène 3D est rendue dans un canvas HTML5, ce qui permet d’intégrer ces éléments 3D à un site « standard », développé en PHP et CSS par exemple.

Utilisée essentiellement pour les jeux, les démos, et la visualisation d'objets 3D, des membres de développez ont fondé la société SPACEGOO et ont eu l'idée d'utiliser le WebGL pour représenter du contenu textuel dans un environnement 3D.

Le but était de créer un CMS (Content Management System) permettant de prendre en entrée un PDF et de rendre un environnement 3D complet dans lequel le PDF est rendu.

Les pages du PDF sont découpées automatiquement côté serveur et disposées en tant que textures sur les murs d’une pièce carrée. Le client récupère ensuite une archive complète qu’il peut mettre sur son serveur sans plus de modification, le logiciel s’étant chargé de générer le code JavaScript et PHP.

Dans la phase d’utilisation du logiciel, l’environnement peut être personnalisé en rajoutant des menus 2d, des liens hypertextes, des players musique, des écrans vidéos tournant dans le ciel… ou des objets 3D importés depuis Blender comme ici :



Il aura fallu un an de développement pour arriver à ce résultat et de nombreux défis ont été relevés. Le plus important a été le système de navigation : comment faire un système de navigation permettant de naviguer dans un univers en 3D avec un unique dispositif de pointage, facile à prendre en main pour l'internaute moyen.

La solution la plus simple aurait été de reprendre celle des jeux vidéo de shoot'em up : les touches directionnelles pour translater la caméra, et la souris pour la faire tourner.

Mais ce système de navigation est difficile à gérer pour ceux qui n'ont jamais joué, et il est inadapté à une navigation de type web, avec un unique dispositif de pointage. Enfin, la plupart des positions dans l'espace sont inconfortables pour lire du contenu.

Après de nombreux essais SPACEGOO s'est inspiré de la démarche naturelle d'un visiteur dans un musée : celui-ci arrive dans la pièce rectangulaire où les tableaux sont accrochés aux murs. Il commencera par faire un tour de la salle, où sa trajectoire sera à peu près une ellipse concentrique à la pièce. Il reste à une certaine distance des œuvres.

Si une œuvre l'intéresse, il va se placer face à elle, et avancer et reculer tout en restant dans l'axe. Sa trajectoire est un segment passant par le milieu du tableau qu'il observe. Sur les PDF mis en forme en 3D, le système de navigation est identique. Le mode initial est le mode aperçu, la trajectoire est une ellipse concentrique à la pièce, avec la vue toujours perpendiculaire à la trajectoire, puis lorsque l'on clique sur une page on passe en mode lecture, avec une trajectoire en forme de segment passant par le centre de la page visualisée.

Un problème concerne le sens de déplacement latéral. Il existe deux profils d'utilisateurs, à peu près répartis à 50-50 d'après les essais de SPACEGOO.

Pour le premier profil, il est plus naturel de partir curseur au centre, et de le déplacer vers la droite pour aller à droite, comme dans les jeux vidéo.

Pour les seconds il est plus naturel d'amener le curseur à droite, et de le ramener au centre. Le problème est que ce système correspond à une navigation inversée par rapport la navigation précédente, et vice versa. Ce placement est quasi-systématique pour les utilisateurs d'écrans tactiles, notamment d'iPads et d'iPhones

SPACEGOO a finalement choisi de créer le red wall test, ou test du mur rouge, pour déterminer le système de navigation de l'internaute :



En demandant à l'internaute de se placer face au mur rouge, on détermine son profil. Si le mouvement du curseur est de gauche à droite, il est du profil 2.

La technologie utilisée permet également de coder très facilement des jeux vidéo intégrés dans le navigateur. Un exemple célèbre est la version de Quake 2 réalisée par une équipe de GOOGLE.

SPACEGOO a réalisé plusieurs jeux avec cette technologie, dans le but de se faire connaître et d’égayer un peu les semaines de développement. Par exemple SPACEGOO Maze est un jeu de labyrinthe en 3D qui a été publié sur Chrome Experiment, et SPACEGOO SurviveCopter est un jeu où l’on doit piloter un hélicoptère en panne dans une grotte.



Pour en revenir aux PDF en 3D avec WebGL, le produit s'adresse en premier lieu aux Web Agencies qui souhaitent proposer à leurs clients une mise en forme moderne, attrayante et très ergonomique (la mise en forme en 3D permet d'avoir une meilleure visibilité sur l'ensemble du document que dans une visionneuse classique avec ascenseur - ou « scroll bar »).

Le contenu est également mieux protégé, puisque l'internaute ne peut pas télécharger le document. Il s'adresse également à tous ceux qui ont des PDF à présenter, notamment dans le monde de la presse.

Pour les particuliers, ou les curieux qui ont envie d'essayer, SPACEGOO propose un démonstrateur gratuit.

SPACEGOO est une société fondée en 2010. Elle se compose de trois personnes : Xavier Bourry, élève de la promotion 2006 de l’Ecole Polytechnique spécialisé en informatique et sécurité de l’information, Philippe Pascot, expert-comptable et Régis Portalez, développeur, et camarade de promotion de Xavier à Polytechnique spécialisé en mathématiques et rendu 3D.

Le nom SPACEGOO a été choisi pour contenir « space », qui fait clairement référence à l’activité de la société. Son but est d'apporter la 3D à l’internet.

SPACEGOO a obtenu l'aide à la maturation de projets décernée par le Centre Francilien de l'Innovation (qui dépend d'OSEO). Le site génère un millier de visite par jour grâce aux jeux vidéos.

Le journal Temps Libre (un gratuit à destination des seniors) a déjà adopté SPACEGOO CMS sur toutes ses éditions en tant que beta testeur. La version définitive devrait être commercialisée d'ici l'automne.

SPACEGOO fait également du conseil en WebGL et en rendu 3D dans le navigateur comme des bandeaux publicitaires en 3D (dont on trouve quelques exemples sur le site officiel).

Longue vie à cette jeune pousse.

Démonstrateur de SPACEGOO PDF
SPACEGOO Maze
SPACEGOO mosquitoes
SPACEGOO SurviveCopter


Vous avez aimé cette actualité ? Alors partagez-la avec vos amis en cliquant sur les boutons ci-dessous :


 Poster une réponse

Avatar de spacegoo spacegoo - Membre habitué https://www.developpez.com
le 29/06/2011 à 18:16
Celà doit venir d'un problème de drivers graphiques.
Chrome renvoie les appels à OpenGL via DirectX sous Windows (merci Google Angle), tandis que Firefox les envoie directement à OpenGL.

On a constaté ce problème sur quelques PC. En même temps Google est en avance sur tout le monde sur le WebGL (WebGL activé de série sur Chrome 7, et présent dès Chrome 6 au moins).

Ce sont des petits problèmes de démarrage. Il y a beaucoup d'acteurs intervenants dans le webgl (navigateur, OS, carte graphique) et ça va forcément mettre un peu de temps pour que tout le monde respecte plus ou moins le standard. Mais ça en vaut la peine !
Avatar de tomlev tomlev - Rédacteur/Modérateur https://www.developpez.com
le 29/06/2011 à 18:23
Citation Envoyé par regis.portalez  Voir le message
et les démos de google?
genre ça : https://cvs.khronos.org/svn/repos/re...pot/index.html

elles fonctionnent?

Je te dirai ça ce soir en rentrant chez moi...
Avatar de tomlev tomlev - Rédacteur/Modérateur https://www.developpez.com
le 29/06/2011 à 23:42
Citation Envoyé par tomlev  Voir le message
Je te dirai ça ce soir en rentrant chez moi...

Bon bah la démo de Google marche pas non plus
"It doesn't appear your computer can support WebGL."

Ma carte graphique est une NVidia GeForce G210

Je vais voir si une mise à jour des pilotes règle le problème...
Avatar de tomlev tomlev - Rédacteur/Modérateur https://www.developpez.com
le 30/06/2011 à 0:02
Citation Envoyé par tomlev  Voir le message
Je vais voir si une mise à jour des pilotes règle le problème...

C'était bien ça, maintenant ça marche nickel
Merci, sans vous j'aurais gardé mes vieux pilotes tout pourris
Avatar de regis.portalez regis.portalez - Membre régulier https://www.developpez.com
le 30/06/2011 à 11:28


oui je n'arrive pas à comprendre pourquoi les MAJ de drivers ne sont pas proposées dans Windows update. Surtout qu'ils certifient les nouveaux drivers...

Du coup tout le monde garde ses drivers qui datent de l'achat du PC...

Bonnes experiments
Avatar de tomlev tomlev - Rédacteur/Modérateur https://www.developpez.com
le 30/06/2011 à 12:00
Citation Envoyé par regis.portalez  Voir le message
oui je n'arrive pas à comprendre pourquoi les MAJ de drivers ne sont pas proposées dans Windows update. Surtout qu'ils certifient les nouveaux drivers...

Sans doute parce que le driver que j'avais n'était pas celui de Nvidia, mais un driver générique fait pas Microsoft
Avatar de spacegoo spacegoo - Membre habitué https://www.developpez.com
le 01/07/2011 à 11:03
Pour les toutes dernières ATI la mise à jour des drivers se fait automatiquement.
Je pense que ça va se généraliser vu les nouvelles contraintes de sécurité auxquelles sont exposés les drivers graphiques.
Avatar de regis.portalez regis.portalez - Membre régulier https://www.developpez.com
le 21/07/2011 à 18:18
Bonjour,

voici une nouvelle démo qu'on a publiée aujourd'hui.

http://www.spacegoo.com/ambient_occlusion

L'effet d'ambient occlusion est précalculé sur GPU grâce à CUDA, et affiché en WebGL.
Merci à laurent gomila pour son tuto qui m'a été très utile [http://loulou.developpez.com/tutorie...nt-occlusion/]

Régis
Avatar de Daranc Daranc - Membre émérite https://www.developpez.com
le 29/07/2011 à 9:19
déroulement de l'opération pour la démonstration une liste s'affiche OK
OK
OK
OK
jusqu'à ce que adresse ou l'on peut visualiser le résultat
un mur gris (au fond et un rouge à droite )
placer vous face au mur rouge .... ... ça me rappelle l’électricien fou sur Amstrad CPC
là on se déplace de haut en bas et de droite à gauche d'environ 1 cm à l'écran. Et ? rien heureusement que Sumatra permet la lecture d'un PDF ( en 2D mais au moins on lit quelque chose .. c'est un peu le but d'une impression PDF ) bon ! noter Spacegoo
zéro c'est bien payer
à moins qu'il ne faille prendre leur démo au second degrés ( voir même au troisième)
de plus si il faut pour que leur truc marche dire aux client destinataire du PDF de changer leur parc informatique ( et peut être aussi leur imposer une marque et un modèle ) je crains que ce ne soit pas du plus vendeur comme truc
Avatar de spacegoo spacegoo - Membre habitué https://www.developpez.com
le 01/08/2011 à 13:02
Bah si tu n'es pas capable de rendre ton PC compatible webgl on ne peut rien pour toi. A l'heure actuelle 40% des internautes le sont, et ce pourcentage monte. Tu peux toujours nous donner ta config, on pourra voir ce que l'on peut faire pour toi.

Cordialement,
Xavier
Avatar de Daranc Daranc - Membre émérite https://www.developpez.com
le 05/08/2011 à 10:21
non le truc, c'est "professionnel"
nul doute que ça marchera sur ma machine perso . le PC de boulot est un Dell PVI avec 2Go de ram et comme la plupart des machines hors BE : chipset graphique dessus tout est mis à jour tant au pilotes qu'au niveau XP (32) (le parc informatique de la société est à l'image de ce PC et lorsque l'on sait que la dernière machine partie à la benne ,"pas réparable"et heureusement était un 486 sous 3.11 d'accord elle servait à piloter à une machine d'atelier). et encore comparativement à d'autre société ou je vais faire des dépannages ( restauration et animation) le parc n'est pas très vieux ( c'est tout dire ) le pentium IV y est encore le 'nec plus ultra' donc je n'y voit pas trop l'adaptabilité du PDF 3D

la solution est peut être la promo par vidéo : un PDF bateau (en 2D) et une vidéo du résultat. ce qui ne passe ni par une imposition du navigateur , ni par un changement de matos
Offres d'emploi IT
Développeur BI
Pureplayer - MEGA-CONNU du web français - Ile de France - Paris
Développeur back-end (python) H/F
VALEXANE - Rhône Alpes - Romans-sur-Isère (26100)
RECHERCHE UN/UNE DEV .NET - GAMING - PARIS - H/F
BetClic - Ile de France - Paris (75000)

Voir plus d'offres Voir la carte des offres IT
Contacter le responsable de la rubrique Accueil