Un’isoletta di sabbia nell’acqua, con una palma a segmenti, tre cocchi, i sassi e i ciuffi d’erba. Il vento piega la palma e muove le foglie, le onde partono dalla riva e la schiuma va e viene; nel visore il vento lo fai tu, col puntatore, e un clic manda una raffica.
Cosa c’è dentro
- Mesh
- 206.442 vertici, 411.752 triangoli
- Scheletro
- 46 ossa
- Animazione
brezza, 8 secondi, in loop. Una brezza che va e viene: la palma si piega e torna su, i cocchi dondolano un attimo dopo, le foglie sbattono con un’onda che corre fino alla punta, l’erba trema. Sull’acqua le onde partono dalla riva verso il largo e la schiuma si allarga e si ritira. Si chiude su sé stessa.- Parti
acqual’acqua, con le onde come chiavi di forma (onda_1, onda_2, onda_3)schiumala schiuma intorno alla riva, con la chiave di forma risaccasabbial’isolasassii quattro sassitroncoil tronco a sei segmenticocchii tre cocchifogliele dieci foglieciuffii tre ciuffi d’erbatronco_1, …, tronco_4le ossa del tronco, dalla sabbia alla cimafoglia_1_1, …, foglia_10_3tre ossa per foglia, dal gambo alla puntafilo_1, …, filo_10un osso per ogni filo d’erba
- Materiali
- Acqua (azzurro vivo, con la vernice lucida sopra), Schiuma (bianco appena azzurro), Sabbia (sabbia calda, opaca e vellutata), Sassi (grigio tortora, satinato), Tronco (marrone aranciato, satinato), Cocchi (marrone scuro), Foglie (verde prato, vellutato), Erba (il verde dei ciuffi)
- Peso
- 2 MB
Come si usa
Carica il GLB e fai partire l’animazione. Ogni parte è un oggetto col suo nome, e le ossa si possono piegare anche a mano, dopo il mixer: è così che nel visore il vento lo fai tu.
import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { MeshoptDecoder } from 'three/addons/libs/meshopt_decoder.module.js';
import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
// il modello: compresso con meshopt, serve il suo decoder
const loader = new GLTFLoader().setMeshoptDecoder(MeshoptDecoder);
const gltf = await loader.loadAsync('isola-con-la-palma.glb');
scene.add(gltf.scene);
// l'animazione "brezza": 8 secondi, in loop
const mixer = new THREE.AnimationMixer(gltf.scene);
mixer.clipAction(gltf.animations[0]).play();
// le ossa: piegale tu, sopra l'animazione
const osso = gltf.scene.getObjectByName('tronco_4');
// la luce: uno studio bianco, e il bianco resta bianco
renderer.toneMapping = THREE.NoToneMapping;
scene.environment = new THREE.PMREMGenerator(renderer)
.fromScene(new RoomEnvironment(), 0.04).texture;
const clock = new THREE.Clock();
renderer.setAnimationLoop(() => {
mixer.update(clock.getDelta());
osso.rotation.z += 0.08 * Math.sin(clock.elapsedTime * 2); // dopo il mixer: vince sulla clip
renderer.render(scene, camera);
});Com’è fatto
Dal disegno alla forma
Prima di modellare c’era da capire da dove fosse guardata l’isola: dai bordi dell’acqua, della sabbia e del tronco nel disegno sono usciti l’altezza della camera e l’obiettivo, e ogni bordo è stato riportato in pianta. Poi le sagome del modello e del disegno sono state confrontate di continuo, parte per parte, fino a farle combaciare.
Liscia davvero
Ogni pezzo è una superficie matematica: la sabbia è un’unione morbida di ellissoidi, l’acqua e la schiuma sono lastre coi bordi arrotondati che seguono la distanza esatta dalla riva, i sassi sono ciottoli piegati da due onde lente. La mesh nasce fitta e viene rifatta a triangoli regolari; ogni vertice viene riportato esattamente sulla superficie, con la normale presa dalla superficie stessa. Alla fine ogni pezzo passa un controllo: zero triangoli rovesciati, zero bordi aperti, zero spigoli doppi.
Le foglie
Ogni foglia nasce piatta: una sagoma con le tacche a V e un gambo stretto, spessa, col bordo tondo costruito anello per anello come un tubo. Poi si piega a tetto sulla nervatura, si curva lungo la sua spina e si gira un poco su sé stessa; le normali passano per la stessa piega, così la luce resta esatta anche sulla foglia curvata. Le dieci foglie nascono a raggiera dentro il cuore della chioma, su tre piani che si alternano: i gambi escono già separati.
Il tronco e i cocchi
Il tronco sono sei vasi impilati, come nel disegno: ognuno ha un labbro tondo in basso che sporge sul segmento di sotto e si stringe verso l’alto, e i giunti girano un po’ storti e restano pieghe nette. In cima c’è il cuore della chioma, una cupola liscia da cui escono le foglie; i tre cocchi ci si appoggiano, ognuno toccando il tronco e i vicini.
Il vento e le onde
Quarantasei ossa: quattro per il tronco, una per i cocchi, tre per ognuna delle dieci foglie, una per ogni filo d’erba, più la radice. La brezza è scritta come funzioni del tempo che si ripetono ogni otto secondi, campionate a 24 fotogrammi al secondo. Le onde sono tre chiavi di forma sfasate di un terzo di giro: pesate a turno fanno un’onda che parte dalla riva e va verso il largo, con le normali di ogni onda calcolate esatte. L’ombra fra le parti è cotta nei colori dei vertici.
Niente che si tocca
Le foglie sono state sistemate da un programma che le sposta di pochi gradi finché ognuna lascia spazio alle altre, ai cocchi e al tronco, restando il più vicino possibile al disegno; lo stesso per i fili d’erba, che escono dalla sabbia già separati e non tornano mai giù, nemmeno piegati dal vento. Poi ogni fotogramma della brezza, e il visore con le raffiche più forti e l’isola girata in ogni verso, è stato controllato triangolo per triangolo: niente passa dentro qualcos’altro.