Aprendizaje de WebGL y three.js [cerrado]

143

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?

r1nzler
fuente
10
Usa Three.js. Período. Es exactamente lo que dice West a continuación, aunque simple en teoría, escribir WebGL desde cero es un dolor. Hay tantas cosas que casi todas las aplicaciones WebGL necesitarán / querrán hacer. Estas cosas pueden abstraerse de ti. Además, Three.js se ha convertido en una biblioteca increíble. Si revisa Google Trends o la cantidad de preguntas SO aquí, verá que se ha adelantado mucho a la competencia.
theblang
44
@GeorgeStocker En realidad, las respuestas a esta pregunta no se han basado principalmente en la opinión, sino en hechos, referencias y experiencia específica. Esta ha sido una publicación valiosa para la comunidad there.js, y parte (2) de la pregunta es ciertamente aceptable. ¿Cómo recomendaría reformularlo para que sea aceptable para usted, es decir, sin cambiar el significado / intención de la pregunta?
WestLangley
@WestLangley No he escuchado nada más que opiniones en las respuestas dadas; sin mencionar que "Pros y contras de usar cualquiera [biblioteca]" es demasiado amplio para Stack Overflow.
George Stocker
2
@GeorgeStocker Su respuesta es en sí misma una opinión, y estoy totalmente en desacuerdo con ella. ¿Cómo recomendarías volver a redactar la publicación para que sea aceptable para ti?
WestLangley
1
Quizás las preguntas podrían reformularse para preguntar cómo aprender WebGL es beneficioso para usar Three.js. La respuesta a eso estaría respaldada por hechos, referencias y experiencia.
zz85

Respuestas:

203

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.

WestLangley
fuente
¿Cuál es el mejor sitio para aprender sobre conceptos webgl de principio a fin en inglés fácil? O al menos cada vez que el autor usa alguna 'palabra', lo hace después de haberlo descrito una vez antes, así que aproveche.
Muhammad Umer
Vea el enlace al tutorial de Learning WebGL en el cuerpo de la publicación.
WestLangley
22

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

Bhupendra
fuente
13

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.
Dan D.
fuente
3
Estoy de acuerdo con ésto. En este punto, parece que podría ser bueno tener ambos en su cinturón de herramientas. Comenzaría aprendiendo Three.JS, luego haría algunos sombreadores con GLSL y seguiría intentando aprender más sobre WebGL todo el tiempo.
Cory Gross
11

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.

rodrigo-silveira
fuente
10

"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.

Bob Fanger
fuente
La cita no es del texto principal de la página vinculada. Sin embargo, acepto parcialmente los argumentos expuestos en la página vinculada. No se trata de ser una API 2D, sino de ser una API de rasterización (que es adecuada para gráficos 2D y 3D).
Elias Hasle
6

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.

neoRiley
fuente
3

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.

cabeza hueca
fuente