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 DOM en 60 FPS avec HTML GL
Pour améliorer la rapidité graphique des applications et jeux

Le , par yahiko

0PARTAGES


S'il y a bien un module du navigateur qui fait horreur aux développeurs de jeux vidéos en ligne, c'est bien le DOM jugé lent voire même très lent au regard des exigences de rafraîchissement dont la cible idéale est actuellement de 60 FPS, correspondant à la fréquence de rafraîchissement de la plupart des écrans.

Jusqu'à présent, les animations se réalisent en général au sein d'un environnement bitmap (canvas) où le développeur perd la principale force du DOM, à savoir sa capacité à identifier, sélectionner et manipuler les éléments de la vue.

Cela pourrait peut-être changer avec un Web Component du nom de HTML GL dont le principe est de créer une couche applicative entre le DOM et le rendu WebGL permettant ainsi l'accélération graphique matérielle et l'utilisation de toute la panoplie des effets graphiques (shaders compris bien entendu). Ceci tout en permettant aux objets graphiques affichés d'être accessibles individuellement par des requêtes classiques sur le DOM (par exemple via getElementById() ou le framework jQuery)

L'utilisation de ce composant dans une page HTML est très simple, comme le montre l'exemple ci-dessous :
Code : Sélectionner tout
1
2
3
4
5
<html-gl>
    This element`s content is rendered in <h1>WebGL</h1>
    <span style="color: green;">was it easy?</span>
    Feel free to use CSS, images and all you are common to in HTML/CSS world.
</html-gl>
Côté JavaScript, les éléments rendus par le composant sont facilement accessibles via jQuery par exemple :
Code : Sélectionner tout
$('.some div').htmlgl();
Au final, ce composant permettrait d'atteindre à la fois des performances de 60 FPS y compris sur des animations complexes, tout en bénéficiant des avantages du DOM.

source : Dépôt GitHub

Et vous ?
Cette solution est-elle un progrès ?
Pensez-vous l'essayer prochainement ?

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