Author Topic: MINAMI DISTRICT / ribbon  (Read 2997 times)

0 Members and 1 Guest are viewing this topic.

Offline p01

  • Base
    • Pouet.net
    • View Profile
  • Ancienneté: 1988
  • Groupe: ribbon
  • Rôle: code, gfx
  • Ville: Oslo, Norway
MINAMI DISTRICT / ribbon
« on: 17 July 2013 à 21:24:55 »
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.

Offline phaazon

Re : MINAMI DISTRICT / ribbon
« Reply #1 on: 18 July 2013 à 11:22:13 »
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 :)

Offline wullon

  • Base
    • Pouet.net
    • Coup de coeur
    • Slengpung
    • View Profile
    • wullon homepage
  • Ancienneté: 2006
  • Groupe: Adinpsz
  • Rôle: orga/zik/design
  • Ville: Paris
Re : MINAMI DISTRICT / ribbon
« Reply #2 on: 20 July 2013 à 15:32:21 »
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.

Offline ponce

Re : MINAMI DISTRICT / ribbon
« Reply #3 on: 20 July 2013 à 16:07:24 »
Je ne peux pas résister au plaisir de tester la balise iframe :p

[iframe width=640 height=360]http://www.p01.org/releases/MINAMI_DISTRICT/MINAMI_DISTRICT.unpacked.htm[/iframe]
« Last Edit: 20 July 2013 à 17:51:44 by ponce »

Offline phaazon

Re : MINAMI DISTRICT / ribbon
« Reply #4 on: 20 July 2013 à 23:00:01 »
Même si je trouve cette iframe useless, ça tue ! :D

Offline kaneel

  • Base
    • Pouet.net
    • View Profile
  • Ancienneté: 2000
  • Groupe: TPOLM
Re : MINAMI DISTRICT / ribbon
« Reply #5 on: 21 July 2013 à 13:05:38 »
p01 massive weapons.