Навчання WebGL та three.js [закрито]

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

1. Чи потрібні знання WebGL для використання three.js?

2. Які переваги використання tri.js проти WebGL?

Оскільки у вас є великі амбіції, вам доведеться вкласти час, щоб вивчити основи. Справа не в тому, що ви дізнаєтесь спочатку - ви можете навчитися їх одночасно, якщо хочете. (Це я і зробив.)

Це означає, що вам потрібно зрозуміти:

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

Three.js. Three.js чудово справляється з вилученням багатьох деталей WebGL, тому особисто я б запропонував використовувати Three.js для свого проекту. Але пам’ятайте, що Three.js знаходиться в альфа , і він часто змінюється, тому вам потрібно бути готовим до цього. Більшість людей вивчають Three.js, вивчаючи приклади. Уникайте застарілих книг та навчальних посібників та уникайте прикладів із мережі, які посилаються на старі версії бібліотеки.

WebGL. Якщо ви використовуєте Three.js, вам не потрібно знати, як програмувати в WebGL, потрібно просто зрозуміти поняття WebGL. Це означає, що вам просто потрібно мати можливість читати чужий код WebGL і розуміти, що ви прочитали. Це набагато простіше, ніж очікувалося, щоб написати програму WebGL самостійно з нуля. Ви можете досить добре вивчити поняття WebGL, використовуючи будь-які підручники в мережі, наприклад, навчальний посібник для початківців на веб- сайті WebGLFundamentals.org та навчання веб-веб-сайту .

Математика. Знову ж таки, вам потрібно хоча б зрозуміти поняття. Три хороші книги:

1. 3D-математичний буквар для графіки та розвитку ігор Флетчер Данн та Іен Парберрі

2. Основна математика для ігор та інтерактивних застосунків: Посібник програміста Джеймса М. Ван Верта та Ларса М. Бішопа

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, такими як tri.js.
Що зробило мій вибір між WebGL або Three.js непродуманим.

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

Я багато часу провів за прикладами Threejs.org - їх є багато, і вони дуже добре відводять тебе і біжать у правильному напрямку. Документи досить пристойні, особливо якщо ви порівнюєте їх з іншими веб-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 - це чудовий шлях - він досить гнучкий, щоб ви могли писати власні шейдери / об’єкти тощо, і досить потужний прямо з поля, щоб допомогти вам досягти своїх цілей.

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

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

Оскільки програмовані шейдери - це суть сучасної 3d графіки, я сподіваюся, що моя відповідь не пропускає суть :) Рано чи пізно кожному, хто це робить, потрібно хоча б зрозуміти, що відбувається під кришкою, це природа звіра. Також, мабуть, важливим є також розуміння 4-го виміру в однорідному просторі.

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

Я просто трохи навчився обох, і я вважаю, що розумію основи webgl, я вважаю, що введення в webgl достатньо, а потім перейти до трьох js. Це буде досить легко, коли ви зрозумієте основні концепції WebGL. Корисні посилання:

1. Найкращий вступ, який я прочитав: http://dev.opera.com/articles/view/an-introduction-to-webgl/
2. Вичерпні підручники: http://www.johannes-raida.de/tutorials.htm