Poliedros en WebGL



Prospección

Dos fuentes que utilicé para contextualizarme fueron Phi and Geometry y Phi in Sacred Solids. La obtención de las coordenadas de cada punto está relacionada con proporciones del denominado Número Dorado o Phi: (1 + sqrt(5))/2

Otra fuente importante para la obtención de los puntos fue un proyecto de poliedros (Polyhedrons) en OpenProcessing.

Obtención de puntos

En hojas de Excel reproduje el algoritmo de Polyhedrons para calcular las coordenadas de los vértices, y para hallar las aristas contando con el hecho de que 1 punto solo se une con aquellos que se tenga la más mínima distancia.
















Para el caso de los polígonos del dodecaedro hubo que realizarse un paso adicional para subdividir los pentágonos en triángulos:





















Icosaedro - Aristas
https://jsfiddle.net/lb18/d3h2x65c/4/

Dodecaedro - Aristas
https://jsfiddle.net/lb18/72xdsxhq/4/

Icosaedro truncado - Aristas
https://jsfiddle.net/lb18/8orgL10n/5/

Icosaedro - Polígonos
https://jsfiddle.net/lb18/ntwuq87m/9/

Dodecaedro - Polígonos
https://jsfiddle.net/lb18/6g4ua81x/3/

Comentarios

Publicar un comentario

Entradas populares de este blog

Animación

Imagen
https://jsfiddle.net/lb18/qpge1aj0/3/ Modificación a partir de ejemplo en demos de WebGL . De su código fueron tomados: 1 de los objetos de "nave espacial" que inicialmente hacía una traslación lineal, y la rutina usada para mover la cámara fue adaptada esta vez para mover el objeto (la cual ya tenía incluido un esquema basado en interpolación lineal). El objeto fue recortado a la mitad para satisfacer el requisito de asimetría en el enunciado del ejercicio. Para mover el objeto se emplearon los métodos translate() y rotate() incluidos en el Model View, y se hicieron 2 modificaciones en el array  movimientos (tomada de  camTracks ) en donde se introdujeron 1 eje adicional de rotación (para un total de 3) y se cambió el significado de dest  que ahora pasa a estar en coordenadas absolutas de mundo, con lo cual se facilitó la labor de codificación de los movimientos. Por último, se tomó una de las posiciones de cámara en  camTracks  y se modificó para que é...
Leer más

Proyecto Final - Entrega 3

Imagen
Demo Src Sprint 3  Agregada textura por omisión "ladrillo" para la mayoría de los objetos, y 3 texturas adicionales para las sillas, columnas cilíndricas y espejo de agua. Para diferenciar la carga de cada textura, se empleó una variable adicional "textura" en el array respectivo.  Para la iluminación se elaboró un shader que genera 1 iluminación direccional, y point lights repartidos en 3 puntos de "túnel", donde podía aprovecharse el efecto de claroscuro. Para introducir las coordenadas de los point lights hacia el shader, se utilizó un mat3 al que luego le fue leida cada columna, a modo de vec3 (lo ideal hubiera sido un array de vec3, pero glsl no permitía crear un uniform así). Cada objeto utiliza únicamente uno de los 2 shaders disponibles. De forma similar que con las texturas, se estableció una iluminación por omisión (direccional) para la mayoría de los objetos, mientras que mediante configuración en el array de nor...
Leer más

Ejemplos básicos en WebGL y Processing

Imagen
A continuación son mostrados, además del caso requerido en el planteamiento inicial acerca de un entorno diferente a WebGL (en este caso, Processing) he agregado también un segundo caso en WebGL. Uno de los objetivos perseguidos en este ejercicio es hacer funcionar cada uno de estos casos de manera offline (y sin el uso de servidores web en localhost, para facilitarle las cosas a un usuario no técnico). Como se vera en las líneas siguientes, esto constituye un desafío interesante porque el guardado a disco duro que usualmente realizan los navegadores web sólo tienen en cuenta los archivos referenciados en los HTMLs, y no tienen en cuenta los recursos llamados desde archivos JS o CSS. Para poder establecer una comparación entre WebGL y Processing, y puesto que no tengo experiencia manejando código en WebGL (aunque sí he tenido un poco más de práctica con OpenGL y esperaría encontrar alguna semejanza en su derivado dirigido a la Web), me vi en la necesidad de abordar este segundo caso ...
Leer más