AngeZanetti.com

Internet et ses usages, développement Web et humeurs diverses

Tag: WebGL (page 1 of 2)

SketchFab: le Youtube de la 3D en WebGL

Je me rends compte que j’ai jamais parlé ici de Sketchfab, le service français qui monte. Le principe est simple: faire un outil qui permette d’afficher de la 3d dans vos articles de blog, sur votre site web aussi facilement qu’on le fait avec les vidéos Youtube.

Le tout sans plugin, juste un bout de code à copier coller et hop avoir sa dernière création qui s’affiche en 3D animée dans votre portfolio.

Sketchfab est une startup française, qui explose depuis les 6 derniers mois – étrangement depuis qu’ils sont portés par un accélérateur New Yorkais :) Pour le coté technique c’est beau, c’est du WebGL, probablement de l’OsgJS car un des créateurs de Sketchfab est Cédric Pinson le créateur du framework OsgJS.

Alors que pas mal de projet 3D, d’univers 3D sont entrain de mourir et qu’il n’y a plus que quelques irréductibles qui y croient toujours il est marrant de voir que la 3d est entrain de faire le tour et d’envahir le web.

Les perspectives d’usages sont immenses, mais ce sont les architectes et les imprimeurs 3D qui ont les premiers adoptés cette nouvelle façon d’enrichir le web.

 

Discover Sketchfab from Sketchfab on Vimeo.

Pourquoi vous devriez utiliser WebGL

Depuis que je travaille comme consultant et développeur dans le monde de la 3D je suis confronté à des débats sur les technos. Cela à commencé avec SecondLife, Opensim puis Unity3d, WebGL, Flash etc …
Avec des arguments plus ou moins bien choisi, mais il y a toujours cette problématique du choix de technos. Je vais essayer de vous convaincre, dans ce billet, de tester WebGL.
WebGL logo

WebG quoi ?

WebGL est une implementation d’OpenGL en javascript qui permet d’afficher de la 3d dans les navigateurs sans plugins.
C’est en fait une API qui permet au Web de “parler” à votre carte graphique et d’afficher de la 3D.
Les navigateurs qui supportent cette techno sont:
  • Chrome (desktop & mobile)
  • Firefox (desktop & mobile)
  • Safari ( sauf sur iOS)
  • Opéra (sauf iOS)
  • Blackberry browser

A noter qu’internet explorer 11 devrait supporter WebGL, c’est du moins les rumeurs qui courent sur Twitter. Autrement dit, à part iOS qui fait le blocus, vous pouvez afficher du WebGL à peu près partout pour peu que vous ayez un  ordinateur potable, avec un navigateur mis à jour ou une tablette Android.

Si on en crois le site webglstats, à l’heure actuelle près de 70% des internautes peuvent afficher du WebGL.

Comment ça marche ?

WebGL s’affiche à l’intérieur de la nouvelle balise HTML5 appelée canvas, une fois cette balise créée il suffit de lui attribuer du le contexte qui va bien

var gl = canvas.getContext('experimental-webgl');

Et, hop vous avez un carré de WebGL, le reste c’est du javascript et des shaders.

Il y a également de nombreux frameworks pour faciliter le travail, mon préféré étant Three.js.

 

Si c’est si facile pourquoi c’est aussi peu utilisé ?

Aah, la fameuse question ! Premièrement c’est utilisé un peu partout sans forcement le savoir, WebGL est utilisé par Google Street View par exemple. dans de plus en plus d’application de prévisualisation 3D, github vient d’annoncer un “STL file viewing” supporté par du WebGL, sans oublier CouldParty, clone de SecondLife entièrement en WebGL et intégré à Facebook.

Ensuite, il faut le dire, les dernières années ont été des années de développement. WebGL n’était pas forcement stable, à fait face à des soucis de sécurité assez important et les performances n’étaient pas non plus au rendez vous.

Mais les choses changent vite, l’API est passé en version 1.0 il y a quelques semaines et, pour ce qui est des performances, Mozilla à sorti la semaine dernière un portage du moteur de jeu unreal Tournament dans le navigateur en WebGl, qui contredit vraiment les critiques sur la performance de la techno !

Quels sont les concurents ?

Unity3D

C’est à mon avis le concurrent le plus sérieux, Unity est un logiciel propriétaire dédié à la création de jeux vidéos. Les jeux crées sont exportablent vers consoles, mobiles, ou vers le web via un plugin.

L’outil est vraiment efficace et permet de créer facilement des scènes 3D de jeu. Si le web n’est pas votre cible principale ou si vous voulez des jeux extrêmement complexes, foncez c’est la techno qu’il vous faut!

Flash Stage 3D

Si je voulais troller un peu je dirais que Flash n’est pas vraiment une techno d’avenir et que ça devrait suffire pour vous convaincre !

Pour être un peu plus objectif, Stage 3d n’a pas l’air vraiment documenté, demande l’installation de Flash – même si c’est standard sur la plupart des plateformes – et ne tourne pas sur mobile. Vous pouvez toujours compiler votre code en appli native, mais on sort du champs d’application de WebGL, tout comme les applis natives générées par Unity.

Silverlight 3D

C’était une idée de Microsoft, même si la firme n’a pas apporté beaucop de soutient à Silverlight et encore moins à Silverlight 3D. Honnêtement, je ne vois pas d’avenir pour cette techno, en tout cas rien qui justifie une investissement conséquent.

 Qui m’aime me suive !

Pour moi tout est réuni pour que l’on assiste dans les prochains mois à une effervescence de projets WebGL. Cette techno, encore confidentielle est entrain d’émerger, et l’implémentation sur IE11 devrait aider encore plus son essor.

Je vois de plus en plus de projets qui sortent, Sketchfab est un bon exemple de projet WebgL qui marche. Alors pas forcement sur des jeux complexes, sur des mondes virtuels mais dans un premier temps pour tout ce qui est data-visualisation, démos produits, visite virtuelle, je crois vraiment que le WebGL à sa carte à jouer.

C’est d’ailleurs pour cette raison que je me replonge, tête la première, et avec plaisir dans cette techno. Vous venez ?

Le moteur d’Unreal 3 porté sur le Web avec WebGL

Mozilla et depuis quelques temps pas mal porté sur le jeu, notamment avec ses games challenges le tout en HTML5 bien sur. Ils ont une vraie politique de porté et de soutenir WebGL notamment et une volonté de faire du web une plateforme de jeu à part entière.  Cette fois ils ont sévi avec Epic Games en portant le moteur d’Unreal Tournament, porté sous Flash il y a 2 ans, sur le web cette fois et en WebGL s’il vous plaît!

Le portage à été réalisé avec emscripten et asm.js. Cela assure des performances assez folles pour du WebGL, deux supérieures à la normale apparemment  Ce qui nous rapproche encore un peu des performances d’un jeu “natif”.

Cerise sur le gâteau, le portage leur à pris seulement 4 jours !

On assiste à ce moment à une vraie explosion du WebGL, les performances des terminaux mobiles ou non le permet mieux et les navigateurs le supporte de plus en plus nativement.

Je vous laisse avec la démo, admirez la fluidité, moi elle m’a bluffée

source

Convertir des îles Opensim ou SecondLife en collada

Je ne sais pas si vous connaissez Tipodean c’est une startup dirigée par Chris Collins, un ancien Linden, et qui depuis quelques mois essaye de créer un viewer Unity pour OpenSim et SecondLife. Je vous en parlais en Juillet dernier, à l’époque ce n’était pas vraiment au point, c’était de l’alpha…

Mais ils ont continué à travailler et ont annoncé le 3 janvier dernier la sortie d’un site web qui permet de convertir directement le contenu SecondLife ou OpenSim pour l’afficher dans le navigateur via Unity3d Ou Flash !

Vous pouvez tester la démo dispo ici http://www.tipodean.com/ Il y a encore pas mal de lag, les graphismes ne sont pas extraordinaire mais le potentiel est là !

L’autre point positif c’est que pour arriver à ce résultat Tipodean passe par du Collada, le format générique de la 3D. On peut donc récupérer nos objets et les afficher dans Blender, Sketchup etc… Et peut être les afficher un jour en WebGL ? Comme le montre cette démo de Three.js, le collada est de mieux en mieux supporté par WebGL !

En attendant que la techno murisse Tipodean à donc décidé de se focaliser sur Unity3D :

“Anyone trying to get there content out to a larger audience. School/University, Museum, Company, Government. If you want to run it in the web ad have it deployed to a very large audience with the need to handle high loads then that is why you would want to look at Unity3D. Or put it out to IPads or Android. But the real key it large audience, in the browser, for an easier onboarding.”

J’aurais été beaucoup moins d’accord avec cette déclaration il y a un an mais c’est vrai que l’export en Flash est une grosse avancée, car le taux d’installation d’un plugin comme unity3d – si simple soit-il – ne doit pas être énorme.

Flash, même s’il s’agit aussi d’un plugin, est installé sur la majorité des machines !

J’espère que l’optimisation va avancer rapidement maintenant… Dommage que la techno ne soit pas opensource on aurait pu contribuer au développement car nombreux sont les intéressés par les débouchés d’une telle techno je crois !

Une adaptation de Minecraft en WebGL

source de l'image : http://www.next-nintendo.com/

 

Je ne sais pas si vous connaissez MineCraft, c’est un monde virtuel assez basique qui permet de créer des univers délirants avec de gros cube pixélisés.
Alors bien sur dit comme ça cela ne fait pas trop envie mais vraiment Minecraft est devenu devenu un véritable phénomène de société.

“[…]Minecraft est un chef d’œuvre de minimalisme qui rejette l’artifice pour se concentrer sur l’essentiel, c’est-à-dire les mécanismes de pure gameplay. Le joueur est à la fois puissant et vulnérable, certes comme la plupart des FPS, mais à la différence près qu’il décide ici librement de son destin, poussé uniquement par ses motivations propres, et non celles définies par un quelconque level-designer.[…]” – Karpel –

La version classique tourne en Java mais Daniel Ribeiro a developpé une version WebGL de Minecraft.

Le résultat est  proche de l’original. Évidemment dispo sans plugin, une démo en ligne est accessible ici : http://danielribeiro.github.com/WebGLCraft/

Et comme Daniel fait les choses bien son code est publié sur Github, sous licence MIT en plus! https://github.com/danielribeiro/WebGLCraft

Pour les plus développeurs, sa démarche de création est expliquée sur son blog http://metaphysicaldeveloper.wordpress.com/….

La méthode de choix du moteur graphique est notamment intéressante.

Il manque juste un petit serveur node.js – ou autre – derrière tout ça pour faire tourner la démo en multi joueurs et on aurait un monde virtuel vraiment sympa !

Un Boilerplate pour Three.js est sorti !

Je ne sais pas si vous connaissez HTML5 Boilerplate, c’est un outil inspiré de la méthode DRY « don’t repeat yourself ». Pour faire simple c’est un ensemble de fichiers qui constitue une base commune pour vos projets web. On trouve un fichier index.html avec les balises de base comme le doctype, le <head>, les sections etc… De même, on trouve des fichiers JS communs comme la librairie Jquery. Bref, tout ce dont on a besoin quand on se lance dans un projet web.

Et bien Jérôme Etienne, un des développeurs webGL français le plus actif, vient de sortir un « Three.js Boilerplate » — three.js étant un des framework WebGL les plus abouti !

Qualité numéro 1 : il detecte si le webGL est supporté, et dans le cas contraire il bascule tout seul en canvas 2d. Il affiche également les stats et embarque, par défaut, le module d’animation de Three.js et pas mal d’autres petites librairies bien pratiques.

Cela devrait me faire gagner pas mal de temps sur mon prochain projet WebGL !

Vous pouvez retrouver le Three.js Boilerplate sur Github : https://github.com/jeromeetienne/threejsboilerplate
Evidemement c’est du libre donc forkez le, modifiez le à votre sauce, mais n’oubliez pas de partager vos modifs !

Unity supportera HTML5

 

J’ai lu une news sur Gamasutra hier qui ‘ma fiat bondir de mon siège – ou presque. Unity technologies annonce qu’il supportera probablement HTML5 dès que cette technologie “sera prête pour le gaming”.

Le CEO, David Helgason explique que le moteur HTML5 est très bien pour faire de la datavisualisation par exemple mais que cette techno n’est pas encore mûre pour faire du jeu. D’après lui celui va changer avec le temps et Unity surveille de près ces changements pour pouvoir proposer une compatibilité rapidement.

Il faut dire que WebGL/HTML5 fonctionne sans plugin directement dans le navigateur. C’est, de l’avis de tous les acteurs pro des mondes virtuels et/ou du serious game, LA grosse marche à franchir avant une réelle propagation de ces technos.

Ceci étant dit, Unity est une techno propriétaire, payante, alors que HTML5 est un standard ouvert. Pour ceux d’entre nous qui savent coder autant créer directement du contenu en WebGL. D’autant que des frameworks comme Three.js ou Philo GL permette maintenant de créer des scènes webGL assez facilement –  sous réserve de coder en Javascript…

C’est d’ailleurs ce positionnement que j’ai choisi en me mettant à fond dans le JS depuis plusieurs mois. Vous devriez d’ailleurs voir bientôt du changement sur ce blog, une nouvelle version avec du HTML5 & du webGL est en préparation !!

Data visualisation et WebGL

Jonas Wagner est un hacker qui travaille pour local.ch, un moteur de recherche qui ressemble à notre pagesjaunes.fr.

Il était apparemment, depuis quelques temps, à la recherche d’un outil de datavisualisation sympa pour représenter toutes les données de local.ch. Il a finalement choisi WebGL et le résultat est bluffant.

Il modélise les 3,7 millions d’adresses référencées par local.ch sous la forme d’un point rouge. Les données sont géolocalisées en 3D, on peut donc facilement reconnaître les contours de la suisse mais aussi les reliefs – lacs, montagnes etc..

WebGL est vraiment adapté pour ce genre de démos, et les outils de datavisualisations qui utilisent cette technologie sont de plus en plus nombreux sur la toile. Pas besoin de plugins, des performances vraiment bonnes et une interactivité bien au dessus d’une démo en Flash par exemple. La 3d prend petit à petit la place qui lui revient, et c’est un bon point !

Si vous utilisez un navigateur qui supporte WebGL la démo est accessible via ce lien

29a.ch/sandbox/2011/addresscloud/

Sinon vous pouvez télécharger un navigateur qui le supporte : http://www.khronos.org/webgl/wiki/Getting_a_WebGL_Implementation

Et/ou regarder cette vidéo :

Pour les curieux, le code source est disponible sur Github: https://github.com/jwagner/addresscloud

Beloola : présentation en vidéo

Beloola est un monde virtuel français – développé par v-cult une société Lilloise. Son créneau est assez précis : un monde virtuel 3D dans le navigateur dédié à l’art et à la culture. Dans l’interview de Tom son fondateur on apprend :

Avec ce projet, le but n’est pas de créer un énième réseau social mais au contraire d’agréger des contenus communautaires ; ainsi au cœur de Beloola, tu auras accès à ton wall Facebook, Twitter etc. Découvrir, partager, créer, vendre et consommer au sein d’un seul et même environnement 3D, c’est ça le concept.

Apparement ils sont entrain de refondre complètement leur moteur graphique pour le passer en WebGL ! Malheureusement impossible de tester pour le moment, mais la bêta privée devrait arriver sous peu.

Pour nous faire patienter ils ont uploadé une vidéo sur Youtube qui me donne ” l’eau à la bouche”, vivement le test !

Vers un client Web pour OpenSim et SecondLife

Les mondes virtuels n’ont pas eu le succès attendu. C’est un fait. Nous sommes beaucoup à penser que cela est du, entre autre, a un vrai problème d’accessibilité de ces plate-formes. Il faut installer un client lourd, s’enregister, apprendre à se déplacer en 3D, retrouver ses amis etc etc… En un mot c’est dur, trop compliqué pour le visiteur lambda qui cherche juste à visiter une expo, assister à un spectacle et pas à devenir le builder qui va révolutionner le metavers.

Pour palier à ce problème, une des solutions serait d’avoir un accès dans le navigateur internet directement. C’est ce que propose Assemblive par exemple. L’avantage de ce type de solution est qu’un simple clic sur un lien permet de se retrouver dans une interface en trois dimensions.

Alors pourquoi OpenSim, SecondLife et les autres ne proposent-ils pas un accès à leurs mondes immersifs dans le navigateur. Je n’ai pas la réponse. Tout le monde tend à penser que cela va arriver. La question c’est quand?

De nombreuses initiatives démontrent que l’on est pas si loin que cela. Par exemple TippoDean propose de convertir vos fichier OAR – le format de sauvegarde des sims – en format 3D mesh de façon à pouvoir exporter plus facilement sur un moteur externe comme unity3d par exemple.

Seulement, Unity n’est pas, à mon avis, la solution idéale. Il faut installer un plugin et pour beaucoup c’est toujours un frein à l’adoption. Dans un usage en entreprise par exemple, installer un plugin cela veut dire appeler le technicien pour l’installation et à chaque mise a jour. Trop compliqué.

Une solution à ces écueils serait de porter le tout sous WebGL, une technologie HTML5 qui permet d’afficher de la 3D dans le navigateur. Pendant longtemps je me suis demandé si c’était réalisable, si on pouvait imaginer afficher une sim dans un browser. Mes doutes portaient sur la capacité graphique de WebGL pour afficher un monde aussi complexe que peut l’être une sim OpenSim.

Certains exemple comme le projet ROME m’avait rassuré mais je n’avais toujours pas de certitudes même si je “sentais” bien que cela serait possible.

Ces derniers jours j’étais à Strasbourg aux RMLL et il se trouve qu’il y avait un développeur WebGL, Cédric Pinson. Après lui avoir posé la question et lui avoir montré la techno Opensim il avait l’air plutôt confiant. Il est possible de monter un client léger basé sur du WebGL pour accèder à OpenSim depuis son navigateur Internet !

Cela demanderait du temps, mais c’est de l’ordre du possible, et apparemment vraiment pas insurmontable. Il suffirait de quelques développeurs Javascript pendant quelques mois. OpenSim ayant la communauté qu’on lui connait j’ai du mal à comprendre pourquoi cela ne s’est pas encore fait…

Des volontaires dans l’auditoire ?

Older posts

© 2016 AngeZanetti.com

Theme by Anders NorenUp ↑