Safari : les effets de Cooliris sans Cooliris

Florian Innocente |
Cela ressemble aux animations produites par le plug-in Cooliris dans Safari mais dans le cas présent, point de Cooliris à l'oeuvre - ni de Flash - uniquement le moteur de Safari. Snow Stack est une démo qui s'appuie uniquement sur de l'HTML, du JavaScript et des effets permis par le WebKit du navigateur d'Apple.

On peut tester soi-même cette animation - Snow Stack - avec le Safari de Leopard, toutefois elle fonctionne beaucoup mieux et en montrant plus d'effets avec les dernières versions de développement du WebKit, téléchargeables ici. Les déplacements se font avec les touches fléchées du clavier et la barre d'espace pour zoomer dans le mur. Les utilisateurs de Snow Leopard peuvent s'en tenir à la version de Safari incluse avec la bêta de l'OS.

CSS 3D Transforms, cette extension aux feuilles de style qui autorise ces acrobaties graphiques a été soumise en mars dernier par Apple au W3C avec l'espoir de la voir normalisée et adoptée par les autres navigateurs.


Tags
avatar Axelvak | 
Ça prends pas mal de processeur mine de rien…
avatar Un Vrai Type | 
TOP => Safari : 100.8% Comme flash en gros... :) TOP => webkit (qui est aussi Safari dedans mais bon...) : 39.7% Ho ! Wache !!! Ils l'ont dopé à quoi ? En plus il y a le recalcul pour l'effet mur ! Impressionnant ! (Ce sont des moyennes constatées)
avatar Axelvak | 
Avec Webkit, je tourne plus entre 60 et 80%.
avatar Hak | 
Sur Safari 4 Leopard, l'effet est limité puisque les effets de 3D ne sont pas présents et pas d'effet de zoom dynamiques sur les photos selectionées. Il n'y a que les animations horizontales sans changement de perspective, en plus on peut noter quelques bugs dans le rendu lorsqu'une photo est selectionée avec la barre d'espace. Le fait que Safari 4 Leopard tourne à 100% est dû au non support de l'accélération matérielle des effets contrairement à la nighty build de webkit. Avec la dernière nighty, r45855, sur un macbook pro avec un Core2Duo 2.4 ghz et une GeForce 8600 GT, ça tourne au alentour de 15-40% en fonction de la vitesse à laquelle on navigue dans les photos. Fantastiquement plus rapide que flash sur la même configuration!! La news de macgénération ne mentionne pas que le support est complet dans la version de Safari 4 dans Snow Leopard, la démo y est d'ailleurs plus rapide que la nighty de webkit sur Leopard. Sur Snow Leopard avec Safari 4, la démo consomme rarement plus de 20-30% d'usage CPU.
avatar jodido | 
Avec safari c'est possible d'avoir le même résultat? parce que moi les flèches + zoom ne me met pas les photos de travers comme sur la vidéo
avatar Hak | 
@jodido Non pas sur Safari avec Leopard. Seulement webkit.
avatar CocoaPower | 
La démo est sympa mais c'est catastrophique question performance. Ce genre d'interface est plus appropriée pour Cocoa+Core animation ou Qt, dans Safari le framerate est ridicule et le CPU en prend pour son grade.
avatar Axelvak | 
Avec la dernière mise à jour de Webkit, la conso CPU oscille entre 20 et 40%. Du bonheur.
avatar hawker | 
c'est encore plus beau que cooliris, pas de compte a avoir, pas de flash (youhou): - ça doit impérativement etre d'origine dans la prochaine version 4.1 ! par contre (je m'y connais moyen en programmation mais c'est la qu'il va falloir intégrer du open gl pour réduire la conso cpu au mega minimum).
avatar Nicolas_D | 
Quel est l'intérêt pour Apple de standardiser ce genre de "progrès" ? Ils deviennent philanthropes ou ils s'assurent de la propagation de WebKit et par extension celle de Safari ?
avatar CocoaPower | 
[quote]Quel est l'intérêt pour Apple de standardiser ce genre de "progrès" ? Ils deviennent philanthropes ou ils s'assurent de la propagation de WebKit et par extension celle de Safari ?[/quote] Webkit a des parts de marché ridicules. Pour qu'une technologie web se répande, il faut absolument qu'elle soit sur Firefox. Standardisation des technologies->Firefox les implémentes->les dev webs les utilisent->Apple peut se vanter d'avoir un truc de plus que Microsoft ne fait pas.
avatar Arnaud de la Grandière | 
Le même développeur a également réalisé un simili coverflow avec les mêmes outils: http://css-vfx.googlecode.com/svn/trunk/examples/zflow.html
avatar nlex | 
Mais est-ce que ça pourrait marcher sur Safari pour Windows ??
avatar oomu | 
"Quel est l'intérêt pour Apple de standardiser ce genre de "progrès" ? Ils deviennent philanthropes ou ils s'assurent de la propagation de WebKit et par extension celle de Safari ? " pareil que pour Mpeg 4 (auquel ils ont contribué des composants clés de quicktime) ou zeroconfig ou LLVM etc, Apple ne vend pas de la technologie mais des machines et des applications. Alors, quand est ce qu'apple donne des "technologies" ? quand ils veulent couper les dépendances à un produit d'un concurrent qui gène le macintosh (et iphone etc) par exemple Flash de Adobe. C'est un boulet. Donc Apple contribue tout ce qui peut permettre à l'industrie de se débarrasser de Flash. que cela soit la vidéo dans le navigateur, le streaming http facile, la 3D standardisée etc - pour mpeg, apple a contribué à limiter l'impact de WMV sur le successeur du dvd - Ce qui est bon pour la vente de Macintosh c'est d'éviter toute techno qui n'existe que sur PC/windows ou qui est trop optimisée pour. - OpenCL est un moyen de se réapproprier des travaux comme Cuda - au final, zeroconfig, opencl, webkit et tout le reste, ca permet à apple de faire des applications plus jolies, un os plus intéressant sans se couper du reste de l'industrie. en effet, si y avait pas un minimum de standardisation avec le reste, les utilisateurs mac ne pourraient pas vraiment profiter de ces avancées, car aucun industriel ne les mettraient en pratique. On reviendrait à la situation de Mac os 9. Donc, apple fait un équilibre, certes, en poussant la standardisation apple perd un peu la primeur d'une évolution technologique, mais d'un autre coté, leur business c'est de vendre des Macintosh, et si la technologie est meilleure, Apple peut construire de meilleures appli mac, si possible avant les autres ! - Google a le même comportement. Faisant avancer l'industrie pour être subitement le premier à pondre un site innovant et utile - Il est important pour apple qu'une technologie soit un minimum utilisée par l'industrie
avatar marc_os | 
@ nlex : Pour que "ça marche", il faut la dernière version du Webkit. Pour sa prochaine version de Safari pour Windows, je doute qu'Apple s'amuse à le livrer avec une ancienne version du Webkit. Donc amha, je pense qu'il est plus que probable que sa marchera aussi avec Safari pour Windows. De plus, on trouve quelques navigateurs basés sur le Webkit, dont : - Entourage personal information manager 2008 de Microsoft (!) - [b]Chrome[/b] (Google !) - etc. cf. [url=http://en.wikipedia.org/wiki/WebKit]ici[/url] Donc si Chrome s'y met, je doute que Firefox ne tarde...
avatar oomu | 
clairement impressionnant webkit sur macpro. la charge cpu fond par rapport à la même chose sans webkit. et ce n'est qu'une version de travail, loin d'être un produit final.
avatar Nicolas_D | 
@ tous : merci pour les explications.
avatar Psylo | 
Rassurez moi. Apple c'est pas la boite qui emmerde les autres boites à coup de brevets et de procès dès que quelqu'un implémente certaines de ses idées ? J'espère que Cooliris a déposé un bon brevet bien vicelards...
avatar lennoyl | 
Psylo : Ce n'est pas Apple qui a fait ce mur d'images. C'est juste un webmaster qui a utilisé les nouveaux outils web fournis par Apple. Si ton voisin construit une maison qui est la copie exacte de la tienne, tu ne vas pas le reprocher à son vendeur de matériaux.
avatar daito | 
Je crois que Psylo n'a rien compris. Le but de ce développeur (pas Apple) était justement de reproduire en mieux l'interface 3D que l'on retrouve avec le PLUGIN Cooliris mais en utilisant de nouveaux outils et spécifications du Webkit d'Apple!
avatar Anonyme (non vérifié) | 
Tourne entre 20 et 40% sur webkit en utilisation tranquille, mais ça atteint facile 80 à 100% quand je parcours les images comme un bourrin... Je ne vois pas le reel interet même si c'est sympa, on est pas encore arrivé à du core animation version web.
avatar Anonyme (non vérifié) | 
Nicolas_D Passer en standard permet aussi de capitaliser sur ce qui a été fait en évitant qu'un autre standard équivalent n'émerge, puis devoir perdre du temps à se mettre en règle avec ce standard... et de devoir en plus se trainer une batterie de fonctionnalités dépréciées, par respect pour ceux qui les ont utilisées dès le début. CocoaPower "Ce genre d'interface est plus appropriée pour Cocoa+Core animation ou Qt, dans Safari le framerate est ridicule et le CPU en prend pour son grade." J'ai un framerate très correct avec un MacBook de 2007, et une puce GMA950 de daube, le tout dans une fenêtre maximisée sur l'écran externe Full HD. La consommation CPU est en général en-dessous de 20% avec des pics à 50 et quelques. "Webkit a des parts de marché ridicules. Pour qu'une technologie web se répande, il faut absolument qu'elle soit sur Firefox." Ah ah ah ! On s'en fout complètement de Firefox, c'est un navigateur qui n'a pas beaucoup d'influence. Ceux qui en ont c'est IE pour le desktop, car c'est le plus pourri et qu'on doit s'y adapter, et... Safari mobile qui n'a aucun concurrent sur les iPod et iPhone. Firefox n'ayant aucun monopole, on ne peut jamais vraiment exploiter ses particulaités, au mieux peut-on optimiser des bibliothèques cross-browser comme jQuery. Mais personne ne fera jamais un site web réservé à Firefox (à moins de parler spécifiquement de Firefox). Alors que de la webapp iPhone, tu en as déjà pas mal et ça devrait augmenter, surtout avec Android en renfort (et son essor prochain quasi-certain). Je me suis mis à faire quelques Webapps iPhone ces derniers temps, et tout passe avec l'émulateur Android de Google. Comme Fennec ne sera sans doute jamais le navigateur par défaut d'Android, iPhone OS, Blackberry, Symbian ou Windows Mobile, on ne pourra jamais se servir de ses spécificités non plus. Bref, l'avenir de Gecko est plutôt sombre, à mon avis.
avatar SteveGates | 
@hawker: c'est encore plus beau que cooliris Tu plaisantes là hein?
avatar moofl | 
moi je dis : la grande classe. Bon c'est vrai que je l'ai testé avec un macbook pro 2009 / 4Go de ram... le framerate est surement supérieur que sur un plus vieille machine mais top (au passage, c'est bien d'expliquer : lancer la commande "top" dans un terminal : terminal = spotlight et mot clé terminal) me donne 50 - 60% de ressources... mais au delà des considérations techniques stériles (à mon sens) : c'est une superbe avancée. On ne parle de Flash ou de silverlight ou d'un plugin tiers... on parle d'une futur (j'espère !) standardisation des directives CSS ! C'est à dire une standartisation adoptée par NOS futurs navigateurs ! Je suis sur qu'il y a 5 ans quand on parlait d'Ajax (au passage qui est utilisé par beaucoup des sites en vogues), beaucoup de personne n'y trouvais aucun intéret. Y compris mon chef de l'époque (je suis ingé dev java/php/et-le-reste) me disait que c'était une bricole qui ne servait à rien et qui ne marchait que sur de rare navigateurs (IE6 :-), firefox, ...). Je suis pour ce genre de standardisation, ça ne pourra que donner que de bonnes idées et comme dit plus haut, ça nous (developpeurs/surfeurs) permettra de nous affranchir de ces plugins ou autres technos "propriétaires" certe très sympas visuellement, mais très pénibles car ciblées sur certaines architectures (Windows + IE 6, etc...)

CONNEXION UTILISATEUR