Nauka WebGL i three.js [zamknięte]

Jestem nowy i zaczynam poznawać grafikę komputerową 3D w przeglądarkach internetowych. Interesuje mnie tworzenie gier 3D w przeglądarce. Dla każdego, kto nauczył się zarówno WebGL, jak i three.js ...

1. Czy do korzystania z three.js wymagana jest znajomość WebGL?

2. Jakie są zalety korzystania z three.js w porównaniu z WebGL?

Ponieważ masz duże ambicje, musisz poświęcić czas na naukę podstaw. Nie jest to kwestia tego, czego się najpierw uczysz - jeśli chcesz, możesz uczyć się ich jednocześnie. (To jest to co zrobiłem.)

Oznacza to, że musisz zrozumieć:

1. Pojęcia dotyczące WebGL
2. Three.js
3. Podstawowe pojęcia matematyczne

Three.js. Three.js świetnie radzi sobie z usuwaniem wielu szczegółów dotyczących WebGL, więc osobiście sugerowałbym użycie Three.js w twoim projekcie. Pamiętaj jednak, że Three.js jest w wersji alfa i często się zmienia, więc musisz być na to przygotowany. Większość ludzi uczy się Three.js, studiując przykłady. Unikaj przestarzałych książek i samouczków oraz unikaj przykładów z sieci, które odsyłają do starszych wersji biblioteki.

WebGL. Jeśli używasz Three.js, nie musisz umieć programować w WebGL, wystarczy zrozumieć koncepcje WebGL. Oznacza to, że po prostu musisz umieć czytać kod WebGL innej osoby i rozumieć, co czytasz. Jest to o wiele łatwiejsze niż oczekiwanie na samodzielne napisanie programu WebGL od zera. Możesz wystarczająco dobrze nauczyć się pojęć dotyczących WebGL, korzystając z dowolnych samouczków dostępnych w sieci, takich jak samouczek dla początkujących na WebGLFundamentals.org i nauka o WebGL .

Math. Ponownie, musisz przynajmniej zrozumieć pojęcia. Trzy dobre książki to:

1. Podstawy matematyczne 3D do tworzenia grafiki i gier autorstwa Fletchera Dunna i Iana Parberry

2. Podstawowa matematyka w grach i aplikacjach interaktywnych: przewodnik programisty autorstwa Jamesa M. Van Vertha i Larsa M. Bishopa

3. Matematyka do programowania gier 3D i grafiki komputerowej autorstwa Erica Lengyela

Mam nadzieję, że jest to pomocne dla Ciebie. Powodzenia.

Istnieje bardzo dobry kurs online - Interaktywna grafika 3D na https://www.udacity.com/course/cs291 na THREE.js. Ten kurs obejmuje również zadania w celu zdobycia praktycznego doświadczenia. Obejmuje wszystkie podstawowe pojęcia Three.js i grafiki komputerowej

Moje osobiste przemyślenia są następujące:

• Jeśli masz dużo czasu, możesz nauczyć się obu, ale pamiętaj, że WebGL ma znacznie niższy poziom niż Three.js.
• W przypadku pierwszego projektu 3D eksperci sugerują użycie biblioteki takiej jak Three.js, aby przyzwyczaić się do terminów i ogólnego modelu 3D.

Niezależnie od tego, który kierunek wybierzesz, sugeruję, abyś nauczył się / dopracował swoje umiejętności algebry liniowej . Następnie przejdź dalej i dowiedz się lub dopracuj swoją wiedzę na temat wymiarów MVP (projekcja widoku modelu) . Three.JS może wiele z tego wyodrębnić, ale myślę, że kluczowe jest, aby dobrze zrozumieć te koncepcje, zanim zaczniemy poważnie myśleć o rozwoju 3D.

Napisałem artykuł wprowadzający o MVP, kiedy po raz pierwszy uczyłem się programowania 3D w OpenGL. Zdałem sobie sprawę, że dopóki nie byłem w stanie wyjaśnić, czym są te macierze transformacji i jak odnoszą się one do różnych wymiarów / przestrzeni, tak naprawdę nie znałem żadnego programowania 3D, chociaż mogłem renderować obiekty na ekranie.

Ponieważ Twoim celem jest tworzenie gier, myślę, że wiele skorzystasz na nauczeniu się najpierw surowego WebGL, nawet jeśli skończysz przy użyciu frameworka takiego jak Three.js, który pomoże Ci później napisać kod.

„WebGL to 2D API, a nie 3D API”

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

W tym artykule opisano podstawowe różnice między bibliotekami WebGL i 3D, takimi jak three.js.
Co sprawiło, że mój wybór między WebGL lub Three.js był oczywisty.

Pochodzę z Unity3D, a także Papervision3D w tamtych czasach, więc dobrze rozumiałem, jak radzić sobie z przestrzenią 3D. Three.js to dobry sposób na rozpoczęcie nauki, jak radzić sobie z projektami WebGL. Interfejs API jest bardzo dobry, bardzo potężny, a jeśli korzystasz z innej technologii 3D, będziesz gotowy do pracy w bardzo krótkim czasie.

Spędziłem dużo czasu z przykładami Threejs.org - jest ich mnóstwo i są one bardzo dobre w robieniu cię i bieganiu we właściwym kierunku. Dokumenty są wystarczająco przyzwoite, zwłaszcza jeśli porównujesz je z innymi interfejsami API WebGL 3D.

Możesz również rozważyć zakup darmowej wersji Unity3D i darmowego eksportera collada (był darmowy, kiedy go dostałem) z ich sklepu z aplikacjami (Okno> App Store). Okazało się, że dość łatwo jest skonfigurować moją scenę w Unity i wyeksportować ją do Collady w celu użycia z Three.js.

Opublikowałem również klasę neo, której używam z Three.js ( http://rockonflash.com/webGL/three/neo.js ). Po prostu dodaj go do swojego projektu, a następnie wywołaj Neo.JackIntoThree () i doda metody / właściwości do Object3D do wykorzystania w Twoim projekcie. Rzeczy takie jak DrawAllAxis () są nieocenione podczas debugowania sceny itp.

Jednak bez dwóch zdań, Three.js to świetny sposób - jest wystarczająco elastyczny, aby umożliwić Ci pisanie własnych shaderów / obiektów itp., A także wystarczająco potężny od razu po wyjęciu z pudełka, aby pomóc Ci osiągnąć swoje cele.

Wybrałem trzy.js, ale wskoczyłem do GLSL i dużo eksperymentowałem z shaderMaterialem three.js. Jeden sposób na zrobienie tego - plik three.js nadal abstrakcyjnie przedstawia wiele rzeczy, ale daje również bardzo czysty, niski poziom dostępu do wszystkich możliwości renderowania (projekcji, animacji).

W ten sposób możesz śledzić nawet coś takiego jak ten niesamowity samouczek open-gl . Nie musisz konfigurować macierzy, typowanych tablic, ponieważ trzy już to konfigurują, aktualizując je w razie potrzeby. Jednak w module cieniującym można pisać od zera - proste renderowanie kolorów byłoby dwoma wierszami GLSL. Istnieje również wtyczka do przetwarzania końcowego dla three.js, która konfiguruje wszystkie bufory, quady pełnoekranowe i rzeczy potrzebne do wykonania efektów, ale moduł cieniujący może być bardzo prosty na początek.

Ponieważ programowalne shadery są esencją współczesnej grafiki 3D, mam nadzieję, że moja odpowiedź nie mija się z celem :) Wcześniej czy później każdy, kto to robi, musi przynajmniej zrozumieć, co się dzieje pod maską, taka jest natura bestii. Również zrozumienie czwartego wymiaru w jednorodnej przestrzeni jest prawdopodobnie również ważne.

Ta książka jest dobra dla WebGL.

Właśnie nauczyłem się trochę obu i czuję, że rozumiem podstawy webgl. Myślę, że wprowadzenie do webgl jest wystarczające, a następnie przeskoczę do trzech js. Będzie to całkiem łatwe, gdy zrozumiesz podstawowe pojęcia związane z WebGL. Przydatne linki:

1. Najlepsze intro, które przeczytałem: http://dev.opera.com/articles/view/an-introduction-to-webgl/
2. Kompleksowe samouczki: http://www.johannes-raida.de/tutorials.htm