Apprendimento WebGL e three.js

Sono nuovo e sto iniziando a conoscere la computer grafica 3D nei browser web. Sono interessato a creare giochi 3D in un browser. Per chiunque abbia imparato sia WebGL che three.js

  1. È richiesta la conoscenza di WebGL per utilizzare three.js?

  2. Quali sono i vantaggi dell’uso di three.js e WebGL?

Dal momento che hai grandi ambizioni, devi investire il tempo per imparare le basi. Non è una questione di ciò che impari prima – puoi impararli simultaneamente se vuoi. (Questo è quello che ho fatto.)

Ciò significa che devi capire:

  1. Concetti WebGL
  2. Three.js
  3. I concetti matematici sottostanti

Three.js. Three.js fa un eccellente lavoro di astrazione di molti dettagli di WebGL, quindi personalmente suggerirei di utilizzare Three.js per il tuo progetto. Ma ricorda, Three.js è in alpha e sta cambiando frequentemente, quindi devi essere preparato per quello. Molte persone imparano Three.js studiando gli esempi. Evita libri ed esercitazioni obsolete ed evita esempi dalla rete che rimandino alle vecchie versioni della biblioteca.

WebGL. Se si utilizza Three.js, non è necessario sapere come programmare in WebGL, è sufficiente comprendere i concetti WebGL. Ciò significa che devi solo essere in grado di leggere il codice WebGL di qualcun altro e capire cosa leggi. Questo è molto più facile di quanto ci si aspetti da scrivere da zero un programma WebGL. È ansible apprendere i concetti WebGL in modo sufficiente utilizzando qualsiasi tutorial in rete, ad esempio il tutorial per principianti su WebGLFundamentals.org e Learning WebGL .

Matematica. Di nuovo, devi almeno capire i concetti. Tre buoni libri sono:

  1. 3D Math Primer per grafica e sviluppo di giochi di Fletcher Dunn e Ian Parberry

  2. Matematica essenziale per giochi e applicazioni interattive: una guida per programmatori di James M. Van Verth e Lars M. Bishop

  3. Matematica per 3D Game Programming e Computer Graphics di Eric Lengyel

Spero che questo ti sia di aiuto. In bocca al lupo.

C’è un ottimo corso online – Grafica 3D intertriggers su https://www.udacity.com/course/cs291 su THREE.js. Questo corso include anche incarichi per acquisire esperienza pratica. Copre tutti i concetti di base di Three.js e Computer Graphics

Indipendentemente dalla direzione in cui scegli di andare, ti suggerisco di imparare / perfezionare le tue abilità di algebra lineare . Quindi vai avanti e apprendi o perfeziona le tue conoscenze sulle dimensioni MVP (Model View Projection) . Three.JS può astrarre molto di questo, ma penso che sia fondamentale capire bene quei concetti prima di prendere sul serio qualsiasi sviluppo 3D.

Ho scritto un articolo introduttivo su MVP quando stavo imparando la programmazione 3D con OpenGL. Mi sono reso conto che fino a quando non sono stato in grado di spiegare quali sono le matrici di trasformazione e in che modo si relazionano alle varie dimensioni / spazi, non conoscevo affatto alcuna programmazione 3D, sebbene potessi renderizzare oggetti sullo schermo.

Dal momento che il tuo objective è creare giochi, penso che trarrai vantaggio dall’apprendimento di alcuni WebGL grezzi, anche se finisci per utilizzare un framework come Three.js per aiutarti a scrivere il tuo codice in un secondo momento.

“WebGL è un’API 2D e non un’API 3D”

http://webglfundamentals.org/webgl/lessons/webgl-2d-vs-3d-library.html

Questo articolo descrive le differenze fondamentali tra le librerie WebGL e 3d come three.js.
Che ha reso la mia scelta tra WebGL o Three.js un gioco da ragazzi.

Sono venuto da un background di Unity3D e da Papervision3D nel corso della giornata, quindi ho avuto una buona conoscenza di come trattare lo spazio 3D. Three.js è la via da seguire per il tuo primo salto nell’apprendimento su come gestire i progetti WebGL. L’API è molto buona, è molto potente e se vieni da un’altra tecnologia 3D, sarai operativo e funzionante con pochissimo tempo.

Ho passato molto tempo con gli esempi di Threejs.org – ce ne sono un sacco e sono molto bravi a farti andare e correre nella giusta direzione. I documenti sono abbastanza decenti, specialmente se li stai confrontando con altre API 3D WebGL là fuori.

Potresti anche prendere in considerazione la possibilità di scaricare la versione gratuita di Unity3D e l’esportatore gratuito collada (era gratuito quando l’ho ottenuto) dal loro app store (Finestra> App store). Ho trovato abbastanza facile configurare la mia scena in Unity ed esportarla in Collada per l’uso con Three.js.

Inoltre, ho postato questa class che uso con Three.js chiamato neo ( http://rockonflash.com/webGL/three/neo.js ). Basta aggiungerlo al progetto, quindi chiamare Neo.JackIntoThree () e aggiungerà i metodi / proprietà a Object3D per l’utilizzo nel progetto. Cose come DrawAllAxis () hanno un valore inestimabile durante il debug della tua scena, ecc.

Tuttavia, Three.js è un ottimo modo per andare: è abbastanza flessibile da permetterti di scrivere i tuoi shader / oggetti e così via, e abbastanza potente, pronto per aiutarti a raggiungere i tuoi obiettivi.

Ho scelto three.js, ma ho anche fatto un salto in GLSL e ho sperimentato molto con three.js shaderMaterial. Un modo per risolverlo – three.js astrae ancora gran parte del materiale per te, ma ti offre anche un accesso molto semplice e di basso livello a tutte le funzionalità di rendering (proiezione, animazione).

In questo modo, puoi seguire anche qualcosa come questo fantastico tutorial open-gl . Non è necessario impostare le matrici, gli array digitati, poiché tre già lo configurano per te, aggiornandoli quando necessario. Lo shader però, puoi scrivere da zero: una semplice resa cromatica sarebbe composta da due righe di GLSL. C’è anche un plug-in di post-elaborazione per three.js che imposta tutti i buffer, i quad a schermo intero e tutto il necessario per fare gli effetti, ma lo shader può essere molto semplice.

Dal momento che gli shader programmabili sono l’essenza della moderna grafica 3D, spero che la mia risposta non manchi il punto 🙂 Prima o poi, chiunque faccia questo deve almeno capire cosa succede sotto il cofano, è la natura della bestia. Anche la comprensione della quarta dimensione nello spazio omogeneo è probabilmente altrettanto importante.

Questo libro è utile per WebGL.

Ho appena imparato un po ‘di entrambi e sento che capisco le basi del webgl, penso che un’introduzione su webgl sia sufficiente e poi saltare in tre js. Sarà abbastanza facile una volta capito i concetti sottostanti di WebGL. Link utili:

  1. Best Intro ho letto: http://dev.opera.com/articles/view/an-introduction-to-webgl/
  2. Tutorial completi: http://www.johannes-raida.de/tutorials.htm