Nauka WebGL i three.js [zamknięte]

143

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?

r1nzler
źródło
10
Użyj Three.js. Kropka. Dokładnie tak mówi West poniżej, choć teoretycznie proste, pisanie WebGL od zera jest uciążliwe. Jest tak wiele rzeczy, które prawie każda aplikacja WebGL będzie musiała / chciała zrobić. Te rzeczy można od ciebie oderwać. Ponadto Three.js wyrósł na niesamowitą bibliotekę. Jeśli sprawdzisz Trendy Google lub liczbę pytań SO tutaj, zobaczysz, że wyprzedziło konkurencję.
theblang
4
@GeorgeStocker Właściwie odpowiedzi na to pytanie nie opierały się głównie na opinii, ale na faktach, referencjach i konkretnej wiedzy. To był cenny post dla społeczności there.js i część (2) pytania jest z pewnością do zaakceptowania. Jak zaleciłbyś przeformułowanie go, aby było dla Ciebie akceptowalne - to znaczy bez zmiany znaczenia / intencji pytania?
WestLangley
@WestLangley Nie słyszałem niczego poza opiniami w udzielonych odpowiedziach; nie wspominając o „zaletach i wadach korzystania z którejkolwiek z [biblioteki]” jest nieco za szerokie dla przepełnienia stosu.
George Stocker
2
@GeorgeStocker Twoja odpowiedź jest sama w sobie opinią i zdecydowanie się z nią nie zgadzam. Jak poleciłbyś przeformułowanie posta, aby było dla Ciebie akceptowalne?
WestLangley
1
Być może należałoby przeformułować pytania, aby zapytać, w jaki sposób nauka WebGL jest korzystna dla korzystania z Three.js. Odpowiedź na to byłaby poparta faktami, referencjami i wiedzą.
zz85

Odpowiedzi:

203

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.

WestLangley
źródło
jaka jest najlepsza witryna do nauki pojęć webgl od początku do końca w prostym języku angielskim. Lub przynajmniej za każdym razem, gdy autor używa jakiegoś „słowa”, robi to po wcześniejszym opisaniu go, więc oprzyj się na nim.
Muhammad Umer
Zobacz link do samouczka Learning WebGL w treści posta.
WestLangley,
22

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

Bhupendra
źródło
13

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.
Dan D.
źródło
3
Zgadzam się z tym. W tym momencie wygląda na to, że dobrze byłoby mieć oba narzędzia w pasku narzędzi. Zacząłbym od nauczenia się Three.JS, a następnie zrobiłbym kilka shaderów z GLSL i przez cały czas próbowałem dowiedzieć się więcej o WebGL.
Cory Gross
11

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.

rodrigo-silveira
źródło
10

„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.

Bob Fanger
źródło
Cytat nie pochodzi z głównego tekstu połączonej strony. Jednak częściowo akceptuję argumenty podane na połączonej stronie. Nie chodzi o bycie API 2D, ale o bycie API do rasteryzacji (które jest odpowiednie dla grafiki 2D i 3D).
Elias Hasle,
6

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.

neoRiley
źródło
3

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.

pailhead
źródło
2

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
Raj
źródło