Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Game Development
  2. Programming

Construyamos un motor gráfico 3D: Rasterización de triángulos y cuadrados

by
Read Time:8 minsLanguages:
This post is part of a series called Let’s Build a 3D Graphics Software Engine.
Let's Build a 3D Graphics Engine: Rasterizing Line Segments and Circles
Let's Build a 3D Graphics Engine: Colors

Spanish (Español) translation by Esther (you can also view the original English article)

Bienvenidos a la quinta parte de nuestra serie ¡Construyamos un motor gráfico 3D! Esta vez, vamos a construir dos nuevas clases para rasterizar: una para triángulos y otra para cuadriláteros básicos. Luego, vamos a tomar piezas de esas dos clases y armar una última y todopoderosa clase polígono.

Consejo: Esto forma parte de una serie, así que si quieres sacarle el máximo partido asegúrate de leer los otros tutoriales que preceden a éste.


Recapitulemos

¡Hasta ahora hemos incorporado bastante a nuestro motor! Esto es lo que tenemos:

  • Clases Punto y Vector (los bloques de construcción de nuestro motor).
  • Funciones de transformación para nuestros puntos.
  • Una clase Cámara (establece nuestro viewport, y selecciona puntos fuera de la pantalla).
  • Dos clases para rasterizar (segmentos de línea y círculos).

Aquí hay una referencia rápida para todas las clases que hemos construido:

Vamos a depender mucho de la clase LineSegment para crear nuestras clases Triangle y Quad, así que asegúrate de familiarizarte con ella antes de continuar.


Rasterización de triángulos

512px-Euler_diagram_of_triangle_types512px-Euler_diagram_of_triangle_types512px-Euler_diagram_of_triangle_types

La creación de una clase Triangle para el motor es bastante simple, especialmente porque la clase LineSegment es donde toda nuestra rasterización va a tener lugar. Esta clase permitirá establecer tres puntos, y dibujará un segmento de línea entre ellos para hacer el triángulo completo.

Un esquema básico de la clase podría ser el siguiente:

En aras de las normas, vamos a suponer que los tres puntos declarados dentro de nuestro triángulo están en el sentido de las agujas del reloj.

Usando nuestra clase LineSegment, entonces, podemos configurar nuestra función returnPointsInTriangle() así:

No está mal, ¿verdad? Como ya tenemos gran parte del trabajo realizado dentro de nuestra clase LineSegment, solo tenemos que seguir encadenando para crear formas más complejas. Esto facilita la creación de polígonos cada vez más complicados en la pantalla, simplemente añadiendo más LineSegments (y almacenando más puntos dentro de la propia clase).

A continuación, vamos a ver cómo podemos añadir más puntos a este sistema creando una clase cuadrada.


Cómo ponerse al día

300px-Six_Quadrilaterals

La creación de una clase para manejar cuadriláteros solo implica añadir algunas cosas adicionales a nuestra clase Triangle. Con otro conjunto de puntos, nuestra clase de cuadriláteros se vería así:

Entonces, simplemente añadimos el segmento de línea adicional a la función returnPointsInQuad, así:

Mientras que construir nuevas clases como esta es bastante sencillo, hay una manera mucho más fácil de encapsular todos nuestros polígonos en una clase. ¡Usando la magia de los bucles y arrays, podemos armar una clase de polígono que podría hacer casi cualquier forma de tamaño que podrías desear!


¿Dónde están todos los Polys-Gon?

Para crear una clase de polígono en constante expansión, tenemos que hacer dos cosas. La primera es trasladar todos nuestros puntos a un array, lo que nos daría un esquema de clase similar a algo como esto:

La segunda es utilizar un bucle que permita recorrer un número indeterminado de segmentos de línea en nuestra función returnPointsInPolygon(), que podría ser algo así:

Con esta clase añadida a nuestro motor, ahora podemos crear cualquier cosa, desde un triángulo hasta una abominación de 39 lados, con la misma línea de código.


Creador de polígonos

Para jugar con nuestra nueva clase de polígono, vamos a hacer un programa que muestre su alcance. Nuestro programa va a permitir al usuario añadir o eliminar lados del polígono mostrado mediante la pulsación de teclas. Por supuesto, tendremos que poner límites al número de lados que puede tener nuestro polígono, ya que si tiene menos de tres lados ya no será un polígono. Realmente no tenemos que vigilar los límites superiores de nuestro polígono porque deberían escalar bien. Sin embargo, vamos a limitar los polígonos a tener diez lados como máximo ya que vamos a establecer sus nuevos puntos desde el código.

Las especificaciones de nuestro programa pueden dividirse en estas partes más pequeñas:

  • Dibuja un polígono en la pantalla inicialmente.
  • Al pulsar la tecla 'a', baja el número de lados del polígono en 1.
  • Al pulsar la tecla 's', aumenta en 1 el número de lados del polígono.
  • Evita que el número de lados del polígono sea inferior a 3.
  • Evita que el número de lados del polígono aumente por encima de 10.

Veamos cómo podría ser nuestro código:

¡Nuestro pequeño programa debería permitirte ajustar un polígono en pantalla ahora! Echa un vistazo a la demo. Si quieres reforzar un poco este programa, podrías intentar poner la sección de alteración de polígonos en algún tipo de algoritmo para facilitarte el escalado. No estoy seguro de si ya existe, pero si es así, podrías tener fácilmente un polígono de escala infinita en tus manos.


Conclusión

Ahora tenemos una gran cantidad de rasterización integrada en nuestro motor, lo que nos permite crear casi cualquier forma que podamos necesitar (aunque algunas solo a través de la combinación). La próxima vez nos alejaremos de dibujar formas y hablaremos más de sus propiedades. Si estás interesado en darle un poco de color a tu pantalla, ¡entonces asegúrate de ver la siguiente parte!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.