Изучение WebGL и three.js

Я новичок и начинаю изучать 3D-компьютерную графику в веб-браузерах. Я заинтересован в создании 3D-игр в браузере. Для тех, кто изучил как WebGL, так и three.js...

  • Требуется ли знание WebGL для использования three.js?

  • В чем преимущества использования трех. js против WebGL?

Ответы

Ответ 1

Поскольку у вас большие амбиции, вам нужно потратить время на изучение основ. Это не вопрос того, чему вы учитесь в первую очередь - вы можете изучать их одновременно, если хотите. (Это то, что я сделал.)

Это означает, что вам нужно понять:

  • Концепции WebGL
  • Three.js
  • Основные математические понятия

Three.js. Three.js отлично справляется с абстрагированием многих деталей WebGL, поэтому лично я предлагаю использовать Three.js для вашего проекта. Но помните, что Three.js находится в альфе, и она часто меняется, поэтому вы должны быть готовы к этому. Большинство людей изучают Tr.js, изучая примеры. Избегайте устаревших книг и руководств и избегайте примеров из сети, ссылающихся на старые версии библиотеки.

WebGL. Если вы используете Three.js, вам не нужно знать, как программировать в WebGL, вам просто нужно понять концепции WebGL. Это означает, что вам просто нужно иметь возможность читать код другого WebGL и понимать, что вы читаете. Это намного проще, чем ожидать, что вы будете писать программу WebGL самостоятельно с нуля. Вы достаточно хорошо изучаете концепции WebGL, используя любые обучающие программы в сети, такие как учебник для начинающих WebGLFundamentals.org и Обучение WebGL.

Математика. Опять же, вы, по крайней мере, должны понимать понятия. Три хорошие книги:

  • 3D Math Primer для разработки графики и игр от Fletcher Dunn и Ian Parberry

  • Существенная математика для игр и интерактивных приложений: руководство программистов Джеймса М. Ван Верта и Ларса М. Бишопа

  • Математика для программирования 3D-игр и компьютерной графики Эрика Лендьеля

Я надеюсь, что это будет полезно для вас. Удачи.

Ответ 2

Есть очень хороший онлайн-курс - интерактивная 3D-графика на https://www.udacity.com/course/cs291 на THREE.js. Этот курс включает задания также для получения практического опыта. Он охватывает все основные понятия Three.js и компьютерной графики

Ответ 3

Мои личные мысли таковы:

  • Если у вас много времени, вы можете узнать обоим, но обратите внимание, что WebGL намного ниже уровня, чем Three.js.
  • Для первого 3D-проекта эксперты предлагают использовать библиотеку типа Three.js, чтобы привыкнуть к терминам и общей 3d-модели.

Ответ 4

Какое бы направление вы ни выбрали, я предлагаю вам учиться/оттачивать свои навыки линейной алгебры. Затем перейдите и изучите или отполируйте свое понимание размеров MVP (Project View Projection). Three.JS может абстрагировать многое из этого, но я думаю, что это ключ к пониманию этих концепций задолго до того, как вы серьезно относитесь к любой 3D-разработке.

Я написал вступительную статью о MVP, когда я впервые изучал 3D-программирование с OpenGL. Я понял, что до тех пор, пока я не смог объяснить, что такое матрицы трансформации и как они относятся к различным измерениям/пространствам, я действительно не знал никакого 3D-программирования вообще, хотя я мог визуализировать объекты на экране.

Поскольку ваша цель состоит в создании игр, я думаю, что вам пригодится многозначительное изучение некоторого необработанного WebGL, даже если вы в конечном итоге используете фреймворк, такой как Three.js, чтобы позже написать свой код.

Ответ 5

"WebGL - это 2D API, а не 3D API"

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

В этой статье описываются фундаментальные различия между библиотеками WebGL и 3d, такими как three.js.
Что сделало мой выбор между WebGL или Three.js без проблем.

Ответ 6

Я пришел с фона Unity3D, а также Papervision3D в тот же день, поэтому у меня было хорошее понимание того, как работать с 3D-пространством. Three.js - это способ начать свой первый переход к обучению работе с проектами WebGL. Api очень хорош, он очень мощный, и если вы придете с другой 3D-технологии, вы будете работать и очень мало времени.

Я провел много времени с примерами Threejs.org - там их много, и они очень хорошо справляются с вами и работают в правильном направлении. Документы достаточно приличные, особенно если вы сравниваете их с другими webgl 3D api.

Вы также можете подумать о том, чтобы получить бесплатную версию Unity3D и бесплатную колладу (которая была бесплатной, когда я ее получила) экспортером из своего магазина приложений (Window > App Store). Мне было достаточно легко настроить мою сцену в Unity и экспортировать ее в Collada для использования с Three.js.

Кроме того, я опубликовал этот класс, который я использую с Three.js, называемым neo (http://rockonflash.com/webGL/three/neo.js). Просто добавьте его в свой проект, затем вызовите Neo.JackIntoThree(), и он добавит методы/свойства Object3D для использования в вашем проекте. Такие вещи, как DrawAllAxis(), неоценимы при отладке вашей сцены и т.д.

Руки вниз, хотя, Three.js - отличный способ пойти - он достаточно гибкий, чтобы вы могли писать свои собственные шейдеры/объекты и т.д., и достаточно мощные из коробки, чтобы помочь вам в достижении ваших целей.

Ответ 7

Я взял три .js, но также прыгнул в GLSL и много экспериментировал с тэгом. js shaderMaterial. Один из способов обойти это - three.js все еще абстрагирует большую часть материала для вас, но также дает вам очень чистый, низкий уровень доступа ко всем возможностям рендеринга (проекции, анимации).

Таким образом, вы можете следовать даже чем-то вроде этого удивительного учебника open-gl. Вам не нужно настраивать матрицы, набранные массивы, потому что три уже настроены для вас, обновляя их при необходимости. Шейдер, однако, вы можете писать с нуля - простая цветопередача будет представлять собой две строки GLSL. Существует также плагин для последующей обработки для three.js, который настраивает все буферы, полноэкранные квадраты и все, что вам нужно для выполнения эффектов, но шейдер может быть очень простым для начала.

Поскольку программируемые шейдеры - суть современной 3d-графики, я надеюсь, что мой ответ не упустит точку:) Рано или поздно любой, кто это делает, должен хотя бы понять, что происходит под капотом, это характер зверь. Кроме того, понимание 4-го измерения в однородном пространстве, вероятно, также важно.

Эта книга хороша для WebGL.

Ответ 8

Я только немного узнал обо мне, и я чувствую, что понимаю основы webgl, я думаю, что введение в webgl достаточно, а затем перепрыгнуть на три js. Это будет довольно легко, как только вы поймете основные концепции WebGL. Полезные ссылки: