diff options
Diffstat (limited to 'src/notasP3D/texturas.md')
-rw-r--r-- | src/notasP3D/texturas.md | 96 |
1 files changed, 96 insertions, 0 deletions
diff --git a/src/notasP3D/texturas.md b/src/notasP3D/texturas.md new file mode 100644 index 0000000..f09e89a --- /dev/null +++ b/src/notasP3D/texturas.md @@ -0,0 +1,96 @@ +# P3D: Texturas en Mallas + +En el mundo 3D podemos utilizar imágenes de mapa de bits como *texturas* de nuestras mallas. + +[[P3D: Mallas]](/notasP3D/mallas.html) + +Hay múltiples formas de asignar una imagen como textura de una malla. El sistema de coordenadas UV nos permitirá determinar con precisión qué puntos de nuestra textura corresponden a qué vértices de nuestra malla. + +# Coordenadas UV + +Se les llaman coordenadas UV a las que nos permiten ubicar puntos en una *textura*. El eje U es el horizontal y comienza en 0 en el borde izquierdo, y el eje V es el eje vertical que comienza en 0 en el borde superior. + +![](/img/coordenadas-uv.png) + +## Modos: `IMAGE` o `NORMAL` + +El valor máximo de cada coordenada UV va a depender del modo que escojamos. + +La función para asignarlo es `textureMode( )`, que puede tener alguno de los siguientes dos argumentos: + +* `IMAGE`: Las coordenadas UV corresponden a las coordenadas de los pixeles de la imagen original. +* `NORMAL`: Las coordenadas UV se *normalizan*: la U va de 0 (borde izquierdo) a 1 (borde derecho), y la V de 0 (borde superior) a 1 (borde inferior) + +Es recomendable trabajar con el modo `NORMAL` pues nos permite pensar en términos de porcentajes, sin importar las dimensiones de la imagen original: + +```java +// normaliza las coordenadas UV de las texturas +textureMode( NORMAL ); +``` + +## Wrapping: `CLAMP` o `REPEAT` + +Con el modo de *wrapping* indicamos qué queremos que suceda al utilizar coordenadas UV que excedan los límites de la textura. + +La función para asignarlo es `textureWrap( )`, que puede tener alguno de los siguientes dos argumentos: + +* `CLAMP`: La textura original solo existe dentro de sus límites, y fuera de ellos se asigna el color más cercano a los bordes +* `REPEAT`: La textura se repite tanto en el eje U como en V. + +En general puede convenir utilizar la modalidad de `REPEAT`: + +```java +// repite las texturas en sus ejes U y V +textureWrap( REPEAT ); +``` + +## Mapeo de coordenadas + +Para utilizar una textura en una malla, necesitamos: + +* Indicar una textura de tipo `PImage` o `PGraphics` con la función `texture( )` +* Asignar a cada vértice, no solo sus coordenadas x,y,z, sino también las coordenadas u,v que le corresponderían de la textura. + +A continuación algunos ejemplos donde se ve en acción. + +# Ejemplos + +## Plano con textura de imagen + +En este ejemplo se carga una imagen y se utiliza como textura de un plano en XZ. + +Observa la correspondencia entre las coordenadas `x,y,z, u,v` de los cuatro vértices. + +```java + +``` + +Importante: la imagen debe estar en el mismo directorio que el sketch. + +Aquí más notas sobre cargar imágenes: + +[[Imágenes: Abrir, mostrar, leer]](/notas/imagenes-read.html) + +## Plano con textura generada (`PGraphics`) + +Este ejemplo es similar al anterior, pero con una imagen generada algorítmicamente dentro de un canvas virtual o "capa" de tipo `PGraphics`. + +```java + +``` + +Notas sobre capas: + +[[Imágenes: Capas y máscaras]](/notas/imagenes-capas.html) + +## Cilindro con textura de imagen + +Este ejemplo parte de un cilindro tradicional, asignando a cada cara cuadrangular una fracción proporcional de la textura en U. + +Mira qué pasa si cambias el factor que multiplica a la cantidad correspondiente a la coordenada U. + +```java + +``` + +[[P3D: Sólidos cilíndricos y cónicos]](/notasP3D/cilindricos-y-conicos.html) |