+- 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 : Faire de la 3D avec canvas 2D (/showthread.php?tid=7011)
RE: Faire de la 3D avec canvas 2D - sclabet - 10-07-2013
gg beau cursus
j'ai cherché dans le WC3 et je n'ai rien trouvé non plus qui fasse avancer le smilblik avec canvas 2D
RE: Faire de la 3D avec canvas 2D - Aleskweb - 14-07-2013
Merci pour vos reponses, meme si c'est sans solution, cela reste tout de meme interessant.
Si nous n'utilisons que de la perspective selon un seul point de fuite, y aurait t'il une fonction canvas 2D qui conviendrait?
RE: Faire de la 3D avec canvas 2D - Xenos - 14-07-2013
Il suffit qu'il existe un point de fuite pour qu'il n'y ait aucune solution avec les fonctions natives de canvas 2D.
Donc, non.
RE: Faire de la 3D avec canvas 2D - Aleskweb - 14-07-2013
C'est bien ce que j'avais cru comprendre.
En revanche, meme si la fonction setTransform ne permet pas de transformer un rectangle en trapèze, la methode un peu barbare peut le faire
https://c9.io/thetrope/projectcard/workspace/test/test1.html
Nous utilisons d'ailleurs une fonction sans comprendre entièrement son fonctionnement, si vous pouviez nous eclairer :
Code :
fonction keystoneAndDisplayImageH(ctx, img, scalingFactor, numSlices) {
var h = img.height, w = img.width,
// how much should every slice be scaled in width?
widthScale = (1 - scalingFactor) / numSlices;
// height of each slice
sliceHeight = h / numSlices;
// iterate over all slices
for (var n = 0; n < numSlices; n++) {
// source - where to take the slices from
var sx = 0,
sy = sliceHeight * n,
sWidth = w,
sHeight = sliceHeight;
// destination - where to draw the new slices
var dx = (w * widthScale * (numSlices - n)) / 2,
dy = sliceHeight * n,
dWidth = w * (1 - (widthScale * (numSlices - n))),
dHeight = sliceHeight;
ctx.drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
}
}Merci
RE: Faire de la 3D avec canvas 2D - Xenos - 14-07-2013
Au vu du code, l'image est découpée en tranches. Chaque tranche a sa propre largeur, créant ainsi un effet de trapèze.
Pour en faire de la 3D, cela va être lourd... très lourd! D'autant que tout ce qui concerne les filtrages, du peux faire une crois dessus... Ca sera un point sampling très lourd:
![[Image: pic06.jpg]](http://www.erenumerique.fr/images/3d/20040609/pic06.jpg)
A ce compte là, ce serait presque plus rentable de faire du raytracing pixel à pixel (c'est peut-être tout aussi lourd, mais t'auras des effets mieux fichus).
RE: Faire de la 3D avec canvas 2D - Aleskweb - 14-07-2013
En fait on l'utiliserait dans un jeu de carte constitué d'un plateau et de cartes ( jusque la, normal).
En gros de ce style : http://www.backtothegeek.com/wp-content/uploads/2012/12/might-and-magic-duel-of-champions-ubisoft-free-to-play-mise-a-jour.jpg
Je ne suis meme pas sur qu'ils utilisent de la vraie 3D, on voit bien un point de fuite situé au milieu et au dessus du plateau.
Il y aurait peu d'animations (une a la fois).
Mais dans tous les cas une fois toutes les cartes posées, il est possible que le rendu devienne lourd en effet.
En revanche utiliser un environnement 3D pour en exploiter qu'une infime partie (juste la vue en perspective, rotations et translations de cartes) serait lourd pour pas grand chose non?
RE: Faire de la 3D avec canvas 2D - Xenos - 14-07-2013
Citation :un environnement 3D pour en exploiter qu'une infime partie (juste la vue en perspective, rotations et translations de cartes)PRS (Position Rotation Scale), c'est quasiment toute la 3D :p
Ici, il n'y a pas forcément un point de fuite. On peut avoir N colonnes de cartes, de largeur fixe (donc, les cartes sont des parallélogrammes et non des trapèzes), et l'ensemble des colonnes se croise assez loin, dans une "zone" de fuite. Il n'y a alors pas de vraie perspective.
RE: Faire de la 3D avec canvas 2D - Aleskweb - 14-07-2013
Oui c'est de la 3D mais limitée a un seul plan a chaque fois. On dira que c'est du ultra low poly x)
En mesurant, il y a bien un point de fuite j'ai l'impression. Les emplacements du milieu sont des trapezes et meme, toutes les cartes ont leur coté inférieur plus grand que lueur coté supérieur. Aussi les cartes en haut sont plus petites que celles du bas.
RE: Faire de la 3D avec canvas 2D - Xenos - 14-07-2013
L'image de base de la carte peut très bien être un trapèze
avec de la transparence là où il y a un "trou" dans l'image.
RE: Faire de la 3D avec canvas 2D - Aleskweb - 14-07-2013
J'y ai pensé en effet, mais lors des translations de cartes, leurs perspectives changent. De plus lors du survol de la souris les emplacements s'eclairent, ils ne sont donc pas une image fixe du plateau.
Serait-il envisageable de faire le jeu en 2D puis de faire le rendu en trapèze avec la fonction que j'ai postée plus haut? Ou comme tu l'as dit ce serait trop lourd?
Merci encore