Я новичок и начинаю изучать трехмерную компьютерную графику в веб-браузерах. Меня интересует создание 3D-игр в браузере. Для всех, кто изучил и WebGL, и three.js ...
Требуется ли знание WebGL для использования three.js?
Каковы преимущества использования three.js по сравнению с WebGL?
Ответы:
Поскольку у вас большие амбиции, вам нужно потратить время на изучение основ. Дело не в том, что вы изучаете в первую очередь - вы можете изучать их одновременно, если хотите. (Это то, что я сделал.)
Это означает, что вам необходимо понимать:
Three.js. Three.js отлично абстрагируется от многих деталей WebGL, поэтому лично я бы предложил использовать Three.js для вашего проекта. Но помните, что Three.js находится в альфа- версии, и он часто меняется, поэтому вы должны быть к этому готовы. Большинство людей изучают Three.js, изучая примеры. Избегайте устаревших книг и учебных пособий и избегайте примеров из сети, которые ссылаются на старые версии библиотеки.
WebGL. Если вы используете Three.js, вам не нужно знать, как программировать на WebGL, вам просто нужно понимать концепции WebGL. Это означает, что вам просто нужно уметь читать чужой код WebGL и понимать, что вы читаете. Это намного проще, чем можно было бы ожидать, чтобы самому написать программу WebGL с нуля. Вы можете достаточно хорошо изучить концепции WebGL, используя любое из учебных пособий в сети, например учебное пособие для новичков на WebGLFundamentals.org и Learning WebGL .
Математика. Опять же, вам, по крайней мере, нужно понимать концепции. Три хороших книги:
Учебник по 3D-математике для разработки графики и игр от Флетчера Данна и Яна Парберри
Основы математики для игр и интерактивных приложений: Руководство программиста Джеймса М. Ван Верта и Ларса М. Бишопа
Математика для программирования 3D-игр и компьютерной графики Эрика Ленджела
Надеюсь, это будет вам полезно. Удачи.
Есть очень хороший онлайн-курс - Интерактивная 3D-графика по адресу https://www.udacity.com/course/cs291 на THREE.js. Этот курс включает также задания для получения практического опыта. Он охватывает все основные концепции Three.js и компьютерной графики.
Мои личные мысли следующие:
Какое бы направление вы ни выбрали, я предлагаю вам изучить / отточить свои навыки линейной алгебры . Затем изучите или отточите свое понимание размеров MVP (проекция вида модели) . 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, поэтому хорошо понимал, как работать с трехмерным пространством. Three.js - это способ сделать первый шаг в изучении работы с проектами WebGL. Api очень хорош, он очень мощный, и если вы используете другую 3D-технологию, вы быстро начнете работать.
Я провел много времени с примерами Threejs.org - их множество, и они очень хороши, чтобы вывести вас из игры и двигаться в правильном направлении. Документы достаточно приличные, особенно если вы сравниваете их с другими API-интерфейсами webGL 3D.
Вы также можете рассмотреть возможность получения бесплатной версии Unity3D и бесплатного экспортера collada (который был бесплатным, когда я его получил) из их магазина приложений (Окно> Магазин приложений). Мне было достаточно легко настроить мою сцену в Unity и экспортировать ее в Collada для использования с Three.js.
Кроме того, я разместил этот класс, который я использую с Three.js, под названием neo ( http://rockonflash.com/webGL/three/neo.js ). Просто добавьте его в свой проект, затем вызовите Neo.JackIntoThree (), и он добавит методы / свойства в Object3D для использования в вашем проекте. Такие вещи, как DrawAllAxis (), неоценимы при отладке вашей сцены и т. Д.
Тем не менее, Three.js - отличный способ - он достаточно гибкий, чтобы позволить вам писать свои собственные шейдеры / объекты и т. Д., И достаточно мощный прямо из коробки, чтобы помочь вам в достижении ваших целей.
Я взял three.js, но также перешел на GLSL и много экспериментировал с three.js shaderMaterial. Один из способов решения этой проблемы - three.js по-прежнему абстрагирует для вас большую часть материала, но также дает вам очень чистый низкоуровневый доступ ко всем возможностям рендеринга (проекции, анимации).
Таким образом, вы сможете следовать даже чему-то вроде этого замечательного учебника по open-gl . Вам не нужно настраивать матрицы, типизированные массивы, потому что три уже настраивают их для вас, обновляя их при необходимости. А вот шейдер можно написать с нуля - простая цветопередача будет состоять из двух строк GLSL. Существует также подключаемый модуль постобработки для three.js, который настраивает все буферы, полноэкранные квадраты и прочее, необходимое для создания эффектов, но шейдер может быть очень простым для начала.
Поскольку программируемые шейдеры являются сутью современной 3D-графики, я надеюсь, что мой ответ не упускает из виду суть :) Рано или поздно любой, кто это делает, должен хотя бы понимать, что творится под капотом, такова природа зверя. Кроме того, вероятно, важно понимание 4-го измерения в однородном пространстве.
Я только немного изучил и то, и другое, и я чувствую, что понимаю основы webgl, я думаю, что введения в webgl будет достаточно, а затем перейти к трем js. Это будет довольно просто, если вы поймете основные концепции WebGL. Полезные ссылки: