webgl three.js

Aprendiendo WebGL y three.js



(8)

"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 fuera una obviedad.

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

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

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

Cualquiera que sea 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 de MVP (Proyección de vista de modelo) . Three.JS puede abstraer gran parte de eso, pero creo que es clave que uno entienda esos conceptos antes de tomar en serio cualquier desarrollo en 3D.

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

Como su objetivo es crear juegos, creo que se beneficiará mucho aprendiendo algunos WebGL sin procesar primero, incluso si termina usando un framework como Three.js para ayudarlo a escribir su código más adelante.

Hay un curso en línea muy bueno: 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 es mucho más bajo que Three.js.
  • Para un primer proyecto en 3D, los expertos sugieren usar una biblioteca como Three.js para acostumbrarse a los términos y al modelo general en 3D.

Recogí three.js, pero también salté en GLSL y experimenté mucho con el material shader de three.js. Una forma de hacerlo: three.js todavía abstrae gran parte de las cosas por usted, pero también le proporciona 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 así como este impresionante tutorial open-gl . No tiene que configurar las matrices, matrices tipadas, porque tres ya lo configuran para usted, actualizándolo cuando sea necesario. Sin embargo, el sombreador puede escribir desde cero: una simple representación de color sería dos líneas de GLSL. También hay un plug-in 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 shader puede ser muy simple para empezar.

Dado que los sombreadores programables son la esencia de los modernos gráficos 3D, espero que mi respuesta no falte 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, también es importante comprender la 4ª dimensión en el espacio homogéneo.

Este libro es bueno para WebGL.

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

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

También podría considerar obtener la versión gratuita de Unity3D y el exportador gratuito de 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 ). Solo agréguela 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 lugar a dudas, Three.js es una gran forma de hacerlo; es lo suficientemente flexible como para permitirle escribir sus propios sombreadores / objetos, etc., y lo suficientemente potente como para sacarlo de la caja para ayudarlo a lograr sus objetivos.

Como tiene grandes ambiciones, debe invertir el tiempo para aprender los fundamentos. No es una cuestión de lo que aprendes primero; puedes aprenderlos simultáneamente si quieres. (Eso fue lo que hice.)

Esto significa que debes entender:

  1. Conceptos 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 las personas aprenden Three.js estudiando los ejemplos. Evita los libros y tutoriales obsoletos, y evita los ejemplos de la red que enlazan a las versiones anteriores 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. Es mucho más fácil de lo que se espera que escriba un programa WebGL desde cero. Puede aprender los conceptos de WebGL lo suficientemente bien utilizando cualquiera de los tutoriales en la red, como el tutorial para principiantes en WebGLFundamentals.org y Learning WebGL .

Mates. De nuevo, al menos necesitas entender los conceptos. Tres buenos libros son:

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

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

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

Espero que esto sea útil para ti. Buena suerte.