← Torna a 1r d’FP Bàsica

INS Pere Borrell · Rubén Pineda · 2026–2027

De la imatge a la textura 3D

Personalitza una caixa d’ordinador amb WebGL. Aprèn a carregar una imatge, situar-la sobre les cares i repetir-la sense canviar la geometria.

Objectius i materials

Navegador, paper i calculadora opcional. No cal instal·lar cap programa. Les imatges d’exemple es generen al navegador; pots completar tota la classe sense fitxers propis.

1. Observa i preveu · 5 minuts

Imagina la mateixa caixa amb una superfície llisa i amb un dibuix de circuits. Ha canviat la forma? I el material real? Escriu una hipòtesi i comprova-la al visor.

Una textura és una imatge aplicada a una superfície. Un dibuix de metall no converteix l’objecte en metall ni en modifica la conductivitat. Aquest taller mostra aparença, no propietats físiques.

2. Com afegim una textura? · 10 minuts

  1. Tria una imatge. Comença amb «Graella UV» per reconèixer l’orientació.
  2. Carrega-la. Al taller, prem «Afegeix una imatge» i selecciona un PNG, JPG o WebP del teu ordinador. No s’envia al servidor.
  3. Comprova la previsualització. La imatge s’emmarca en un quadrat de $256\times256$ píxels, amb marges clars si no és quadrada. Es conserva la proporció original.
  4. Gira la caixa. La mateixa textura s’aplica a les sis cares. Si sembla capgirada, compara la graella amb les coordenades UV.
  5. Ajusta les repeticions i la barreja. Desa una vista PNG i la textura preparada. Pots tornar a carregar aquest PNG com a textura.

UV: coordenades dins d’una imatge

$u$ indica la posició horitzontal i $v$ la vertical. En aquest taller recorren l’interval de zero a u. El centre és:

$$u=\frac12=0{,}5\qquad v=\frac12=0{,}5$$

Si repetim la imatge $r$ vegades en cada direcció, a cada cara hi ha $r^2$ còpies. Amb $r=2$:

$$2\cdot2=4\text{ còpies per cara}$$

La barreja de textura es tria com un percentatge: $0\%$ mostra només el color base i $100\%$ mostra només la imatge, amb la il·luminació de l’escena.

Ampliació · Què fa el codi WebGL?

El programa carrega els píxels a una textura de la GPU. Aquest fragment resumeix la càrrega; imatge és el Canvas quadrat ja preparat i gl el context WebGL. No és un programa complet.

// Crea la textura i carrega els píxels
const textura = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, textura);
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA,
              gl.RGBA, gl.UNSIGNED_BYTE, imatge);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);

Cada vèrtex també porta coordenades UV. El fragment shader llegeix la imatge amb texture2D:

vec3 imatge = texture2D(u_texture, v_uv * u_repeat).rgb;
vec3 color = mix(u_color, imatge, u_blend);
gl_FragColor = vec4(color * v_light, 1.0);

La textura preparada té costats que són potències de dos. Això permet la repetició en WebGL 1. Una imatge de mida arbitrària necessita altres paràmetres o una preparació prèvia com la que fa aquest taller.

3. Taller de textures · 20 minuts

Preparant WebGL…

Arrossega per girar la caixa. També pots utilitzar els controls de càmera amb el teclat.

1 · Tria la imatge

Fins a 5 MB i 4096 píxels per costat. Una entrada invàlida conserva la textura anterior.

2 · Aplica-la

3 · Observa les cares

Textura inicial preparada.

Missió al visor

Tria «Escacs», repeteix la textura dues vegades per direcció i combina-la amb el color base al $50\%$. Preveu quantes còpies veuràs en una cara abans de provar-ho.

Reforç: observa només la cara frontal i compara una i dues repeticions. Ampliació: carrega una imatge rectangular, identifica els marges i explica com s’ha conservat la proporció.

4. Calcula i explica · 15 minuts

Repte 1 · Coordenades UV

Escriu com a decimal $u=\frac14$ i $v=\frac34$.

Repte 2 · Repeticions

Una textura es repeteix tres vegades horitzontalment i tres verticalment. Quantes còpies hi ha per cara? Quantes en les sis cares?

Repte 3 · Píxels i memòria

Una imatge té $256\times256$ píxels. Quants píxels són? Si cada píxel RGBA ocupa quatre bytes sense compressió, quants bytes ocupen les dades? Aquesta quantitat no és la mida del PNG comprimit ni tota la memòria que usa el navegador.

5. Tancament individual · 5 minuts

Desa una vista i la textura. Escriu al paper tres passos per afegir la imatge. Després respon: canviar una textura de circuits per una de metall modifica la forma o la conductivitat real de la caixa?

L’explicació es revisa amb el docent.

Solucions i guia docent

Missió: escacs, dues repeticions per direcció i barreja al $50\%$. Hi ha $2\cdot2=4$ còpies per cara. La barreja usa $0{,}5$ com a factor; no indica que s’hagi pintat només mitja cara.

  1. $1/4=0{,}25$ i $3/4=0{,}75$.
  2. $3\cdot3=9$ còpies per cara; $9\cdot6=54$ en total.
  3. $256\cdot256=65536$ píxels; $65536\cdot4=262144$ bytes sense compressió.

Tancament: carregar la imatge, comprovar la previsualització i ajustar el mapatge/repetició. Canvia l’aparença; la geometria i les propietats físiques reals no es modifiquen.

Evidències: vista PNG, textura preparada i càlculs individuals. Observar ús de fraccions, comprovació del recompte i explicació de textura versus material. Proposta de 55 minuts preparada el 06/10/2026: reforç de decimals i fraccions d’A1 i introducció a dades d’imatge vinculada a capacitat digital d’A2. «Classe 12» identifica material web; no acredita impartició ni modifica la programació o els pesos d’avaluació.

Referència tècnica: MDN · Textures amb WebGL, consultada el 06/10/2026. El taller utilitza codi i patrons propis.