Entradas

Mostrando las entradas de noviembre, 2019

INTRODUCCIÓN A LA GRAFICACIÓN

¿Qué es la graficación? Podemos definir a este concepto de varias formas distintas, como por ejemplo: La graficación es el arte o ciencia de producir imágenes gráficas con la ayuda de una computadora. O bien, La graficación es una de las áreas más importantes de las ciencias de la comunicación y su principal objetivo es establecer los principios, técnicas y algoritmos para la manipulación de imágenes mediante una computadora. Los gráficos generados pueden ser de distinto nivel de complejidad, es decir, pueden ser bidimensionales (2D) o tridimensionales (3D) donde se requiere producir imágenes de aspecto realista. Importancia de la graficación. Los gráficos por computadora se han convertido en una potente herramienta para la producción rápida y económica de imágenes. De igual manera, los gráficos por computadora son una herramienta versátil que representa una ventaja que puede aplicarse a campos muy diversos, por ejemplo: Los arquitectos util...

PRÁCTICA #1 DE THREE.js

Imagen
En esta primera práctica aprendimos algo muy básico , como lo es el crear el escenario, ajustar la vista de la cámara, establecer colores de fondo, agregar figuras básicas de las cuales ya dispone THREE.js, como lo son en este caso un cubo, un cono, una esfera y un plano, así mismo a aplicarles color y la propiedad " wireframe ".

PRÁCTICA #2 DE THREE.js

Imagen
En esta práctica se siguió trabajando con lo aprendido en la Práctica #1, pero en este caso la idea era agregar un punto al centro de la pantalla, y si, puede que no se note mucho pero justo en el centro de la pantalla se encuentra un pequeño punto de color rojo.

PRÁCTICA #3 DE THREE.js

Imagen
En esta práctica  se siguió trabajando con lo aprendido en la Práctica #1, pero en este caso se agregaron los controles para poder ajustar el zoom, también se agregó luz ambiental y un spotlight para comenzar a trabajar un poco con las sombras de los objetos y se agregó una forma para que al modificar el tamaño de la ventana el contenido de esta se ajuste automáticamente al nuevo tamaño.

PRÁCTICA #4 DE THREE.js

Imagen
En esta práctica  básicamente se copió lo realizado en la Práctica #3, pero en este caso se agregaron los controles para poder rotar los elementos en cualquiera de sus tres ejes con la ayuda del mouse, además, se agregó una vista de las estadísticas de la vista, también se agregó rotación automática al cubo y un efecto de rebote a la esfera, y para controlar la velocidad de rotación del cubo y la velocidad de rebote de la esfera se agregó una ventana con los controles para modificar dichas característica (o en resumen, se agrego animación al cubo y a la esfera).

PRÁCTICA #5 DE THREE.js

Imagen
En esta práctica  se partió de lo realizado en la Práctica #2, pero en este caso se agregaron 2000 puntos distribuidos aleatoriamente a lo largo de los 3 ejes del plano (x, y, z), también tiene los controles para poder ajustar el zoom y rotar los elementos en cualquiera de sus tres ejes con la ayuda del mouse. Esto se logró mediante el uso de 3 variables que se encontraban cambiando de valor constantemente y el rango de valores en el que podía encontrarse es de -50 a 50, dichas tres variables se utilizaron para definir las coordenadas de ubicación de cada punto. También se utilizó un ciclo for el cual crea y agrega al plano los 2000 puntos.

PRÁCTICA #6 DE THREE.js

Imagen
En esta práctica, básicamente lo que se hizo es que se le asignó a los 3 rectángulos del fondo la propiedad para proyectar luz, y al asignársele un color, la luz que proyecta es del color que se le haya asignado. De igual manera tiene una serie de controles que permite cambiar el color de emisión de la luz de cada rectángulo y la intensidad de esta. Y el plano y el cubo tiene la propiedad para poder captar esa luz que se esta proyectado.

PRÁCTICA #7 DE THREE.js

Imagen
En esta práctica, básicamente se construyó una maya mediante el uso de varios patrones de líneas mismos a los cuales se les asigno rotación, esto se logra con la función “gosper”.

PRÁCTICA #8 DE THREE.js

Imagen
En esta práctica, básicamente se agregó una textura al plano  mediante el uso de una imagen, a su vez se creó una figura geométrica a base de vértices manualmente indicados y, a su vez, se le asignó una extrusión y una textura a base de otra imagen.

EXAMEN DE THREE.js

Imagen
Este examen es básicamente una copia de la Práctica #8, solo que la  figura a construir con los vértices es la letra “I” y contiene rotación, también se agregaron controles para escalar la figura en sus diferentes dimensiones (x, y, z) y un ajuste para variar la velocidad de rotación.

PRÁCTICA #1 DE BLENDER

Imagen
En esta practica se utilizaron figuras básicas, se le cambio el color, y se asigno un tipo de material diferente a las figuras.

PRÁCTICA #2 DE BLENDER

Imagen
Este es el resultado de seguir la indicaciones de un vídeo tutorial en el que a partir de un cubo se construyo este pequeño elefante, esto se logra seccionando y deformando partes especificas del cubo.

PRÁCTICA #3 DE BLENDER

Imagen
En esta práctica se agrego una imagen como plano y se le fueron dando propiedades para que reflejara luz y tuviera el aspecto de una carretera, seguido de esto se creo la forma de la gota de agua que simularía la lluvia y se agregaría al sistema de partículas, y para finalizar se agrego un fondo para en el cual se pudiera reflejar en la carretera y el agua.

REFERECIAS

Antonio González. (2013). 1. Introducción a los Ambientes de Graficación. 2019, de blogspot.com Sitio web: http://graficacion-suirot18.blogspot.com/2013/08/introduccion-la-graficacion.html Ricardo. (2012). Introducción a la Graficación por Computadora. 2019, de blogspot.com Sitio web: http://grafi-ricardo.blogspot.com/2012/01/introduccion-la-graficacionpor.html Pedro Gutiérrez. (2013). Introducción a Three.js, la Librería 3D Número Uno Para HTML5. 2019, de genbeta.com Sitio web: https://www.genbeta.com/desarrollo/introduccion-a-three-js-la-libreria-3d-numero-uno-para-html5 NE. (2019). Three.js. 2019, de wikipedia.org Sitio web: https://es.wikipedia.org/wiki/Three.js Francisco. (2010). ¿Qué es Blender?. 2019, de renderati.com Sitio web: http://www.renderati.com/render/%C2%BFque-es-blender/