Wstęp
Wykorzystałem kod Three.js w niektórych moich eksperymentach i naprawdę wspaniale eliminuje problemy związane z korzystaniem z 3D w przeglądarce. Możesz za jego pomocą tworzyć kamery, obiekty, oświetlenie, materiały i inne elementy oraz wybierać mechanizm renderowania, co oznacza, że możesz określić, czy scena ma zostać narysowana za pomocą kanwy HTML 5, WebGL czy SVG. Jest to oprogramowanie open source, więc możesz nawet zaangażować się w projekt. Teraz jednak skupię się na tym, czego udało mi się nauczyć, jak korzystać z silnika. Omówię też podstawy.
Ze wszystkimi niesamowitymi funkcjami Three.js czasami mogą być trudności. Zwykle musisz poświęcić sporo czasu na analizę przykładów, analizę wsteczną i (w moim przypadku) poszukiwanie konkretnych funkcji, a od czasu do czasu zadawanie pytań na GitHubie. Przy okazji pamiętaj, że Mr. doob i AlteredQualia są niezwykle przydatne.
1. Podstawy
Zakładam, że biegle posługujesz się co najmniej biegłością w zakresie 3D i JavaScriptem. Jeśli nie znasz systemu, być może warto najpierw trochę pouczyć się, zanim zaczniesz, ponieważ staje się to nieco mylące.
W świecie 3D będziemy udostępniać niektóre z tych elementów, które pokażę Ci przez proces tworzenia:
- Scena
- Mechanizm renderowania
- Aparat
- Przedmiot lub dwa (z materiałami)
Oczywiście można robić kilka fajnych rzeczy. Mam nadzieję, że zrobisz to i poeksperymentujesz z 3D w przeglądarce.
2. Pomoc
Krótka informacja o obsłudze przeglądarek. Przeglądarka Google Chrome jest według mnie najlepszą przeglądarką pod względem obsługiwanych mechanizmów renderowania i szybkości działania mechanizmu JavaScript. Chrome obsługuje obrazy Canvas, WebGL i SVG, a ponadto jest niewiarygodnie szybka. Na drugim miejscu jest przeglądarka Firefox, która pojawiła się w wersji 4. Jego mechanizm JavaScript wydaje się działać wolniej niż Chrome, ale również zapewnia świetne wsparcie dla tych technologii. Opery i Safari są w trakcie dodawania obsługi WebGL, ale ich obecne wersje obsługują tylko obiekty canvas. Internet Explorer (w wersji 9 i nowszych) obsługuje tylko renderowanie na płótnie. Nie słyszę, żeby firma Microsoft planowała dodanie funkcji WebGL.
3. Kontekst
Zakładam, że wybierasz przeglądarkę, która obsługuje wszystkie technologie renderowania, i chcesz renderować ją za pomocą canvas lub WebGL, ponieważ są to bardziej standardowe rozwiązania. Canvas jest obsługiwane szerzej niż WebGL, ale warto pamiętać, że WebGL działa na procesorach graficznych Twojej karty graficznej, co oznacza, że procesor może skupić się na innych zadaniach, które nie są renderowane, np. na fizyce czy interakcjach z użytkownikiem.
Niezależnie od wybranego mechanizmu renderowania pamiętaj, że JavaScript musi być zoptymalizowany pod kątem wydajności. 3D nie jest łatwym zadaniem dla przeglądarki (a dobrze, że jest w ogóle możliwe), więc zwracaj uwagę na ewentualne słabe gardła w kodzie i jeśli to możliwe, usuń je.
Mając to na uwadze, załóżmy, że pobrałeś i dołączyłeś do pliku HTML 3.js. Jak możesz skonfigurować scenę? W ten sposób:
// set the scene size
var WIDTH = 400,
HEIGHT = 300;
// set some camera attributes
var VIEW_ANGLE = 45,
ASPECT = WIDTH / HEIGHT,
NEAR = 0.1,
FAR = 10000;
// get the DOM element to attach to
// - assume we've got jQuery to hand
var $container = $('#container');
// create a WebGL renderer, camera
// and a scene
var renderer = new THREE.WebGLRenderer();
var camera = new THREE.PerspectiveCamera(
VIEW_ANGLE,
ASPECT,
NEAR,
FAR );
var scene = new THREE.Scene();
// the camera starts at 0,0,0 so pull it back
camera.position.z = 300;
// start the renderer
renderer.setSize(WIDTH, HEIGHT);
// attach the render-supplied DOM element
$container.append(renderer.domElement);
Niezbyt trudne.
4. Tworzenie siatki
Mamy scenę, kamerę i mechanizm renderowania (w moim przykładowym kodzie wybrałem WebGL), ale nie mamy nic do narysowania. Three.js obsługuje wczytywanie kilku różnych standardowych typów plików, co jest świetnym rozwiązaniem, gdy przesyłasz modele z Blender, Maya, Cinema4D lub innych źródeł. Dla uproszczenia (chodzi o to, że zaczynając od początku) Omówię podstawowe elementy. Podstawowe elementy to geometryczne siatki, czyli stosunkowo podstawowe elementy, np. sfery, płaszczyzny, sześciany i walce. Biblioteka Three.js pozwala na łatwe tworzenie takich typów elementów podstawowych:
// set up the sphere vars
var radius = 50, segments = 16, rings = 16;
// create a new mesh with sphere geometry -
// we will cover the sphereMaterial next!
var sphere = new THREE.Mesh(
new THREE.SphereGeometry(radius,
segments,
rings),
sphereMaterial);
// add the sphere to the scene
scene.add(sphere);
Wszystko dobrze, ale co z materiałem dla kuli? Użyliśmy w kodzie zmiennej sphereMaterial, ale jeszcze jej nie zdefiniowaliśmy. Najpierw musimy omówić materiały bardziej szczegółowo.
5. Materiały
Bez wątpienia jest to jeden z najbardziej przydatnych elementów Three.js. Znajdziesz w nim wiele popularnych (i bardzo przydatnych) materiałów, które możesz stosować w siatkach:
- „Podstawowy” oznaczający, że obraz jest „niepodświetlany”.
- Lamberta
- Phong
Jest ich więcej, ale dla wygody pozwolę Ci odkryć je dla Ciebie. Zwłaszcza w przypadku WebGL materiały te mogą uratować życie. Dlaczego? W WebGL trzeba pisać, aby pisać do cieniowania wszystkie elementy, które mają być renderowane. tzw. Shadery są same w sobie dużym tematem, ale w skrócie – w GLSL (OpenGL Shader Language), dzięki któremu GPU może zobaczyć, jak powinno wyglądać. Oznacza to, że musisz naśladować matematykę dotyczącą oświetlenia, odbicia itd. Szybko staje się to bardzo skomplikowane. Dzięki Three.js nie trzeba tego robić, ponieważ Jeśli chcesz pisać do cieniowania, możesz to też zrobić w środowisku MeshShaderMaterial, więc jest to elastyczna konfiguracja.
Na razie zajmijmy się jednak materiałem Lamberta:
// create the sphere's material
var sphereMaterial = new THREE.MeshLambertMaterial(
{
// a gorgeous red.
color: 0xCC0000
});
Warto podkreślić, że podczas tworzenia materiału oprócz koloru można też określić inne właściwości, np. wygładzanie lub mapy środowiska. Zajrzyj na stronę Wiki, by poznać różne właściwości, które możesz ustawić dla materiałów, a także wszelkie obiekty udostępnione Ci przez wyszukiwarkę. Niedawno rozwinęła się też platforma threejs.org, która oferuje atrakcyjniejszy widok interfejsu API.
6. Światła!
W przypadku wcześniejszego wyrenderowania sceny zobaczysz czerwone kółko. Mimo że zastosowano materiał Lamberta, scena nie jest pełna światła, więc domyślnie Three.js przywróci pełne światło otoczenia, co jest równoznaczne z płaskim oświetleniem. Rozwiążmy ten problem, używając prostego punktu świetlnego:
// create a point light
var pointLight = new THREE.PointLight( 0xFFFFFF );
// set its position
pointLight.position.x = 10;
pointLight.position.y = 50;
pointLight.position.z = 130;
// add to the scene
scene.add(pointLight);
7. Renderowanie
Teraz wszystko jest gotowe do renderowania. A teraz musimy przejść dalej:
// draw!
renderer.render(scene, camera);
Prawdopodobnie na pewno zechcesz wyrenderować więcej niż raz, więc jeśli chcesz zrobić pętlę, użyj elementu requestAnimationFrame. To zdecydowanie najsprytniejszy sposób obsługi animacji w przeglądarce. Nie jest on jeszcze w pełni obsługiwany, dlatego zachęcam do zapoznania się z usługą Paul Ireland's shim.
8. Typowe właściwości obiektów
Gdy przejrzysz kod Three.js, zobaczysz, że wiele obiektów jest „dziedziczonych” z Object3D. Jest to obiekt podstawowy. Zawiera on bardzo przydatne właściwości, takie jak informacje o pozycji, obrotie i skalowaniu. Nasza sfera to siatka, która dziedziczy z obiektu Object3D, do której dodaje swoje własne właściwości: geometrię i materiały. Dlaczego wspominam o nich? Raczej mało prawdopodobne jest, że zechcesz mieć na ekranie jedynie sferę, która nic nie robi. Warto się przyjrzeć właściwościom, bo pozwalają one na bieżąco manipulować informacjami o siatkach i materiałach.
// sphere geometry
sphere.geometry
// which contains the vertices and faces
sphere.geometry.vertices // an array
sphere.geometry.faces // also an array
// its position
sphere.position // has x, y and z properties
sphere.rotation // same
sphere.scale // ... same
9. Drobne sekrety
Chciałem tylko szybko zauważyć, że w przypadku Three.js można zmodyfikować na przykład wierzchołki siatki, zauważyć w pętli renderowania, że nic się nie zmienia. Dlaczego? Ponieważ Three.js (o ile dobrze mi mówiła) przechowuje w pamięci podręcznej dane dla sieci typu mesh jako element optymalizacji. W rzeczywistości musisz wskazać w Three.js informację, że coś się zmieniło, aby możliwe było ponowne obliczenia w razie potrzeby. Aby to zrobić:
// changes to the vertices
sphere.geometry.__dirtyVertices = true;
// changes to the normals
sphere.geometry.__dirtyNormals = true;
Jest ich więcej, ale te, które widzę, są najbardziej przydatne. Aby uniknąć zbędnych obliczeń, należy oczywiście oznaczać tylko te rzeczy, które uległy zmianie.
Podsumowanie
Mam nadzieję, że to krótkie wprowadzenie do Three.js okazało się przydatne. Nie ma nic lepszego niż pobrudzanie rąk i spróbowanie czegoś innego. Nie mogę tego polecać. Tworzenie filmów 3D bezpośrednio w przeglądarce to świetna zabawa, a korzystanie z silnika takiego jak Three.js eliminuje wiele problemów i pozwala tworzyć naprawdę fajne rzeczy. Aby Ci pomóc, opisuję kod źródłowy tego modułu, który możesz wykorzystać jako materiał referencyjny. Jeśli Ci się podoba, daj mi znać na Twitterze, zawsze warto się przywitać.