Una pista, tres dimensions
La pista té $20\,\mathrm{m}$. El carretó comença a $x=1\,\mathrm{m}$ i el límit groc és $x=19\,\mathrm{m}$. La fletxa blava representa la velocitat; la taronja, el fregament. El color de la càrrega representa l’energia cinètica restant.
Preparant l’escena 3D…
Aplica els shaders editats i observa la càrrega des d’aquesta vista.
Arrossega sobre l’escena per girar la càmera. També pots utilitzar els controls següents amb el teclat. Girar la càmera no canvia la física.
Canviar massa, velocitat o fregament reinicia la prova. Pots girar la càmera abans, durant o després de la frenada.
A punt.
És el mateix model físic de la classe: pista horitzontal, fregament constant i cap empenta. La prova acaba en aturar-se o arribar al límit; no simula una col·lisió. El color no mesura temperatura.
Torna al laboratori 2D i al taller de shadersEdita el teu carretó 3D
Canvia la forma, els colors i el codi que pinta la càrrega. Les dimensions són paràmetres visuals: la massa i les forces es trien als controls físics. Editar el disseny conserva el temps i el resultat de la prova.
Edita les dimensions amb codi JSON
Modifica un valor i prem «Aplica». Els decimals del codi porten punt; les dimensions s’expressen en $\mathrm{m}$. Una configuració invàlida conserva el disseny anterior.
Disseny original preparat.
Programa els shaders de la càrrega
El vertex shader transforma els vèrtexs 3D; el fragment shader pinta els píxels. Pots editar-los tots dos. La pista, les rodes i les fletxes conserven el seu shader de referència.
u_color és el color de la càrrega; u_time és el temps de simulació; u_speed és la velocitat. u_energy indica la proporció d’energia cinètica restant, entre $0$ i $1$.
Colors per llegir millor el codi · Tab per sagnar · Maj + Tab per sortir de l’editor · Ctrl/⌘ + Retorn per aplicar. Els dos shaders s’apliquen junts.
Editors preparats. WebGL és necessari per aplicar els shaders.
La deformació és visual: no canvia la massa ni calcula col·lisions. Si el codi no compila, es conserva l’últim shader vàlid. Si WebGL falla, el visor utilitza un renderitzador 3D compatible: continuen funcionant la càmera, la geometria i les lectures físiques. Els shaders necessiten WebGL per aplicar-se.
El fitxer desa geometria, colors i shaders. Les dades es descarreguen al teu ordinador; no s’envien a cap servidor.
Explora i modifica el 3D
- Geometria. Canvia de perspectiva a vista superior i lateral. Identifica llargada, amplada i alçada. Quines parts del carretó queden amagades en cada vista?
- La càmera no frena. Amb $m=4\,\mathrm{kg}$, $v_0=2\,\mathrm{m/s}$ i $F_f=4\,\mathrm{N}$, avança mig segon i anota la velocitat. Gira la càmera sense avançar el temps: canvia la lectura?
- Predicció en 3D. Reinicia, dobla només la velocitat i prediu la distància de frenada. Comprova-la des de dalt i explica per què el resultat coincideix amb el simulador 2D.
- Edició. Canvia el color i l’alçada, aplica «Deformació dels vèrtexs» i avança mig segon. Explica què canvia visualment i comprova que les lectures físiques coincideixen amb les del disseny original.
Idea clau: un objecte té coordenades $(x,y,z)$. La càmera i la projecció en perspectiva transformen aquesta escena en una imatge plana a la pantalla. WebGL utilitza el buffer de profunditat per decidir quina superfície es veu al davant.
Solucions de l’extra
La vista superior mostra sobretot llargada i amplada; la lateral, llargada i alçada. Girar la càmera no canvia els valors físics: després de $0{,}5\,\mathrm{s}$, $v=1{,}5\,\mathrm{m/s}$. El cas inicial necessita $d_f=2\,\mathrm{m}$; a $v_0=4\,\mathrm{m/s}$ necessita $d_f=8\,\mathrm{m}$. El model és el mateix: només canvia la representació visual.