diff options
author | sejo <sejo@texto-plano.xyz> | 2021-05-26 09:44:53 -0500 |
---|---|---|
committer | sejo <sejo@texto-plano.xyz> | 2021-05-26 09:44:53 -0500 |
commit | 1d48181839d7baf1e934cce4c5e57f89f25577f8 (patch) | |
tree | b7af6bf3d5421610b1765bd67dc82c9117fff072 | |
parent | 0e5b209738763fda7affbff5b6394a2a015a5c5b (diff) | |
download | jardinbit-1d48181839d7baf1e934cce4c5e57f89f25577f8.tar.gz |
notas de texturas
-rw-r--r-- | imagesources/coordenadas-uv.kra | bin | 0 -> 514052 bytes | |||
-rw-r--r-- | imagesources/texturas.kra | bin | 0 -> 891266 bytes | |||
-rw-r--r-- | src/img/coordenadas-uv.png | bin | 0 -> 164261 bytes | |||
-rw-r--r-- | src/img/textura-cilindro.png | bin | 0 -> 189842 bytes | |||
-rw-r--r-- | src/img/textura-circulos.png | bin | 0 -> 22541 bytes | |||
-rw-r--r-- | src/img/textura-ladrillos-clamp-y-repeat.png | bin | 0 -> 170023 bytes | |||
-rw-r--r-- | src/img/textura-ladrillos-clamp.png | bin | 0 -> 105407 bytes | |||
-rw-r--r-- | src/img/textura-ladrillos-image-y-normal.png | bin | 0 -> 138625 bytes | |||
-rw-r--r-- | src/img/textura-ladrillos-perspectiva.png | bin | 0 -> 138364 bytes | |||
-rw-r--r-- | src/img/textura-ladrillos-repeat.png | bin | 0 -> 318415 bytes | |||
-rw-r--r-- | src/notasP3D/texturas.md | 155 |
11 files changed, 152 insertions, 3 deletions
diff --git a/imagesources/coordenadas-uv.kra b/imagesources/coordenadas-uv.kra Binary files differnew file mode 100644 index 0000000..84eb865 --- /dev/null +++ b/imagesources/coordenadas-uv.kra diff --git a/imagesources/texturas.kra b/imagesources/texturas.kra Binary files differnew file mode 100644 index 0000000..2f6cb77 --- /dev/null +++ b/imagesources/texturas.kra diff --git a/src/img/coordenadas-uv.png b/src/img/coordenadas-uv.png Binary files differnew file mode 100644 index 0000000..f02b349 --- /dev/null +++ b/src/img/coordenadas-uv.png diff --git a/src/img/textura-cilindro.png b/src/img/textura-cilindro.png Binary files differnew file mode 100644 index 0000000..603245c --- /dev/null +++ b/src/img/textura-cilindro.png diff --git a/src/img/textura-circulos.png b/src/img/textura-circulos.png Binary files differnew file mode 100644 index 0000000..89f611e --- /dev/null +++ b/src/img/textura-circulos.png diff --git a/src/img/textura-ladrillos-clamp-y-repeat.png b/src/img/textura-ladrillos-clamp-y-repeat.png Binary files differnew file mode 100644 index 0000000..c6fda8c --- /dev/null +++ b/src/img/textura-ladrillos-clamp-y-repeat.png diff --git a/src/img/textura-ladrillos-clamp.png b/src/img/textura-ladrillos-clamp.png Binary files differnew file mode 100644 index 0000000..2868cfb --- /dev/null +++ b/src/img/textura-ladrillos-clamp.png diff --git a/src/img/textura-ladrillos-image-y-normal.png b/src/img/textura-ladrillos-image-y-normal.png Binary files differnew file mode 100644 index 0000000..57170f3 --- /dev/null +++ b/src/img/textura-ladrillos-image-y-normal.png diff --git a/src/img/textura-ladrillos-perspectiva.png b/src/img/textura-ladrillos-perspectiva.png Binary files differnew file mode 100644 index 0000000..83fb3ca --- /dev/null +++ b/src/img/textura-ladrillos-perspectiva.png diff --git a/src/img/textura-ladrillos-repeat.png b/src/img/textura-ladrillos-repeat.png Binary files differnew file mode 100644 index 0000000..d931c5f --- /dev/null +++ b/src/img/textura-ladrillos-repeat.png diff --git a/src/notasP3D/texturas.md b/src/notasP3D/texturas.md index f09e89a..753cd3e 100644 --- a/src/notasP3D/texturas.md +++ b/src/notasP3D/texturas.md @@ -1,4 +1,6 @@ -# P3D: Texturas en Mallas +--- +title: "P3D: Texturas en Mallas" +--- En el mundo 3D podemos utilizar imágenes de mapa de bits como *texturas* de nuestras mallas. @@ -21,6 +23,8 @@ La función para asignarlo es `textureMode( )`, que puede tener alguno de los si * `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) +![](/img/textura-ladrillos-image-y-normal.png) + 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 @@ -37,6 +41,8 @@ La función para asignarlo es `textureWrap( )`, que puede tener alguno de los si * `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. +![](/img/textura-ladrillos-clamp-y-repeat.png) + En general puede convenir utilizar la modalidad de `REPEAT`: ```java @@ -53,16 +59,56 @@ Para utilizar una textura en una malla, necesitamos: A continuación algunos ejemplos donde se ve en acción. +La textura utilizada es la siguiente imagen: + +![](/img/ladrillos.jpg) + # Ejemplos ## Plano con textura de imagen -En este ejemplo se carga una imagen y se utiliza como textura de un plano en XZ. +En este ejemplo se carga una imagen y se utiliza como textura de un plano en XY. + +![](/img/textura-ladrillos-perspectiva.png) Observa la correspondencia entre las coordenadas `x,y,z, u,v` de los cuatro vértices. -```java +Experimenta cambiando las coordenadas de los vértices para observar qué pasa con la malla y su textura. +```java +import peasy.PeasyCam; +PeasyCam cam; + +// declara variable para textura +PImage textura; + +void setup() { + size(800, 600, P3D); + cam = new PeasyCam(this, 40); + perspective(PI/3, 1.0*width/height, 1, 100); + + // carga imagen en la variable + textura = loadImage("ladrillos.jpg"); + + // configura modos de textura + textureMode( NORMAL ); // coords normalizadas + textureWrap( REPEAT ); // repite textura +} + +void draw() { + background(255); + lights(); + + beginShape(QUADS); + texture( textura ); //asigna textura a malla + // coordenadas x,y,z, u,v: + vertex( 0, 0, 0, 0, 0); // superior izquierda + vertex( 5, 0, 0, 1, 0); // superior derecha + vertex( 5, 5, 0, 1, 1); // inferior derecha + vertex( 0, 5, 0, 0, 1); // inferior izquierda + endShape(); + +} ``` Importante: la imagen debe estar en el mismo directorio que el sketch. @@ -75,7 +121,53 @@ Aquí más notas sobre cargar imágenes: Este ejemplo es similar al anterior, pero con una imagen generada algorítmicamente dentro de un canvas virtual o "capa" de tipo `PGraphics`. +![](/img/textura-circulos.png) + +Nota cómo las funciones de dibujo que ya conoces se utilizan para dibujar *dentro* de la capa. + ```java +import peasy.PeasyCam; +PeasyCam cam; + +// declara variable para capa +PGraphics capa; + +void setup() { + size(800, 600, P3D); + cam = new PeasyCam(this, 40); + perspective(PI/3, 1.0*width/height, 1, 100); + + capa = createGraphics( 400, 400 ); + + // configura modos de textura + textureMode( NORMAL ); // coords normalizadas + textureWrap( REPEAT ); // repite textura +} + +void draw() { + background(255); + lights(); + + // dibuja en la capa dos círculos que crecen + capa.beginDraw(); + capa.background( 0 ); // fondo negro + capa.stroke( 255 ); + capa.noFill(); + capa.strokeWeight(10); + capa.circle( 200, 200, frameCount%400); + capa.circle( 200, 200, (frameCount+200)%400); + capa.endDraw(); + + beginShape(QUADS); + texture( capa ); //asigna textura a malla + // coordenadas x,y,z, u,v: + vertex( 0, 0, 0, 0, 0); // superior izquierda + vertex( 5, 0, 0, 1, 0); // superior derecha + vertex( 5, 5, 0, 1, 1); // inferior derecha + vertex( 0, 5, 0, 0, 1); // inferior izquierda + endShape(); + +} ``` @@ -83,13 +175,70 @@ Notas sobre capas: [[Imágenes: Capas y máscaras]](/notas/imagenes-capas.html) +La técnica de animación utilizada en el ejemplo se aborda en estas notas: + +[[Animación en función del tiempo (*frameCount*)]](/notas/animacion-frameCount.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. +![](/img/textura-cilindro.png) + Mira qué pasa si cambias el factor que multiplica a la cantidad correspondiente a la coordenada U. ```java +import peasy.PeasyCam; +PeasyCam cam; + +// declara variable para textura +PImage textura; + +void setup() { + size(800, 600, P3D); + cam = new PeasyCam(this, 40); + perspective(PI/3, 1.0*width/height, 1, 100); + + // carga imagen en la variable + textura = loadImage("ladrillos.jpg"); + + // configura modos de textura + textureMode( NORMAL ); // coords normalizadas + textureWrap( REPEAT ); // repite textura +} + +void draw() { + background(255); + lights(); + + noStroke(); + rotateX( PI/2 ); + cilindro(5, 10, 20); + +} + +void cilindro(float r, float h, int N){ +// dibuja un cilindro tradicional +// r: radio de la base +// h: altura +// N: número de divisiones en la base + + // variables auxiliares + float x,y,angulo; + + beginShape(QUAD_STRIP); + texture( textura ); // asigna textura + for(int i=0; i<=N; i=i+1){ + angulo = i*TWO_PI/N; + x = r*cos(angulo); + y = r*sin(angulo); + // vértice en la base + vertex(x,y,0, 1.0*i, 1); // uv: 1.0*i, 1 + // vértice en la tapa + vertex(x,y,h, 1.0*i, 0); // uv: 1.0*i, 0 + } + endShape(); +} ``` |