Esta lección es de Peter Collingridge y fue publicada originalmente en su sitio web.
Si has estado programando aquí en Khan Academy, probablemente has dibujado un montón de figuras 2D, como rectángulos y elipses, y tal vez te has preguntado a ti mismo cómo hacer figuras 3D, como cubos y esferas.
Bueno, la biblioteca de ProcessingJS que utilizamos aquí en realidad no está diseñada para gráficos en 3D, pero resulta que con un poco de trigonometría, podemos escribir nuestro propio motor de gráficos 3D y, al hacerlo, aprenderemos un poco sobre cómo funcionan los gráficos 3D (¡y por qué existe una razón para aprender trigonometría además de hacer felices a los profesores de matemáticas!).
Aquí hay un ejemplo del tipo de programa que puedes hacer. Utiliza tu ratón para rotar a la dona:

¿Qué son los gráficos 3D?

Como las pantallas de la computadora son esencialmente bidimensionales, los gráficos 3D solo son ilusiones ópticas en 2D que engañan a tu cerebro en pensar que está viendo un objeto en 3D. Aquí hay un ejemplo sencillo:
Cubo 3D
Tres paralelogramos que pretenden ser un cubo
Un motor de gráficos 3D trabaja al calcular qué figuras en 2D proyectaría en la pantalla un objeto en 3D. Así que para escribir nuestro propio motor 3D, necesitamos saber cómo hacer estos cálculos. Nuestro programa no será tan rápido como la mayoría de los motores 3D pero debería ayudarnos a comprender los principios de cómo funcionan.

Representar figuras

Un motor de gráficos 3D toma un objeto 3D y lo convierte en gráficos 2D, ¿pero cómo representamos un objeto 3D en código?
Un punto individual en el espacio 3D es fácil de representar usando un arreglo de tres números. Por ejemplo, podemos usar [30, 80, 55] para representar un punto a 30 pixeles sobre el eje horizontal (x), 80 pixeles sobre el eje vertical (y) y 55 pixeles sobre el eje que va desde afuera hacia adentro de la pantalla. Juega con el punto que se muestra a continuación, girándolo con el ratón y moviendo los números:
Representar una línea también es fácil: solamente conectas dos puntos. Por lo tanto, una forma de representar un objeto en 3D es convirtiéndolo en un grupo de líneas. Esto se llama un wireframe, una malla que constituye al objeto, que parece que el objeto está hecho de alambre. Obviamente no es ideal para representar objetos sólidos, pero es un buen lugar para empezar.

Términos

A continuación están algunos términos que usaremos cuando nos estemos refiriendo a figuras 3D. Otros términos pueden ser utilizados en otros lados, pero estos son bastante populares.
  • Nodo: un punto representado por tres coordenadas, x, y y z (también puede ser llamado un vértice).
  • Arista: una línea que conecta dos puntos.
  • Cara: una superficie definida por al menos tres puntos.
  • Wireframe: una forma que consiste solo de nodos y aristas.
Cargando