Auteur Sujet: MINAMI DISTRICT / ribbon  (Lu 2078 fois)

0 Membres et 1 Invité sur ce sujet

Voici ma derniere 1k en Javascript, pour DemoJS 2013



Pouet : http://pouet.net/prod.php?which=61496
En ligne : http://www.p01.org/releases/MINAMI_DISTRICT/MINAMI_DISTRICT.unpacked.htm

Avril 2013, j'ai commencé à cogiter à propos de DemoJS 2013, je voullais faire une scene "realiste" en 3D, qqc de jamais vu dans une demo. Aprés un peu de recherche je suis tombé sur des photos et concepts de gratte ciels tournant. Bingo!

Aprés il fallait trouver LA méthode pour afficher ca:
* en particules, il en fallait ~40.000 pour avoic qqc de potable ( Matraka en a 2.560 ). Comment les afficher ? position:absolute, CSS translate 2D, CSS 3D transforms, CSS 3D transform + animations, Canvas 2D. Nope. Super souple, mais bien trop lent.
* En affichant des lignes ( une par etage ), même histoire. Pas assez rapide.
* Avec des polygones et texture generée en JS, trop gros.
* Avec des polygones et CSS gradient.... mmmh pas assez souple.
* Canvas 2D en polygone flat, un peu gros mais assez souple et bien rapide.

Ensuite il a fallut optimizer, ajuster les couleurs, la trajectoire de la camera, rendre les building semi-transparents, ...

Au finale il y a une grille de 32x32 grate ciels, tournés et triés en 3D, ensuite je construit et affiche les etages de chaque grate ciel. Pour le tri des faces, pour chaque etage, je tourne autour du centre du grate ciel et calcule ( rotation et projection ) CINQ vertex. Une fois le premier vertex generé, je compare le X projeté du vertex courant et precedent. Si la difference est possitive, ca veut dire que cette face est tournée vers la camera.

Et la musique dans tout ca ? J'ais essayé, mais il fallait au moins 300 octets et les graphismes aurraient trop souffert :( C'est pas facile de faire un JS1k.


Voilà, j'espere que MINAMI DISTRICT vous plait. C'était sympa de travailler sur cette prod, j'ai pu essayé des tonnes de methodes et pousser un petit peu le schmilblick du rendu 3D "classique" dans les JS1k.

J’aime bien. Le seul truc qui m’a géné quand je t’ai vu la projeter, c’est l’espace de décrochage qui arrive souvent à gauche et qui impacte l’éclairage. Sinon c’est bien sympa oui :)

Visuellement excellent.

Dommage qu'il n'y ait pas eu une petite place pour la musique (même un son d'ambience), parce que du coup l'impact est moindre compararé à MATRAKA.


Même si je trouve cette iframe useless, ça tue ! :D