Aprendizaje de WebGL y three.js [cerrado]

Soy nuevo y estoy empezando a aprender sobre gráficos 3D por computadora en navegadores web. Estoy interesado en hacer juegos 3D en un navegador. Para cualquiera que haya aprendido WebGL y three.js ...

1. ¿Se requiere conocimiento de WebGL para usar three.js?

2. ¿Cuáles son las ventajas de usar three.js vs. WebGL?

Como tienes grandes ambiciones, debes invertir el tiempo para aprender los fundamentos. No se trata de lo que aprende primero: puede aprenderlos simultáneamente si lo desea. (Eso fue lo que hice.)

Esto significa que necesita comprender:

1. Conceptos de WebGL
2. Three.js
3. Los conceptos matemáticos subyacentes.

Three.js. Three.js hace un excelente trabajo al abstraer muchos de los detalles de WebGL, así que personalmente, sugiero usar Three.js para su proyecto. Pero recuerde, Three.js está en alfa , y está cambiando con frecuencia, por lo que debe estar preparado para eso. La mayoría de la gente aprende Three.js estudiando los ejemplos. Evite libros y tutoriales obsoletos, y evite ejemplos de la red que enlazan con versiones antiguas de la biblioteca.

WebGL. Si usa Three.js, no necesita saber cómo programar en WebGL, solo necesita comprender los conceptos de WebGL. Eso significa que solo necesita poder leer el código WebGL de otra persona y comprender lo que lee. Eso es mucho más fácil de lo que se espera que escriba un programa WebGL usted mismo desde cero. Puede aprender los conceptos de WebGL suficientemente bien utilizando cualquiera de los tutoriales en la red, como el tutorial para principiantes en WebGLFundamentals.org y Learning WebGL .

Matemáticas. Nuevamente, al menos necesita comprender los conceptos. Tres buenos libros son:

1. 3D Math Primer para gráficos y desarrollo de juegos por Fletcher Dunn e Ian Parberry

2. Matemáticas esenciales para juegos y aplicaciones interactivas: una guía del programador de James M. Van Verth y Lars M. Bishop

3. Matemáticas para programación de juegos en 3D y gráficos por computadora por Eric Lengyel

Espero que esto te sea útil. Buena suerte.

Hay un muy buen curso en línea: Gráficos 3D interactivos en https://www.udacity.com/course/cs291 en THREE.js. Este curso incluye tareas también para obtener experiencia práctica. Cubre todos los conceptos básicos de Three.js y Computer Graphics

Mis pensamientos personales son los siguientes:

• Si tiene mucho tiempo, puede aprender ambos, pero tenga en cuenta que WebGL tiene un nivel mucho más bajo que Three.js.
• Para un primer proyecto 3D, los expertos sugieren usar una biblioteca como Three.js para acostumbrarse a los términos y al modelo 3D general.

Independientemente de la dirección que elija, le sugiero que aprenda / perfeccione sus habilidades de álgebra lineal . Luego, continúe y aprenda o perfeccione su comprensión sobre las dimensiones MVP (Proyección de vista de modelo) . Three.JS puede abstraer gran parte de eso, pero creo que es clave que uno comprenda bien esos conceptos antes de tomar en serio cualquier desarrollo 3D.

Escribí un artículo introductorio sobre MVP cuando estaba aprendiendo programación 3D por primera vez con OpenGL. Me di cuenta de que hasta que pude explicar cuáles son esas matrices de transformación y cómo se relacionan con las diversas dimensiones / espacios, realmente no sabía ninguna programación 3D, aunque podía representar objetos en la pantalla.

Dado que su objetivo es crear juegos, creo que se beneficiará mucho al aprender algo de WebGL sin procesar primero, incluso si termina utilizando un marco como Three.js para ayudarlo a escribir su código más adelante.

"WebGL es una API 2D y no una API 3D"

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

Este artículo describe las diferencias fundamentales entre las bibliotecas WebGL y 3d como three.js.
Lo que hizo que mi elección entre WebGL o Three.js sea obvia.

Vengo de un fondo de Unity3D, así como de Papervision3D en el pasado, así que tenía una buena comprensión de cómo lidiar con el espacio 3D. Three.js es el camino a seguir para tu salto inicial en aprender a lidiar con los proyectos WebGL. La API es muy buena, es muy potente y si vienes de otra tecnología 3D, estarás en funcionamiento con muy poco tiempo.

Pasé mucho tiempo con los ejemplos de Threejs.org: hay un montón de ellos y son muy buenos para sacarte y correr en la dirección correcta. Los documentos son lo suficientemente decentes, especialmente si los está comparando con otros API webGL 3D disponibles.

También puede considerar obtener la versión gratuita de Unity3D y el exportador gratuito collada (era gratis cuando lo obtuve) de su tienda de aplicaciones (Ventana> Tienda de aplicaciones). Me resultó bastante fácil configurar mi escena en Unity y exportarla a Collada para usarla con Three.js.

Además, publiqué esta clase que uso con Three.js llamada neo ( http://rockonflash.com/webGL/three/neo.js ). Simplemente agréguelo a su proyecto, luego llame a Neo.JackIntoThree () y agregará los métodos / propiedades a Object3D para usar en su proyecto. Cosas como DrawAllAxis () son invaluables al depurar su escena, etc.

Sin embargo, Three.js es una excelente manera de hacerlo: es lo suficientemente flexible como para permitirle escribir sus propios sombreadores / objetos, etc., y lo suficientemente potente desde el primer momento para ayudarlo a lograr sus objetivos.

Recogí three.js, pero también salté a GLSL y experimenté mucho con three.js shaderMaterial. Una forma de hacerlo: three.js aún abstrae gran parte de las cosas por usted, pero también le brinda un acceso muy limpio y de bajo nivel a todas las capacidades de representación (proyección, animación).

De esta manera, puedes seguir incluso algo como este increíble tutorial de Open-GL . No tiene que configurar las matrices, matrices escritas, porque tres ya lo configuran para usted, actualizándolas cuando sea necesario. Sin embargo, con el sombreador, puede escribir desde cero: una reproducción de color simple sería dos líneas de GLSL. También hay un complemento de procesamiento posterior para three.js que configura todos los buffers, quads de pantalla completa y todo lo que necesita para hacer los efectos, pero el sombreador puede ser muy simple para empezar.

Dado que los sombreadores programables son la esencia de los gráficos modernos en 3D, espero que mi respuesta no se pierda el punto :) Tarde o temprano, cualquiera que haga esto necesita al menos entender lo que sucede debajo del capó, es la naturaleza de la bestia. Además, comprender la cuarta dimensión en el espacio homogéneo es probablemente importante también.

Este libro es bueno para WebGL.

Acabo de aprender un poco de ambos y siento que entiendo los conceptos básicos de webgl, creo que una introducción en webgl es suficiente y luego saltar a tres js. Será bastante fácil una vez que comprenda los conceptos subyacentes de WebGL. Enlaces útiles:

1. La mejor introducción que he leído: http://dev.opera.com/articles/view/an-introduction-to-webgl/
2. Tutoriales completos: http://www.johannes-raida.de/tutorials.htm