[Optimisation] updateTransform - Version imprimable +- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org) +-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38) +--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51) +--- Sujet : [Optimisation] updateTransform (/showthread.php?tid=3972) |
[Optimisation] updateTransform - Aleskweb - 04-05-2014 Bonjour, Avec l'aide d'un ami, nous essayons actuellement de "simuler" un plan texturé en 3D sur pixi.js. Puisque la perspective n'est pas possible, nous avons fait de la transformation affine d'images. Pour cela, nous découpons un plan en n*n morceaux, chacun de ces morceaux sont constitués de 2 triangles. Chaque triangle est un masque permettant d'afficher son morceau du sprite correspondant (déformé). La fonction updateTransform est une fonction de DisplayObject permettant a la base d'afficher un objet en prenant compte de sa rotation. Voici la fonction initiale de pixi.js : Code : PIXI.DisplayObject.prototype.updateTransform = function() Nous avons donc réécrit cette fonction et nous l'avons appliquée a tous les objets concernés (Ici, c'est seulement la fonction pour les triangles inférieurs). Code : scope.sprite[k][l].updateTransform = function(){ Voici une petite demo: http://ks3355883.kimsufi.com/Train3/test2.html (Demo avec une découpe = 8, soit 8² x2 = 128 triangles) Malheureusement, les performances ne sont pas bonnes (fps inferieurs a 60, sur une marchine basique, avec une découpe = 3), y aurait-il un moyen d'optimiser ce code ? Il semblerait que l'utilisation de masques y soit pour beaucoup, mais nous n'avons pas trouvé d'autres moyen pour découper un sprite (De la meme manière que le clip(), de canvas). Merci d'avance Ps: Escusez pour l'indentation, elle est propre sur notepad++ mais ici elle est horrible x) RE: [Optimisation] updateTransform - Aleskweb - 04-05-2014 Voici le lien de l'exemple en zip: http://ks3355883.kimsufi.com/Train3.zip Les web workers sont-ils intéréssants pour ce genre de choses? RE: [Optimisation] updateTransform - Xenos - 05-05-2014 Je n'ai pas envie de plonger dans le code, donc je réponds un peu à coté de la question, sur la base de l'exemple proposé: as-tu envisagé d'utiliser CSS3 plutôt que canvas? La transformation avec l'effet de perspective est une propriété (perspective, perspective-origin et transform) en CSS3 RE: [Optimisation] updateTransform - Aleskweb - 05-05-2014 Merci pour ta réponse Le résultat avec CCS3 est très sympa. (Bien qu'il y ait quelques freezes). Très joli ours soit dit en passant Je n'utilise pas vraiment Canvas, Pixi.js utilise WebGL quand le navigateur le permet, ce qui permet d'avoir "normalement" un résultat très fluide. Dans mon code, je n'utilise Canvas qu'une seule fois, pour redimensionner la texture. Le truc, c'est que, pour découper en triangle, Canvas utilise clip(), alors que l'on n'a pas trouvé d'autre moyen que d'utiliser des masques avec pixi.js (Au final on découpe pas vraiment, on cache ce que l'on ne veut pas). Et je doute que ce soit la meilleure solution. Pour ce qui est de CSS3, notre but et d'utiliser des plans a la fois pour simuler un plateau de jeu, et pour des animations de cartes. Le plateau de jeu pourra etre pivoté dans tous les sens a la souris, et les animations des cartes seront certainement complexes. Penses tu que CSS3 est adapté a ce genre de choses, et sera suffisamment performant? Merci encore RE: [Optimisation] updateTransform - Xenos - 05-05-2014 CSS devait tenir la route, oui, la question sera plutôt de savoir si le DOM HTML pourra suivre. Je te conseille de tester, c'est le mieux à faire Je ne sais pas combien de cases le plateau contient, donc je ne peux pas te dire si cela passera ou pas en CSS. Quand je dis "au lieu de canvas", cela s'applique aussi à WebGL. WebGL n'est que l'API qui s'affiche dans canvas. L'autre API, "2d", fait pareil et s'affiche dans le canvas. Donc, l'API change, mais les deux cas utilisent canvas Un autre atout intéressant sera que les vieux navigateurs afficheront le HTML normal, sans la perspective, les nouveaux afficheront le HTML en perspective. Avec canvas, les vieux navigateurs n'afficheraient rien du tout. Mais bon, par "vieux", j'entends en fait surtout IE<=8... Je ne sais pas si SVG propose ce genre de transformations... faudrait que je regarde (mais de mémoire, je ne crois pas, car seules les transformations affines existent en SVG). RE: [Optimisation] updateTransform - Aleskweb - 05-05-2014 Le plateau sera de 13/7 cases. On va essayer en CSS3, mais ca a l'air plus compliqué de gérer le "monde 3D" derrière, j'entends ici le point d'observation, le plan de projection, et le plan a projeter. D'autant plus que nous comptons projeter nous même le quadrillage pour plus de visibilité. Les pions du plateau seront des Spines (http://esotericsoftware.com) lorsque le plan sera bloqué en position perspective, et des icones planes lorsque le plan sera en mouvement libre. Du fait de l'utilisation des Spines, l'utilisation de canvas sera de toute manière incontournable. Deux solutions sont donc envisageable: -Utiliser CSS3 pour calculer les images en perspective et les récupérer pour les afficher dans le canvas. (Certains utilisent CSS3 pour gerer les feuilles de sprites plutot que Canvas, c'est donc potentiellement intéressant) -Optimiser le code (Pour le moment je n'ai que l'utilisation de workers en tete, ainsi que contourner l'utilisation de masques, peut etre réduire les appels de scope aussi) Pour SVG, il suffirait de faire le même script que le notre, découper en plusieurs petites transformations affines pour donner la perspective. Mais la aussi, il faudrait en plus utiliser Canvas pour afficher les Spines. On va essayer les deux solutions et comparer. Si tu en vois d'autres n'hésites pas Merci encore ! RE: [Optimisation] updateTransform - Xenos - 05-05-2014 13*7 sera parfaitement acceptable Le point d'observation se place par rapport à "perspective-origin" (left/center/right top/center/bottom) et par rapport à la distance verticale (perspective, souvent en px, autres unités CSS acceptés je crois). Pourquoi "projeter nous même pour plus de lisibilité"? La projection CSS fera toujours mieux (ou pareil) que celle faite main, la seule différence sera le design de la chose à projeter. D'ailleurs, pour faire une quadrillage, il suffit d'utiliser les propriétés "border" du CSS, t'y gagneras en temps Pour l'animation, dès l'instant où elle est affichable dans le DOM (en SVG par exemple), elle passera sans soucis. Tu peux aussi utiliser des petits canvas dans la perspective SVG Donc, dans le DOM, il y aurait 13*7 cases (genre table/tr/td), dans chaque case avec un pion, un canvas (pour afficher le pion), et le CSS met la table complète en perspective. Le javascript peut alors servir à changer le point d'observation de la perspective, à tourner la table (plateau), etc. |