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

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

  1. Является ли знание WebGL необходимым для использования three.js?

  2. Каковы преимущества использования трех .js против WebGL?

8 Solutions collect form web for “Изучение WebGL и three.js”

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

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

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

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

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

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

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

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

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

Надеюсь, это поможет вам. Удачи.

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

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

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

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

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

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

«WebGL – это 2D API, а не 3D API»

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

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

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

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

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

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

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

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

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

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

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

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

  1. Best Intro Я читал: http://dev.opera.com/articles/view/an-introduction-to-webgl/
  2. Всесторонние учебные пособия: http://www.johannes-raida.de/tutorials.htm
Давайте будем гением компьютера.