Kamera

Tato část je o kamerách. Dozvíte se tu jaké máme typy kamer a vysvětlíme si jaké má vlastnosti perspektivní a ortografická kamera.

Typy kamer

Existuje více typů kamer. Dědí od abstraktní třídy jménem Camera (většinou). Nejpoužívanější je PerspectiveCamera a OrthographicCamera. Ostatní se moc nepoužívají, takže si je tu jen ukážeme ale nebudeme je dále zkoumat. Pokud byste je někdy chtěli použít, tak je najdete v dokumentaci.

Array Camera

ArrayCameru můžeme použít k efektivnímu vyrenderování scény s více kamerami na různé části canvasu. Může se to třeba hodit pro nějaké hry pro dva hráče na jednom počítači.

Cube Camera

CubeCamera provádí celkem 6 renderování. Každé směřuje jiným směrem (nahoru, dolů, doprava, doleva, před sebe, za sebe). Neprovádí je ale do canvasu, ale do WebGLCubeRenderTargetu. Vyrenderuje se nám vlastně environment mapa, kterou potom můžeme použít v materiálech nějakých objektů. Hodí se to třeba pro provádění různých odrazů a tak podobně, jak to ukazuje tato ukázka.

Orthographic Camera

OrthographicCamera vykresluje objekty v nezávislosti na jejich vzdálenosti od kamery. Nezáleží na tom jak jsou objekty vzdáleny od kamery, vždy budou mít stejnou velikost.

Perspective Camera

PerspectiveCamera je navržena tak, aby napodobovala způsob, jakým vidí lidské oko. Vzdálenější objekty od kamery jsou menší a bližší větší. Jedná se o nejpoužívanější kameru pro vykreslování 3D grafiky.

Stereo Camera

StereoCamera obsahuje dvě perspektivní kamery. Umožňuje nám provádět efekty jako je 3D Analygraph nebo Parallax Barrier. Pokud máte takové ty brýle s červeným a modrým sklíčkem, tak si je můžete zkusit nasadit a podívat se na tuto ukázku.

Perspektivní kamera

Perspektivní kameru budete pravděpodobně používat asi nejvíce. Jak jste se dozvěděli a viděli, tak napodobuje způsob, jakým vidí lidské oko. Už jsme ji v předchozích částech tutoriálu používali ale nevysvětlili jsme si jaké má vlastnosti. Do toho se pustíme teď. Když perspektivní kameru vytváříme, tak můžeme do konstruktoru předat celkem 4 parametry:

  • fov (field of view) - určuje jakoby jak moc do stran můžeme vidět
  • aspect ratio - poměr stran (šířka canvasu / výška canvasu)
  • near - určuje odkud začíná kamera vidět
  • far - určuje kam až kamera může dohlédnout
const camera = new THREE.PerspectiveCamera(45, canvasWidth/canvasHeight, 0.1, 10);

Aspect ratio kamery bude pravděpodobně skoro vždy nastavovat na šířku canvasu vydělenou výškou canvasu. Tak to prostě je pokud nechcete mít vyrenderovanou scénu po canvasu divně roztaženou. Ostatní parametry již ale budete nastavovat podle toho co děláte a hodí se pro vás nejvíc. Než abych vám tyto parametry vysvětloval v textu, tak jsem vám pro jejich vyzkoušení vytvořil interaktivní ukázku, kde si s nimi můžete pohrát. Tím to podle mě pochopíte mnohem lépe než v textu.

Doufáme že jste díky předchozí ukázce vlastnostem perspektivní kamery porozumněli. Pokud se ptáte jaké je takové nejvhodnější fov (field of view), tak je to většinou mezi hodnotou 40-50.

Ortografická kamera

Ortografická kamera vykresluje objekty v nezávislosti na jejich vzdálenosti od kamery. Nezáleží na tom jak jsou objekty vzdáleny od kamery, vždy budou mít stejnou velikost. Hodí se například na renderování 2D scén. Při vytváření ortografické kamery můžeme specifikovat celkem 6 parametrů:

  • left - levá strana kamery
  • right - pravá strana kamery
  • top - horní strana kamery
  • bottom - spodní strana kamery
  • near - určuje odkud začíná kamera vidět
  • far - určuje kam až kamera může dohlédnout

Při vytváření ortografické kamery nespecifikujeme field of view ale specifikujeme její levou, pravou, horní a dolní stranu. Její výhled tedy tvoří jakoby takový obdelníkový tunel a ne kužel jako u perspektivní kamery. Tento obdelník by měl mít stejný poměr stran jako canvas do kterého renderujeme, aby vyrenderovaná scéna nebyla po canvasu divně roztažená. Proto ortografickou kameru vytvářím následujícím způsobem, aby měla stejný poměr stran, jako canvas.

// poměr stran canvasu
const aspectRatio = canvasWidth / canvasHeight;

const camera = new OrthographicCamera(
    -1 * aspectRatio, // levá strana
    1 * aspectRatio, // pravá strana
    1, // horní strana
    -1, // dolní strana
    0.1,
    10
);

Pokud chcete obdelník ortografické kamery zvětšit/zmenšit, tak můžete v předchozí ukázce číslo 1 změnit za nějaké jiné a ortografická kamera bude mít stále stejný poměr stran jako canvas. V následující interaktivní ukázce si to můžete zkusit.

Pro tuto část je to vše. Ukázali jsme si jaké nám Three.js poskytuje typy kamer a popsali si vlastnosti perspektivní a ortografické kamery. Myslím že díky interaktivním ukázkám, které se na této stránce nachází to nebylo nic těžkého. V příští části si ukážeme, jak můžeme měnit nebo reagovat na změnu velikosti canvasu a aktualizovat podle toho kamery a renderer.

Pokračovat