Sviluppo WebXR
Componenti delle App Web Spaziali
Le applicazioni XR/spaziali sono una raccolta di file che di solito vengono serviti tramite un server web. Un browser web può interpretare questi file ed eseguire l’applicazione web.
File Comuni
Di seguito sono elencati i file e le estensioni di file più importanti da conoscere:
| Estensione | Descrizione |
|---|---|
| index.html | Pagina HTML principale dell’applicazione web spaziale. |
| .js | Contiene il codice JavaScript. |
| .ts | Contiene il codice TypeScript, che viene convertito in .js prima di pubblicare l’app spaziale. |
| .wasm | WebAssembly (che è compilato da linguaggi come C++ o Rust). |
| .glb | Formato file di modello 3D che può contenere anche texture. |
| .gltf | Formato file di modello 3D basato su testo. |
| .bin | Solitamente referenziato da un .gltf e contiene dati binari del modello 3D. |
| .obj | Un formato di file modello più semplice e basato su testo. |
| .mtl | Un file materiale, solitamente referenziato da un file .obj. |
| .json | Dati arbitrari utilizzati dall’applicazione. |
| .css | Un “Foglio di Stile a Cascata”, usato per regolare l’aspetto degli elementi HTML. |
Inoltre, un’applicazione web spaziale utilizzerà file audio (.mp3, .wav, .ogg, …), file immagine (.webp, .png, .jpg) e talvolta anche file video (.webm, .mp4, .mov).
Modelli 3D
Le app VR e AR possono variare da ambienti completamente immersivi a semplici pannelli UI fluttuanti. Nella maggior parte dei casi, saranno necessari almeno alcuni modelli 3D (chiamati anche “asset” quando usati nella tua app).
Piattaforme
Molti asset gratuiti e a pagamento possono essere trovati su piattaforme come Sketchfab, TurboSquid e itch.io.
Esistono alcune fonti completamente gratuite per modelli 3D come Quaternius, Kenney.nl e Poly Haven.
Puoi anche usare spesso pacchetti di asset da Unity o Unreal Engine.
Scansione 3D
Il processo di conversione delle foto di oggetti reali in modelli 3D si chiama “Fotogrammetria”, o scansione 3D.
App come RealityScan per il tuo smartphone o software come Reality Capture possono aiutarti a portare modelli del mondo reale nelle tue applicazioni web spaziali.
Creazione
Creare manualmente modelli 3D può essere un compito che richiede tempo. I modellatori 3D utilizzano software come Blender o Maya per creare modelli 3D personalizzati per le tue esigenze.
Se il modellismo 3D non fa per te, potresti trovare un artista 3D da assumere su ArtStation.
Ottimizzazione
Tutti gli asset di un’applicazione web spaziale vengono trasmessi su internet. Questo può influire sui tempi di caricamento, quindi è importante che gli asset siano compressi e ottimizzati.
Codice
Il codice per le applicazioni web spaziali può essere scritto in TypeScript, JavaScript, C++, Rust e molti altri linguaggi. Il JavaScript viene eseguito direttamente, mentre linguaggi come C++ vengono compilati in WebAssembly.
Il codice ha molte responsabilità in un’applicazione web spaziale:
- Rendering: Creare le immagini che vengono visualizzate sullo smartphone o sul dispositivo VR. La grafica computerizzata è un campo complesso dell’informatica. Per gestirlo, gli sviluppatori WebXR usano framework di rendering per prendersi cura dei compiti comuni.
- Caricamento degli Asset: Caricare qualsiasi modello 3D, texture, audio, video e altri dati quando necessario. I framework forniranno di solito funzionalità per leggere dati da diversi formati di file 3D, e sul web, il browser può gestire il caricamento di immagini e formati di file audio per te.
- Interazione con l’Utente: Reagire all’input dell’utente, fornire feedback e applicare azioni in risposta alle azioni dell’utente.
- Logica dell’App: I calcoli, l’elaborazione e le interazioni sui dati che l’app è progettata per fare, dalle operazioni su database alla generazione di dati.
Librerie, framework e motori 3D come Wonderland Engine aiutano con tutti questi compiti e forniscono funzionalità comunemente utilizzate per permettere agli sviluppatori web spaziali di costruire le loro app in modo più efficiente.
Servizi Web
L’app potrebbe interagire con servizi online per account, memorizzazione di informazioni individuali, query su grandi database, streaming di media e molto altro.