Apprendimento di WebGL e three.js [chiuso]

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'utilizzo di three.js rispetto a WebGL?

Dato che hai grandi ambizioni, devi investire il tempo per imparare i fondamenti. Non è una questione di ciò che impari prima: puoi impararli contemporaneamente se vuoi. (È quello che ho fatto.)

Questo significa che devi capire:

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

Three.js. Three.js fa un ottimo lavoro nell'astrarre molti dei dettagli di WebGL, quindi personalmente suggerirei di usare Three.js per il tuo progetto. Ma ricorda, Three.js è in alpha e cambia di frequente, quindi devi essere preparato per questo. Molte persone imparano Three.js studiando gli esempi. Evita libri ed esercitazioni obsoleti ed evita esempi dalla rete che rimandano a vecchie versioni della biblioteca.

WebGL. Se usi Three.js, non hai bisogno di sapere come programmare in WebGL, devi solo capire i concetti di WebGL. Ciò significa che devi solo essere in grado di leggere il codice WebGL di qualcun altro e capire cosa leggi. È molto più facile di quanto ci si aspetti che tu scriva un programma WebGL da zero. Puoi imparare i concetti di WebGL sufficientemente bene usando uno qualsiasi dei tutorial in rete, come il tutorial per principianti su WebGLFundamentals.org e Learning WebGL .

Matematica. Ancora una volta, devi almeno capire i concetti. Tre buoni libri sono:

1. 3D Math Primer per la grafica e lo 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 la programmazione di giochi 3D e computer grafica di Eric Lengyel

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

Esiste un ottimo corso online - Grafica 3D interattiva 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

I miei pensieri personali sono i seguenti:

• Se hai molto tempo, puoi imparare entrambi, ma nota che WebGL è di livello molto più basso di Three.js.
• Per un primo progetto 3d, gli esperti suggeriscono di utilizzare una libreria come Three.js per abituarsi ai termini e al modello 3d generale.

Qualunque direzione tu scelga di seguire, ti suggerisco di imparare / perfezionare le tue abilità di algebra lineare . Quindi vai avanti e impara o perfeziona la tua comprensione delle dimensioni MVP (Model View Projection) . Three.JS può sottrarre gran parte di ciò, ma penso che sia fondamentale capire bene questi 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 cosa sono quelle matrici di trasformazione e come si relazionano con le varie dimensioni / spazi, in realtà non conoscevo affatto alcuna programmazione 3D, sebbene potessi renderizzare oggetti sullo schermo.

Dato che il tuo obiettivo è creare giochi, penso che trarrai molti benefici dall'apprendere prima un po 'di WebGL grezzo, anche se finisci per usare un framework come Three.js per aiutarti a scrivere il tuo codice in seguito.

"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.
Il che ha reso la mia scelta tra WebGL o Three.js un gioco da ragazzi.

Sono venuto da un background Unity3D e Papervision3D nel passato, quindi ho avuto una buona conoscenza di come gestire lo spazio 3D. Three.js è la strada da percorrere per il tuo salto iniziale nell'apprendimento di come gestire i progetti WebGL. L'API è molto buono, è molto potente e se provieni da un'altra tecnologia 3D, sarai attivo e funzionante con pochissimo tempo.

Ho trascorso molto tempo con gli esempi di Threejs.org - ce ne sono molti e sono bravissimi a farti scendere e correre nella giusta direzione. I documenti sono abbastanza decenti, soprattutto se li stai confrontando con altre API 3D webGL là fuori.

Potresti anche prendere in considerazione la possibilità di ottenere la versione gratuita di Unity3D e l'esportatore gratuito collada (era gratis quando l'ho preso) dal loro app store (Finestra> App store). Ho trovato abbastanza facile impostare la mia scena in Unity ed esportarla su Collada per usarla con Three.js.

Inoltre, ho pubblicato questa classe che uso con Three.js chiamata 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'uso nel progetto. Cose come DrawAllAxis () sono preziose quando si esegue il debug della scena, ecc.

Giù le mani, Three.js è un ottimo modo per andare: è abbastanza flessibile da permetterti di scrivere i tuoi shader / oggetti, ecc., E abbastanza potente subito per aiutarti a raggiungere i tuoi obiettivi.

Ho acquisito three.js, ma sono anche passato a GLSL e ho sperimentato molto con il shaderMaterial three.js. Un modo per farlo: three.js estrae ancora gran parte delle cose per te, ma ti dà anche un accesso molto pulito 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, matrici dattiloscritte, perché tre lo configurano già per te, aggiornandole quando necessario. Lo shader però, puoi scrivere da zero: una semplice resa cromatica sarebbe due righe di GLSL. C'è anche un plug-in di post-elaborazione per three.js che configura tutti i buffer, i quad a schermo intero e tutto ciò di cui hai bisogno per fare gli effetti, ma lo shader può essere molto semplice per cominciare.

Poiché gli shader programmabili sono l'essenza della moderna grafica 3d, spero che la mia risposta non manchi di punto :) Prima o poi, chiunque lo faccia deve almeno capire cosa succede sotto il cofano, è la natura della bestia. Inoltre, anche la comprensione della 4a dimensione nello spazio omogeneo è probabilmente 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 sul webgl sia sufficiente e poi salto in tre js. Sarà abbastanza facile una volta compresi i concetti di base di WebGL. Link utili:

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