P3D: Fundamentos y configuración

1 Espacio 3D Computacional

1.1 Ejes y coordenadas

Por defecto, en Processing:

A diferencia del trabajo en 2D, en el que cada unidad de distancia generalmente correspond√≠a a un pixel, en 3D las unidades se vuelven arbitrarias debido a que su tama√Īo aparente depende completamente de d√≥nde se ubica la c√°mara (ver abajo).

Y no solo el tama√Īo, sino tambi√©n la orientaci√≥n y localizaci√≥n: Para bien y para mal, todo se vuelve relativo.

Por eso abajo escribo entre comillas palabras como ‚Äúarriba‚ÄĚ y ‚Äúorigen‚ÄĚ.

Si lo que estamos modelando tiene equivalente en el mundo fuera de la pantalla, nos tocar√° determinar la equivalencia entre las unidades del mundo ‚Äúvirtual‚ÄĚ y el ‚Äúreal‚ÄĚ.

1.2 C√°mara

Por el momento trabajaremos en un mundo 3D virtual al que podremos acceder solamente a través de una pantalla 2D. Esto requiere proyectar el mundo 3D hacia un plano finito.

Nos saltaremos las matem√°ticas involucradas y automatizadas en el proceso, y nos quedaremos con que normalmente una c√°mara virtual ‚Äúve‚ÄĚ lo que est√° adentro de un volumen con forma de pir√°mide truncada (view frustum en ingl√©s), y lo proyecta sobre un plano que corresponde a la ventana de nuestro sketch.

(imagen)

Algunos atributos de una cámara virtual típica:

Es conveniente tener presentes esos conceptos para entender mejor qué se ve (y por qué) dentro de nuestro sketch.

En Processing es posible manipular la cámara a ese nivel de detalle, pero es una complicación que va más allá del objetivo del curso.

Así que empezaremos utilizando una biblioteca/library llamada PEasyCam, que nos permite manipular la cámara 3D de manera intuitiva con un mouse.

Recomendaci√≥n: as√≠ como en otros programas que trabajan en 3D, es de gran ayuda utilizar un mouse de dos botones y una ‚Äúscroll wheel‚ÄĚ

1.3 Salidas

Empezaremos trabajando con mundos en 3D que se ven y navegan a través de una pantalla 2D.

Eventulamente podremos exportar como archivos OBJ lo que construyamos - esto nos permitir√° a√Īadirlo a otros programas de 3D por ejemplo para hacer un render con caracter√≠sticas espec√≠ficas, o incluso llevarlo a programas de fabricaci√≥n digital para de ah√≠ materializarlos con las m√°quinas de control num√©rico correspondientes.

También, lo que hagamos puede llegar a tener como salida un visor de VR (presencia en espacios virtuales) y/o aplicaciones de AR.

2 Configuración

2.1 Instalación

Para trabajar en 3D en Processing, vamos a instalar la library PeasyCam:

Sketch -> Importar biblioteca -> A√Īadir biblioteca. Ah√≠ busca: PeasyCam y presiona en Instalar

2.2 Consideraciones

Es importante agregar el P3D renderer en la declaraci√≥n del tama√Īo del sketch (ya sea dentro de size() o fullscreen()).

La función lights() agrega una configuración básica de iluminación. Más adelante en el curso veremos cómo trabajar más deliberadamente con luces virtuales.

2.3 Sketch plantilla

Este sketch nos puede servir de base para empezar a construir en 3D:

// Importa PeasyCam y declara la c√°mara
import peasy.PeasyCam;
PeasyCam cam;

void setup() {
  // Determina el tama√Īo de la ventana
  // y que usaremos el renderer P3D
  size(800, 600, P3D);

  // Crea el objeto de la c√°mara
  // a 60 unidades de distancia del punto "lookAt"
  // (por defecto, en (0,0,0)
  cam = new PeasyCam(this, 60);

  // ajusta perspectiva: ve en un rango entre 1 a 500 unidades
  perspective(PI/3, 1.0*width/height, 1, 500);
}

void draw() {
  // Dibuja un fondo para limpiar la ventana en cada frame
  background(255);
  // Establece "luces" por defecto para notar mejor el 3D
  lights();
  
  // Empieza a dibujar...
  // Por ejemplo, crea un cubo de lado 5:
  box(5);
}

2.3.1 Ajuste de perspectiva

La siguiente expresi√≥n ajusta la c√°mara para que ‚Äúvea‚ÄĚ cualquier objeto que est√© entre 1 y 500 unidades de distancia. Modifica sus par√°metros cuando notes que los objetos que dibujes desaparezcan al hacer zoom

// ajusta perspectiva: ve en un rango entre 1 a 500 unidades
perspective(PI/3, 1.0*width/height, 1, 500);

2.3.2 Punto lookAt

Al crear la c√°mara podemos especificar el punto al que est√° viendo la c√°mara originalmente, adem√°s de la distancia a la que se encuentra:

// mira hacia (10,10,0) desde una distancia de 50 unidades
cam = new PeasyCam(this, 10, 10, 0, 50);

2.4 Sketch plantilla con ejes

Esta es otra plantilla. Incluye el ajuste de perspectiva, y utiliza una función propia dibujaEjes( ) para dibujar los ejes coordenados:

import peasy.*;
PeasyCam cam;

void setup() {
  size(800, 600, P3D);

  // c√°mara a 50 unidades de 0,0,0
  cam = new PeasyCam(this, 50);

  // ajusta perspectiva: ve en un rango entre 1 y 500 unidades
  perspective(PI/3, 1.0*width/height, 1, 500);
} // cierra setup()

void draw() {
  background(255);
  // Establece "luces" por defecto
  lights();
  
  // guía de ejes coordenados con largo de 10
  dibujaEjes(10);

  // dibuja aquí:

  

} // cierra draw()

void dibujaEjes(float d) {
  // esta función dibuja los ejes coordenados X, Y, Z
  // de colores R, G, B respectivamente
  // d: longitud de las líneas
  
  // eje X: rojo
  stroke(255, 0, 0);
  line(0, 0, 0, d, 0, 0);

  // eje Y: verde
  stroke(0, 255, 0);
  line(0, 0, 0, 0, d, 0);

  // eje Z: azul
  stroke(0, 0, 255);
  line(0, 0, 0, 0, 0, d);

  // regresa al color negro de línea
  stroke(0, 0, 0);
} // cierra función dibujaEjes( )