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

Construyamos un motor gráfico 3D: Puntos, vectores y conceptos básicos

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: Linear Transformations

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

Los motores de juegos 3D que están detrás de los mayores juegos de hoy en día son obras asombrosas de matemáticas y programación, y muchos desarrolladores de juegos consideran que entenderlos en su totalidad es una tarea difícil. Si no tienes experiencia (o un título universitario, como yo), esta tarea se vuelve aún más ardua. En esta serie, pretendo guiarte por los fundamentos de los sistemas gráficos en los motores 3D.

Más concretamente, en este tutorial hablaremos de puntos y vectores, y de toda la diversión que conllevan. Si tienes un conocimiento básico de álgebra (variables y matemática de variables) y de Ciencias de la Computación (los fundamentos de cualquier lenguaje de programación orientado a objetos), deberías ser capaz de pasar por la mayoría de estos tutoriales, pero si tienes problemas con alguno de los conceptos, ¡haz preguntas! Algunos de estos temas pueden ser terriblemente difíciles.

También puedes obtener ayuda adicional en Envato Studio, donde puedes encontrar un montón de fantásticos servicios de diseño y modelado en 3D a precios asequibles.

3D Design Modeling services3D Design Modeling services3D Design Modeling services
Servicios de diseño y modelado 3D en Envato Studio

Fundamentos de los sistemas de coordenadas

Empecemos por lo básico. Los gráficos tridimensionales requieren el concepto de espacio tridimensional. El más utilizado de estos espacios es el llamado Espacio Cartesiano, que nos da la ventaja de las coordenadas cartesianas (las notaciones básicas \((x,y)) y los gráficos 2D espaciados por cuadrículas que se enseñan en la mayoría de las escuelas secundarias).

Build a 3D Graphics Engine tutorial
En la foto: la perdición de la existencia de muchos estudiantes de secundaria.

El espacio cartesiano tridimensional nos da un eje x, y y z (que describe la posición basada en la colocación horizontal, la colocación vertical y la profundidad, respectivamente). Las coordenadas de cualquier punto dentro de este espacio se muestran como una tupla (en este caso una tupla 3, ya que hay tres ejes). En un plano de 2 dimensiones, una tupla podría representarse como \((x,y)), y en un plano de 3 dimensiones, se representa como \((x,y,z)). El uso de esta tripleta es que muestra la ubicación de un punto en relación con el origen del espacio (que a su vez se muestra típicamente como \((0,0,0)\)).

Consejo: tupla: lista ordenada (o secuencia) de elementos en informática o matemáticas. Así, \((K,y,l,e)) sería una tupla de 4, que muestra una secuencia de caracteres que componen mi nombre.
Build a 3D Graphics Engine tutorialBuild a 3D Graphics Engine tutorialBuild a 3D Graphics Engine tutorial

Dentro de este espacio, vamos a definir un punto como una representación de una tripleta. Esto también se puede mostrar como:

\[P = (x,y,z)\]

Además de esta definición de un punto, debemos definir sus partes.

Cada uno de los elementos de esta 3-tupla es un escalar (número) que define una posición a lo largo de un vector base. Cada vector base debe tener una longitud unitaria (es decir, una longitud de exactamente 1), por lo que las 3-tuplas como \((1,1,1)\) y \((2,2,2)\) no podrían ser vectores base, ya que son demasiado largas.

Definimos tres vectores base para nuestro espacio:

\[\begin{aligned} X & = (1,0,0)\\ Y & = (0,1,0)\\ Z & = (0,0,1) \end{aligned}\]

Build a 3D Graphics Engine tutorial
Fuente: https://www.thefullwiki.org/Arithmetics/Cartesian_Coordinate.

El sistema de coordenadas

Ahora vamos a hablar de la definición matemática de nuestro sistema de coordenadas, de cómo afecta a nuestro sistema de gráficos y de los cálculos que podemos hacer.

Representación de puntos

El punto de origen de nuestro sistema de coordenadas se puede representar como el punto \ (O\), que representa la 3ª pareja (0,0,0). Esto significa que la representación matemática de nuestro sistema de coordenadas se puede representar como:

\[\{O;X,Y,Z\}\]

Con esta afirmación, se puede decir que \((x,y,z)\) representa la posición de un punto con respecto al origen. Esta definición también significa que cualquier punto \(P\), \((a, b, c)\), puede ser representado como:

\[P = O + aX + bY + cZ\]

A partir de aquí, me referiré a los escalares en minúsculas y a los vectores en mayúsculas, por lo que \ (a\), \ (b\), y \ (c\) son escalares, y \ (X\), \ (Y\), y \ (Z\) son vectores. (En realidad son los vectores base que definimos antes).

Esto significa que un punto cuya tupla es (2,3,4) podría representarse como

\[\begin{aligned} (2,3,4) & = (2,0,0) + (0,3,0) + (0,0,4)\\ & = (0,0,0) + (2,0,0) + (0,3,0) + (0,0,4)\\ & = (0,0,0) + 2(1,0,0) + 3(0,1,0) + 4(0,0,1)\\ & = O + 2X + 3Y + 4Z\\ \end{aligned}\]

Así pues, hemos tomado este concepto abstracto de "un punto en el espacio 3D" y lo hemos definido como cuatro objetos separados sumados. Este tipo de definición es muy importante siempre que queramos plasmar cualquier concepto en el código.

Perpendicularidad mutua

El sistema de coordenadas que utilizaremos también tiene la valiosa propiedad de ser mutuamente perpendicular. Esto significa que hay un ángulo de 90 grados entre cada uno de los ejes donde se encuentran en sus respectivos planos.

Build a 3D Graphics Engine tutorial

Nuestro sistema de coordenadas también se definirá como "derecho":

Build a 3D Graphics Engine tutorial
Fuente: http://viz.aset.psu.edu/gho/sem_notes/3d_fundamentals/html/3d_coordinates.html.

En términos matemáticos, esto significa que:

\[X = Y \times Z\]

...donde \(\times\) representa el operador de producto cruzado.

En caso de que no estés seguro de lo que es un producto cruzado, se puede definir mediante la siguiente ecuación (suponiendo que se dan dos 3 tuplas):

\[(a,b,c) \times (d,e,f) = (bf - ce, cd - af, ae - bd)\]

Estas afirmaciones pueden parecer tediosas, pero más adelante, nos permitirán hacer una variedad de cálculos y transformaciones diferentes mucho más fácilmente. Por suerte, no tienes que memorizar todas estas ecuaciones cuando construyas un motor de juego, puedes simplemente construir a partir de estas declaraciones, y luego construir sistemas aún menos complicados en la parte superior de eso. Bueno, ¡hasta que tengas que editar algo fundamental dentro de tu motor y tengas que volver a refrescar todo esto!


Puntos y vectores

Una vez que hemos aprendido los fundamentos de nuestro sistema de coordenadas, es hora de hablar de los puntos y los vectores y, sobre todo, de cómo interactúan entre sí. Lo primero que hay que tener en cuenta es que los puntos y los vectores son cosas muy distintas: un punto es una ubicación física dentro del espacio; un vector es el espacio entre dos puntos.

Build a 3D Graphics Engine tutorial

Para que no se confundan, escribiré los puntos en cursiva mayúscula, como \(P\), y los vectores en negrita mayúscula, como \(\mathbf{V}\).

Hay dos axiomas principales que vamos a tratar al utilizar puntos y vectores, y son:

  • Axioma 1: La diferencia de dos puntos es un vector, por lo que \mathbf{V} = P - Q\)
  • Axioma 2: La suma de un punto y un vector es un punto, por lo que \(Q = P + \mathbf{V}\)
Consejo: Un axioma es un punto de razonamiento, a menudo considerado lo suficientemente evidente como para ser aceptado sin discusión.

Construir el motor

Con estos axiomas establecidos, ahora tenemos suficiente información para crear las clases de bloques de construcción que están en el corazón de cualquier motor de juego 3D: la clase Punto y la clase Vector. Si fuéramos a construir nuestro propio motor usando esta información, habría algunos otros pasos importantes que dar al crear estas clases (la mayoría tienen que ver con la optimización o el trato con las APIs ya existentes), pero vamos a dejarlos fuera en aras de la simplicidad.

Los ejemplos de las clases a continuación van a estar en pseudocódigo para que puedas seguirlos con tu lenguaje de programación de elección. Aquí están los esquemas de nuestras dos clases:

Como ejercicio, trata de completar cada una de las funciones de esta clase con un código que funcione (basado en lo que hemos repasado hasta ahora). Una vez que hayas terminado todo eso, ponlo a prueba haciendo este programa de ejemplo:


Conclusión

¡Has llegado al final! Puede parecer un montón de matemáticas para hacer solo dos clases, y definitivamente lo es. En la mayoría de los casos nunca tendrás que trabajar en un juego a este nivel, pero tener un conocimiento íntimo del funcionamiento de tu motor de juego es útil, no obstante (aunque solo sea por la autosatisfacción).

Si te ha parecido divertido, no dejes de ver mi siguiente tutorial sobre los fundamentos del sistema gráfico: ¡las transformaciones!

Por supuesto, una vez que hayas creado el motor gráfico, necesitarás añadir algo de contenido, así que no dudes en echar un vistazo a la amplia selección de activos de juego y modelos 3D en Envato Market.

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.