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: Colores

by
Read Time:7 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 Triangles and Quads
Let's Build a 3D Graphics Engine: Dynamic Lighting

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

¡Bienvenido! Esta es la sexta parte de nuestra serie Construyamos un motor gráfico 3D que cubre los fundamentos de los sistemas gráficos 3D. Esta vez vamos a hablar del color y de cómo añadirlo a nuestras clases existentes. También vamos a crear unas cuantas funciones útiles para facilitar el manejo de la iluminación, que es de lo que tratará nuestra siguiente y última parte.


Recapitulemos

Añadir color a nuestros objetos no va a ser una tarea demasiado grande, por lo que las dos únicas clases en las que nos vamos a centrar en gran medida son nuestra clase de punto y nuestra clase de cámara. Como un refresco, aquí es lo que parecen:

Hasta ahora, nuestro motor teórico tiene casi todo lo básico, incluyendo:

  • Las clases Point y Vector (los bloques de construcción de nuestro motor).
  • Funciones de transformación para nuestros puntos.
  • Una clase Camera (establece nuestro viewport, y selecciona puntos fuera de la pantalla).
  • Tres clases de rasterización (segmentos de línea, círculos y polígonos).

¡Ahora vamos a añadir un poco de color!


¡Color para todos!

Nuestro motor va a manejar los colores almacenando sus valores dentro de su clase Point. Esto permite que cada punto tenga su propio color individual, haciendo que los cálculos de iluminación y sombreado sean mucho más sencillos (al menos para las personas, a veces es menos eficiente codificar un motor de esta manera). Al calcular la iluminación o el sombreado de una escena, podemos proporcionar fácilmente a la función una lista de puntos y, a continuación, pasar por cada uno de ellos, utilizando su distancia a la luz para modificar su color en consecuencia.

Una de las formas más comunes de almacenar el color en la programación es utilizar los valores de rojo, verde y azul para crear el color real deseado (esto se suele llamar mezcla aditiva de colores). Almacenando un valor de 0-255 en cada uno de estos segmentos de color, puedes crear fácilmente una amplia variedad de colores. (Así es como la mayoría de las APIs determinan el color, así que por razones de compatibilidad tiene sentido utilizar este método).

Entonces, dependiendo de la API de gráficos que estés usando, puedes pasar estos valores en forma decimal (255,0,0), o en forma hexadecimal (0xFF0000 o #FF0000). Vamos a utilizar el formato decimal en nuestro motor ya que es un poco más fácil de trabajar. Además, si tu API gráfica utiliza valores hexadecimales, es probable que tenga una función para convertir de decimal a hexadecimal, por lo que esto no debería ser un problema.

AdditiveColorAdditiveColorAdditiveColor

Para empezar a implementar el color, vamos a añadir tres nuevas variables a nuestra clase Point: rojo, azul y verde. No hay nada demasiado extravagante todavía, pero aquí está lo que el nuevo esquema de nuestra clase Point podría parecer:

Eso es todo lo que necesitamos para almacenar el color de nuestro punto. Ahora solo tenemos que ajustar la función de dibujo de nuestra cámara para que utilice el color especificado.

Esto va a cambiar drásticamente dependiendo de la API de gráficos que estés utilizando, pero todas deberían tener una función similar a esta:

Si tu API gráfica utiliza valores hexadecimales para el color en lugar de decimales, entonces tu función sería similar a esta:

Esta última parte utiliza una función toHex() (de nuevo, los nombres de las funciones diferirán de una API a otra) para convertir un valor RGB en un valor hexadecimal para que no tengas que hacerlo.

Después de haber hecho estos cambios, ahora debería ser capaz de tener puntos coloreados dentro de tu escena. Para dar un paso más, vamos a ajustar cada una de nuestras clases de rasterización para que toda nuestra forma pueda ser coloreada.

Para añadir esto a nuestras clases, simplemente tenemos que añadir el manejo del color a sus funciones constructoras. Esto podría ser así:

Entonces, solo tenemos que modificar su función de retorno de puntos para que establezca cada punto en su array para tener el color especificado. La nueva función se vería así:

Ahora, cada punto dentro del segmento de línea debe tener el mismo color que se pasó al segmento de línea. Puedes utilizar este método para establecer los colores en tus otras clases de rasterización, y pronto tu escena cobrará vida con el color.

Pongamos en práctica nuestras nuevas funciones creando un programa para mostrarlas.


Jugar con 16,7 millones de colores

Utilizando la mezcla aditiva de colores, podemos crear fácilmente más de 16,7 millones de colores diferentes utilizando sólo la simple notación (r,g,b). Vamos a crear un programa que aproveche este gran número de colores.

Mediante la pulsación de teclas, vamos a permitir al usuario controlar los valores de rojo, verde y azul de un objeto de forma individual, permitiéndole convertirlo en el color que desee.

Las especificaciones de nuestro programa son las siguientes:

  • Dibuja un objeto en la pantalla.
  • Si el usuario pulsa A, baja el valor de rojo del objeto; si pulsa Q, lo sube.
  • Si el usuario pulsa S, baja el valor verde del objeto; si pulsa W, lo sube.
  • Si el usuario pulsa D, baja el valor azul del objeto; si pulsa E, lo sube.
  • Vuelve a dibujar el objeto después de que se haya actualizado su color.
  • Asegúrate de limitar los valores de color, impidiendo que caigan por debajo de 0 o suban por encima de 255.

Con todo esto en mente, echemos un vistazo a lo que podría ser un esquema básico de nuestro programa:

¡Ahora podemos jugar con nuestro objeto y convertirlo en el color que deseemos!

Echa un vistazo a la demo aquí: pulsa repetidamente las teclas Q, W, E, A, S y D para cambiar el color del cuadrado.


Conclusión

Con el color añadido en nuestro motor, tenemos todo lo que necesitamos en su lugar para finalmente manejar algo de iluminación. En el próximo artículo, vamos a ver la creación de fuentes de iluminación, y la creación de algunas funciones para permitir que esas fuentes afecten a los colores de nuestros puntos. La profundidad que la iluminación añade a un motor es extremadamente satisfactoria, ¡así que asegúrate de comprobarlo!

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.