jueves, 7 de marzo de 2019

Me encanta Star Fox y haré uno 2.0 (Motor 3D)

Para la elaboración de mi tributo a Star Fox usaré un motor 3D que comenzamos a crear mi hermano y yo desde nuestros primeros pasos en qbasic y que he estado mejorando, ahora en javascript y canvas. Se trata de un motor muy sencillo, y relativamente fácil de implementar.


acá el ejemplo: //jsfiddle.net/cincibeles/z3m9unLj

El motor se puede descargar de acá https://drive.google.com/open?id=1sYR50GyychK0Ng0Ip3YkRabfDqVzqIQC

y básicamente es ta compuesto de cuatro partes.

var lm3d=new Simple_lineM3d(document.getElementById('canvas2d'));

var camera = {
 pos:{x:0, y:0, z:-40},
 ang:{x:0, y:0, z:0},
 distance:0,
 zoom:100
}
var obj = {
 pos:{x:0, y:0, z:0},
 ang:{x:0, y:0, z:0},
 scale:{x:10, y:10, z:10},
 vtx:[
  [-1,-1,-1], [1,-1,-1], [1,-1,1], [-1,-1,1],
  [-1,1,-1], [1,1,-1], [1,1,1], [-1,1,1]
 ],
 lines:[
  [0,1, 1], [1,2, 1], [2,3, 1], [3,0, 1], // techo color 1
  [0,4, 2], [1,5, 2], [2,6, 2], [3,7, 2], // postes color 2
  [4,5, 3], [5,6, 3], [6,7, 3], [7,4, 3] // base color 3
 ]
}

Inicializa el motor y las variables camara y objeto. Como vemos, el objeto indica sus vertices y sus líneas: [vxtA, vtxB, color].

var puntos = lm3d.puntos(
 obj.vtx,
 obj.pos.x,obj.pos.y,obj.pos.z,
 obj.ang.x,obj.ang.y,obj.ang.z,
 obj.scale.x,obj.scale.y,obj.scale.z,
 camera.pos.x,camera.pos.y,camera.pos.z,
 camera.ang.x,camera.ang.y,camera.ang.z,
 camera.distance,
 camera.zoom
)

Calcula la proyección de vertices según un objeto y una cámara dada.

lm3d.dibujar(
 obj.lines,
 puntos
);

Dibuja en en el buffer del data que ya tiene un buffer de z para no preocuparse por el orden.

lm3d.blit([0xaaaaaa,0x0000ff,0x00ff00,0xff0000]);

Pasa todo el buffer al canvas y vacía el buffer. Se le pasa un array con la paleta de colores que usaran las líeneas.


Sencillo, no? ahora, todo lo metemos en un intervalo y vamos cambiando el angúlo de el objeto. Listo.

Como se puede ver, mi FX chip es básicamente este motor 3D, ya solo restaría hacer el juego.

No hay comentarios.:

Publicar un comentario