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

Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous
Identifiant
Mot de passe
Mot de passe oublié ?
Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

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

Le , par Gordon Fowler

6PARTAGES

7  1 
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

Une erreur dans cette actualité ? Signalez-nous-la !

Avatar de regis.portalez
Membre habitué https://www.developpez.com
Le 25/06/2011 à 9:30
Cette discussion va réussir à ressemble à un troll microsoft-linux ou IE-FF si ça continue

Que je sache, sony n'a pas été attaqué parce leur site était en WebGL...
C'est tout le Web qui est une immense faille de sécurité.
Le seul ordi qui est sécurisé, c'est celui qui n'a pas de carte réseau ni de port USB...
2  0 
Avatar de regis.portalez
Membre habitué https://www.developpez.com
Le 24/06/2011 à 14:50
Bonjour,

merci à l'équipe de développez.com d'avoir publié cet article nous concernant.

Je fais le premier commentaire pour annoncer une nouvelle démonstration développée pendant la rédaction de l'article.

Il s'agit d'une version en 3D du Cadillac Ranch, oeuvre d'art collaborative située au Texas où toute personne qui vient peut peindre ce qu'il veut.

voici le lien :

http://www.spacegoo.com/cadillac

Encore merci à vous

Bonne journée

Régis
1  0 
Avatar de Gordon Fowler
Expert éminent sénior https://www.developpez.com
Le 24/06/2011 à 15:04
Curieux, chez moi ça marche...
1  0 
Avatar de Kanithael
Membre habitué https://www.developpez.com
Le 24/06/2011 à 15:41
Pour bosser avec de la 3D (qui me sert d'aide à la saisie), je trouve pour ma part que certes c'est sexy, que ça en jette, mais qu'une fois l'effet démo passé on s'en lasse et ce n'est pas des plus ergonomiques... Peut-être parce que c'est déroutant et très différent de ce qu'on a l'habitude de faire avec une souris (à part pour les joueurs...)
Après, je n'ai pas testé votre navigation, donc je ne veux pas jeter la pierre sans raison, mais je suis sceptique !
Mais bon... Pour une présentation marketing ponctuelle, pourquoi pas ?
1  0 
Avatar de notia
Membre confirmé https://www.developpez.com
Le 24/06/2011 à 20:47
Citation Envoyé par spacegoo Voir le message
En ce qui concerne silverlight5, qui permet de faire de la 3D, les problèmes de sécurité sont les même que pour le WebGL ( http://www.readwriteweb.com/hack/201...ht-has-the.php ).

Etant utilisateur de linux, pour avoir testé moonlight (version open source de silverlight), je n'ai vraiment pas été convaincu.

Le WebGL fait certes appel à des fonctions hardware, mais c'est une version très simplifiée d'openGL (openGL ES2.0). Je pense que vu le nombre de fonctions implémentées par WebGL, il est très faisable de sécuriser tout cela à terme.
L'article explique aussi que microsoft à une solution pour silverlight.

Par contre je doute que la population de gamer accepte de mettre à jour leur driver avec des patch sécurités ou décide d'acheter des cartes graphiques nouvelles génération plus sécurisée mais plus lentes.
A faire un choix mieux vaut désactiver cette option.

http://www.contextis.co.uk/resources/blog/webgl/

A priori, il n'existerait pas de solution sans compromettre les performances or le fond de commerce des fabriquants c'est la performance. directx, opengl, les shaders ont été créé pour fournir un acces au hardware en minimisant les couches et les controles. On part du principe que le développeur sait ce qu'il fait. Et là on dit que les concepteurs de navigateur vont expliquer gentillement au fabricant en leur disant les mecs "on a merdé, nous avons fait quelques erreurs dans la spécification mais comme on veut pousser cette norme, pouvez vous s'il vous plait revoir vos copies : misez sur la sécurité plutot que la performance"

Tant bien qu'ils feraient preuve de bonne volonté, quel joueur installerait un driver ralentissant sa carte, l'empechant de jouer au dernier jeux qu'il a payer 60€. C'est la remise en cause de toute une industrie (celui du jeux video) dont il est question.

Sinon je salue votre travail
1  0 
Avatar de regis.portalez
Membre habitué 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
1  0 
Avatar de arkadih
Nouveau membre du Club https://www.developpez.com
Le 24/06/2011 à 15:06
intéressant, mais quel sera votre modèle commercial si ce n'est pas indiscret ? car il semble difficile de mesurer les applications pour le moment, sauf à encourager les éditeurs à générer des pdfs dont la finalité est directement celle décrite ici.
0  0 
Avatar de regis.portalez
Membre habitué https://www.developpez.com
Le 24/06/2011 à 15:06
Bonjour,

comme indiqué dans l'article, il faut firefox 4 ou chrome pour que ça fonctionne.
Il faut également avoir des drivers graphiques à jour pour supporter le WebGL.

Sous linux, le driver "nouveau" ou l'ancien "nv" ne le permettent pas, et il faut installer les drivers propriétaires fournis par le fabriquant de la carte.

Sous Windows (xp ou 7), il suffit d'aller dans le gestionnaire de périphériques, cliquer sur carte graphique, et mettre à jour les drivers.

Sous Vista, il peut y avoir des problèmes insolubles, mais bon, qui a vista?

Bonne journée

PS : vu que le WebGL n'est pas supporté par IE, on n'a pas testé le site pour ce "navigateur". Il est possible qu'il y ait donc des problèmes de css, mais on ne sait pas...

Régis
0  0 
Avatar de xavierbourry
Membre averti https://www.developpez.com
Le 24/06/2011 à 15:14
Notre business model est du SAAS : on vend un abonnement à l'application en ligne permettant de mettre en 3D des journaux, des magazines ou des présentations.

En parallèle on propose des services de conseil en webgl, par la programmation de jeux ou de démos.

Notre principale difficulté est pour le moment le taux de compatibilité du WebGL.
En effet, il faut d'abord un navigateur récent :
- Firefox à partir de la version 4
- Chrome à partir de la 7
- Safari 5.1 béta avec le webgl activé
- Opera 11.5beta
(ces deux derniers navigateurs sont amenés à implémenter le webgl dans leur version stable sous peu)
Pour internet explorer, peut-être qu'ils l'implémenteront dans la version 10, surtout qu'ils peuvent rediriger les appels OpenGL vers DirectX comme avec Google Angle. Sinon le plugin google frame permet d'avoir le webgl.

De plus, il faut souvent mettre à jour ses drivers graphiques pour les utilisateurs de windows vista et XP.

Ceci dit, actuellement n'importe quel ordinateur d'entrée de gamme, comme un portable à 300 euros avec un écran 15,4 et sans carte graphique dédié, a windows 7 à la base et fait tourner très bien nos applications. Il est donc prévisible que le taux de compatibilité va augmenter jusqu'à ce que le webgl devienne le standard de la 3d sur internet.
0  0 
Avatar de sinople
Membre chevronné https://www.developpez.com
Le 24/06/2011 à 15:39
Je souhaite une longue vie et prospérité à cette aventure.

Malheureusement chez moi ça ne fonctionne pas à cause de IE probablement.

Néanmoins j'ai l'impression que ce WebGL est pour l'instant loin d'être un standard (adopté en tout cas).
0  0