De la 3D encore plus performante dans votre navigateur grâce à WebGL et WebCL

L’année dernière, Mozilla avait fait sensation en annonçant le portage du moteur Unreal dans son navigateur : Des jeux en 3D toujours plus performants avec HTML5. Précisons que Unreal Engine est un moteur graphique permettant de faire de la 3D, principalement utilise dans des jeux sur PC ou consoles. Ce moteur 3D avait déjà été porté dans Flash (pour faire de la 3D en utilisant le même environnement de création de contenus 3D), et il a ensuite été “traduit” en javascript pour pouvoir tourner de façon native dans un navigateur, en l’occurrence Firefox.

Rebelote cette semaine avec le portage de la dernière version du moteur : Mozilla and Epic Preview Unreal Engine 4 Running in Firefox. En moins de 12 mois, les équipes de Mozilla ont été capables d’améliorer de 40% les performances de asm.js, un sous-ensemble de Javascript, plus facile à optimiser. Les contenus 3D (animations, jeux…) créés pour le moteur Unreal 4 peuvent maintenant être affichés nativement dans votre navigateur grâce à asm.js, qui exploite lui-même WebGL, dont nous avons déjà parlé il y a quelques années : WebGL, le nouveau standard de la 3D sur le web.

Le résultat est visuellement très impressionnant et va permettre aux développeurs de jeux de toucher une cible beaucoup plus large. Pour se faire, ils viennent tout juste de proposer un nouveau modèle de licence pour rendre son moteur plus accessible : Epic Games Tries Something New, Licenses All Of Unreal Engine 4 For $19 A Month.

Le lendemain de cette annonce, Unity3D annonce à son tour que la prochaine version de son moteur de rendu 3D pourra être exécutée dans un navigateur : Mozilla and Unity Bring Unity Game Engine to WebGL. Les mêmes technologies seront utilisées (asm.js et WebGL) pour “traduire” le moteur 3D, mais celui-ci sera toujours disponible sous forme de plug-in.

Le but de ces annonces est de séduire le plus grand nombre de développeurs pour qu’ils adoptent  l’un ou l’autre de ces moteurs 3D dans leurs prochaines réalisations (jeux ou applications). Le fait de proposer une exécution native dans les navigateurs (Firefox ou Chrome) est un plus indéniable pour séduire le plus grand nombre de joueurs sans leur imposer l’installation d’un plug-in. Si le moteur d’Unreal est reconnu pour sa sophistication, le moteur de Unity est plus simple et largement utilisé par les développeurs de jeux mobiles qui y voient un moyen de faciliter la distribution de leurs jeux : Unity 5.0 announced, with direct-to-web, plugin-free publishing.

Et comme si ça ne suffisait pas, le Khronos Group vient d’annoncer la sortie de nouvelles spécifications et versions de spécifications précédentes : Khronos Releases Wave of New Standards and Initiatives for 3D Graphics, Heterogeneous Computing and API Interop. Pour vous résumer une longue explication, Le Khronos Group est un consortium en charge des spécifications de nombreuses normes en matière de 3D, notamment OpenGL (pour que des applications puissent exploiter la puce graphique) et OpenCL (pour que des applications puissent faire des calculs en parallèle sur le processeur ou la puce graphique). Le Khronos Group est notamment à l’initiative de WebGL, l’équivalent d’OpenGL pour les navigateurs et de la toute nouvelle WebCL, une APIs qui permet aux navigateurs d’utiliser le processeur pour faire des calculs parallèles : Khronos publishes a range of specs to take GPU computing to the Web et WebCL Will Soon Let Web Developers Harness The Power Of Multi-Core GPUs And CPUs From The Browser.

Traduction : l’industrie se mobilise pour que les navigateurs soient capables d’afficher de la 3D de façon aussi performante que les applications. Ceci étant valable pour les navigateurs sur votre ordinateur, mais également sur votre smarpthone ou tablette. Illustration avec cette vidéo de démonstration de WebCL par Samsung :

Toutes ces nouvelles spécifications et portages convergent vers un seul objectif : démocratiser la 3D et la rendre accessible au plus grand nombre au travers des navigateurs web, quel que soit le terminal utilisé. Qui s’en plaindra ?

Adobe et Google en désaccord sur les techniques de mise en page avancée

Saviez-vous que les feuilles de styles (Cascading Style Sheets en anglais) ont été lancées en 1997 ? La normalisation de cette technologie par le W3C a permis de dissocier la présentation du contenu et sortir le web design de l’âge de pierre. L’intérêt des feuilles de style a notamment été démontré avec des initiatives communautaires comme le CSS Zen Garden. Mais les choses se sont vraiment accélérées avec l’arrivée de la troisième version des feuilles de styles (CSS3) qui permettent notamment de faire des transitions, des arrondis, ombres protées et surtout de choisir sa propre police (CSS @ Ten: The Next Big Thing).

Les dernières évolutions en date concernent la possibilité de définir des formes pour des éléments (Creating Non-Rectangular Layouts with CSS Shapes et Animating CSS Shapes with CSS Animations & Transitions) et de définir des conteneurs pour figer une mise en page (Killer Responsive Layouts With CSS Regions).

Pouvoir faire des mises en page aussi sophistiquée et rigoureuse que sur les magazines est un vieux rêve pour nombreux designeurs. Adobe a toujours été moteur pour promouvoir les techniques avancées de mise en page, notamment avec sa politique de soutien. Ils sont donc naturellement aujourd’hui les plus gros promoteurs des CSS Shapes et CSS Regions. Ils ont à ce sujet présenté une très belle démonstration technique, Alice in Wonderland, faisant un usage malin de ces techniques de mise en page pour scénariser le texte.

Alice in Wonderland réalisé avec les CSS Regions
Alice in Wonderland réalisé avec les CSS Regions

Le résultat est tout simplement bluffant, mais nécessite un navigateur très récent et une petite manipulation : Using CSS Shapes to  Enhance Visual Storytelling. Cette réalisation est d’autant plus intéressante qu’elle vient d’un studio français (Alice au Pays d’Adobe, un conte interactif). Tous les détails techniques sont ici : Cutting edge web development with CSS Shapes and CSS Regions

Il est important de préciser que cette réalisation est une étape très importante dans le travail de lobbying mené par Adobe pour faire accepter ces spécifications par le W3C (Adobe issues CSS Web publishing prototype et CSS3 regions: Rich page layout with HTML and CSS3).

CSS-Regions-1

Le problème est que, dans leur philosophie, les CSS Regions sont en désaccord avec la notion essentielle de flux de contenu (en contraignant des portions de contenu dans des zones particulières, vous figez la page). Håkon Wium Lie, l’inventeur des CSS et directeur technique de Opera, a ainsi publié un long article pour en dénoncer les limitations : CSS Regions Considered Harmful. Ses principaux arguments sont les suivants : les CSS Regions alourdissent le code avec des balises de présentation (le retour des DIVs) et perturbent le défilement naturel du texte.

Confusing-text-flow

Ne vous y trompez pas : l’auteur n’est pas hermétique au changement, il craint seulement que ces nouvelles propriétés CSS soient utilisées à tort et nous renvoient à une époque sombre où les bidouillages de mise en page étaient légion. Du coup, d’autres designeurs argumentent à leur tour en faveur des CSS Regions et plaident pour une plus grande liberté de choix dans les possibilités de mise en page : CSS Regions Matter.

Je dois bien vous avouer avoir beaucoup de mal à me faire un avis tranché sur la question : d’un côté je suis un grand fan de la scénarisation des contenus (HTML5 donne de la profondeur à la narration) ; d’un autre côté, il nous faut IMPÉRATIVEMENT simplifier et normaliser la syntaxe des pages HTML pour en faciliter la diffusion sur les terminaux alternatifs.

Coup de théâtre le mois dernier, car Google vient d’annoncer que les CSS Regions ne seront pas supportées par le moteur de rendu de Chrome : Google plans to dump Adobe CSS tech to make Blink fast, not rich. Pour mémoire, les navigateurs utilisent tous des moteurs de rendu différents pour interpréter le code HTML / CSS et afficher les pages web (Blink pour Chrome, Webkit pour Safari, Gecko pour Firefox…). Chrome étant un des navigateurs les plus populaires, c’est donc un très gros coup dur pour les CSS Regions. La raison invoquée par Google est qu’ils ne veulent pas sacrifier les performances de leur moteur de rendu.

Ceci étant dit, l’histoire de l’évolution des technologies web est ponctuée de revers de ce style. Les CSS Regions ne sont donc pas enterrées, mais leurs spécifications vont très certainement être revues et discutées jusqu’à être acceptées par les différents éditeurs de navigateur.

Affaire à suivre…