Il y a quelques jours je vous parlais de WebGL qui permet de gérer nativement la 3D au sein d’un navigateur en se basant sur les balises canvas (Voir ici) et de son intégration dans la version de dev de Webkit .
Et aujourd’hui c’est au tour de Firefox de l’intégrer dans sa dernière Nightly Build!
Bon j’ espère vous dire la même chose pour internet explorer dans quelques jours…mais sincèrement je n’y crois pas…
WebGL vient d’être intégré au moteur de rendu Webkit (en version de Dev) qui est utilisé par Safari, Chrome ou en encore par l’Iphone, cette techno permet de gérer nativement la 3D au sein d’un navigateur, elle se base sur la nouvelle balise <canvas> (HTML5) et utilise OpenGL pour gérer la 3D.
Voici un exemple de code : http://trac.webkit.org/browser/trunk/WebCore/manual-tests/webgl/Earth.html?rev=48330
Et voici une vidéo de démonstration du rendu :
Pixastic est une librairie Javascript qui vous permet d’appliquer des filtres sur les images de votre page d’un simple clic et sans passer par un script PHP!
Pixastic exploite les nouvelles possibilités de dessin ( canvas) implémenté dans HTML5, elle n’est donc supportée que par les navigateurs suivants : Firefox, Opera , Safari et les dernières versions de WebKit. Mais cette liste devrait vite s’agrandir…
Voici toutes les possibilités(in english) qu’offre cette librairie de traitement d’ image :
Pixastic - Librairie Javascript de traitement d' image
Pixastic possède son plugin Jquery !
Exemple de Code avec Jquery :
1 2 3 4 5 6 7 8 9 10 | // invert the image with id="prettyface" $("#prettyface").pixastic("invert"); // convert all images with class="photo" to greyscale $(".photo").pixastic("desaturate"); // chained blur and a regional emboss, see image further down $("#myimage") .pixastic("blurfast", {amount:0.2}) .pixastic("emboss", {direction:"topleft", rect:{left:50,top:50,width:150,height:150}}); |
Pour télécharger la librairie rendez-vous ici.
Vous pouvez aussi la tester sur le Pixastic editor!
Amusez-vous bien!
