Ejercicio 4: Un movil
El ejercicio
Para este ejercicio, se requiere crear una representación en WebGL de un movil como el mostrado en la siguiente imagen:
Para esto, primero realizare un modelo en Blender de un movil tomando el anterior como referencia. Exportaremos este modelo en formato .fbx y usando una herramienta lo convertiremos en json. Por ultimo, este json sera pareseado en javascript para realizar la representación de WebGL.
El modelo
Comos se menciono anteriormente, utilizaremos Blender para realizar el modelo del movil. Teniendo en cuenta las limitaciones de WebGL, se usaron las primitivas declindro con solo 6 lados, y una esfera de baja resoluciòn para crear una versiòn simplificada del movil. El uso de estas primitivas nos reduce el numero de vertices a tener en cuenta.
Con ayuda, de la herramienta de pintura de blender, cree una textura muy pintoresca para el movil:
El modelo se exporto en formato .fbx, y la textura en formato .png. Despues, utilize la herramienta assimp2json, para convertir el FBX en un modelo en formato json, el cual va a ser cargado por el programa.
La aplicación
Para el programa, tome como base este proyecto, en el cual cargan un objeto en formato json y una textura y la despliegan en el canvas. El objeto en formato json tiene una estructura definida. En su nodo base hay un arreglo de objetos o meshes. Dentro de cada objeto, hay arreglos que contienen las coordenadas de todos sus vertices, el arreglo de indices y el arreglo de las coordenadas de la textura. En nuestro caso solo hay un objeto en el modelo, por lo cual podemos obtener los arreglos de la siguiente forma:
var movilVertices = MovilModel.meshes[0].vertices;
var movilIndices = [].concat.apply([], MovilModel.meshes[0].faces);
var movilTexCoords = MovilModel.meshes[0].texturecoords[0];
Posteriormente, creamos los buffers y los conectamos con el contexto como de costumbre. En este caso, los shaders a usar se encuentran en archivos separados, pero esto es solo por comodidad. Por ultimo, se realizan las tranformaciones de la vista de la camara, y se crea un loop para realizar el despliegue y la rotación del modelo.
Resultado final
Un demo del ejercicio se puede ver en este enlace, ademas se puede ver el codigo fuente aqui.
Tiempo dedicado
Para este ejercicio, habia planeado un tiempo de 3 horas.
Sin embargo me tomo alrededor de dos horas completar el ejercicio, con ayuda de las referencias que tome.