Aprendendo WebGL e three.js [fechado]

Sou novo e estou começando a aprender sobre gráficos de computador em 3D em navegadores da web. Estou interessado em criar jogos 3D em um navegador. Para quem aprendeu o WebGL e o three.js ...

1. O conhecimento do WebGL é necessário para o uso do three.js?

2. Quais são as vantagens de usar three.js vs. WebGL?

Como você tem grandes ambições, precisa investir tempo para aprender os fundamentos. Não é uma questão do que você aprende primeiro - você pode aprendê-los simultaneamente, se quiser. (Isso é o que eu fiz.)

Isso significa que você precisa entender:

1. Conceitos WebGL
2. Three.js
3. Os conceitos matemáticos subjacentes

Three.js. O Three.js faz um excelente trabalho de abstrair muitos detalhes do WebGL; portanto, pessoalmente, sugiro o uso do Three.js para o seu projeto. Mas lembre-se, o Three.js está em alfa e está mudando frequentemente, portanto, você deve estar preparado para isso. A maioria das pessoas aprende o Three.js estudando os exemplos. Evite livros e tutoriais desatualizados e exemplos da rede que apontam para versões antigas da biblioteca.

WebGL. Se você usa o Three.js, não precisa saber programar no WebGL, apenas precisa entender os conceitos do WebGL. Isso significa que você só precisa ler o código WebGL de outra pessoa e entender o que lê. Isso é muito mais fácil do que se espera que você escreva um programa WebGL do zero. Você pode aprender os conceitos de WebGL suficientemente bem usando qualquer um dos tutoriais na rede, como o tutorial para iniciantes em WebGLFundamentals.org e Learning WebGL .

Matemática. Novamente, você pelo menos precisa entender os conceitos. Três bons livros são:

1. Primer de matemática 3D para desenvolvimento de gráficos e jogos de Fletcher Dunn e Ian Parberry

2. Matemática Essencial para Jogos e Aplicações Interativas: Guia do Programador por James M. Van Verth e Lars M. Bishop

3. Matemática para programação de jogos 3D e computação gráfica por Eric Lengyel

Espero que isso seja útil para você. Boa sorte.

Há um curso on-line muito bom - Gráficos 3D interativos em https://www.udacity.com/course/cs291 no THREE.js. Este curso inclui tarefas também para obter experiência prática. Abrange todos os conceitos básicos de Three.js e Computer Graphics

Meus pensamentos pessoais são os seguintes:

• Se você tiver tempo suficiente, poderá aprender os dois, mas observe que o WebGL é um nível muito mais baixo que o Three.js.
• Para um primeiro projeto 3d, os especialistas sugerem o uso de uma biblioteca como Three.js para se acostumar com os termos e o modelo 3d geral.

Qualquer que seja a direção que você escolher, sugiro que você aprenda / aprimore suas habilidades de álgebra linear . Em seguida, vá em frente e aprenda ou aprimore seu entendimento sobre as dimensões do MVP (Model View Projection) . O Three.JS pode abstrair muito disso, mas acho fundamental que se entenda bem esses conceitos antes de levar a sério qualquer desenvolvimento em 3D.

Escrevi um artigo introdutório sobre MVP quando aprendi a programação 3D com o OpenGL. Percebi que até conseguir explicar o que são essas matrizes de transformação e como elas se relacionam com as várias dimensões / espaços, eu realmente não conhecia nenhuma programação 3D, apesar de poder renderizar objetos na tela.

Como seu objetivo é criar jogos, acho que você se beneficiará muito aprendendo primeiro um WebGL bruto, mesmo que você acabe usando uma estrutura como o Three.js para ajudá-lo a escrever seu código posteriormente.

"WebGL é uma API 2D e não uma API 3D"

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

Este artigo descreve as diferenças fundamentais entre as bibliotecas WebGL e 3D, como three.js.
O que fez da minha escolha entre WebGL ou Three.js um acéfalo.

Eu vim de um background do Unity3D e do Papervision3D na época, então eu tinha um bom entendimento de como lidar com o espaço 3D. Three.js é o caminho a seguir para o seu salto inicial para aprender a lidar com projetos WebGL. A API é muito boa, é muito poderosa e, se você vier de outra tecnologia 3D, estará em funcionamento com muito pouco tempo.

Passei muito tempo com os exemplos do Threejs.org - há muitos deles e eles são muito bons para fazer você sair e correr na direção certa. Os documentos são decentes o suficiente, especialmente se você os estiver comparando com outras APIs do webGL 3D por aí.

Você também pode considerar obter a versão gratuita do Unity3D e o exportador gratuito de collada (estava livre quando o recebi) em sua loja de aplicativos (Window> App Store). Achei fácil configurar minha cena no Unity e exportá-la para o Collada para uso com o Three.js.

Além disso, publiquei essa classe que uso com o Three.js chamada neo ( http://rockonflash.com/webGL/three/neo.js ). Basta adicioná-lo ao seu projeto e, em seguida, chamar Neo.JackIntoThree () e ele adicionará os métodos / propriedades ao Object3D para uso em seu projeto. Coisas como DrawAllAxis () são inestimáveis ​​ao depurar sua cena etc.

No entanto, o Three.js. é um ótimo caminho a percorrer - é flexível o suficiente para permitir que você escreva seus próprios shaders / objetos etc., e poderoso o suficiente para ajudá-lo a alcançar seus objetivos.

Eu peguei o three.js, mas também entrei no GLSL e experimentei bastante o three.js shaderMaterial. Uma maneira de fazer isso - o three.js ainda abstrai muito do material para você, mas também oferece um acesso muito limpo e de baixo nível a todos os recursos de renderização (projeção, animação).

Dessa forma, você pode seguir até mesmo algo como este incrível tutorial de tela aberta . Você não precisa configurar as matrizes, matrizes digitadas, porque três já as configuram para você, atualizando-as quando necessário. O sombreador, no entanto, você pode escrever do zero - uma simples renderização de cores seria duas linhas de GLSL. Há também um plug-in de pós-processamento para o three.js que configura todos os buffers, quads em tela cheia e outras coisas necessárias para você fazer os efeitos, mas o shader pode ser muito simples para começar.

Como os sombreadores programáveis ​​são a essência dos gráficos 3D modernos, espero que minha resposta não perca o sentido :) Mais cedo ou mais tarde, qualquer pessoa que faça isso precisará entender pelo menos o que acontece sob o capô, é a natureza da besta. Além disso, é provável que também seja importante entender a quarta dimensão no espaço homogêneo.

Este livro é bom para o WebGL.

Acabei de aprender um pouco dos dois e sinto que entendo o básico do webgl, acho que uma introdução ao webgl é suficiente e depois pulo para três js. Será bem fácil quando você entender os conceitos subjacentes do WebGL. Links Úteis:

1. Melhor Introdução que li: http://dev.opera.com/articles/view/an-introduction-to-webgl/
2. Tutoriais abrangentes: http://www.johannes-raida.de/tutorials.htm