Obsah

Na této stránce se nachází odkazy na specifické části tutoriálu.

Co je Three.js

• WebGL
• Jak se 3D grafika vykresluje

První scéna

• Instalace Three.js
• Vyrenderování kostky
• Co je potřeba k vytvoření základní scény
  • Scéna
  • Mesh
  • Kamera
  • Renderer

Webpack

• Co je NPM
• Co je Webpack
• Instalace Three.js přes NPM
• Souborová struktura projektu
• Konfigurace Webpacku
  • Konfigurační soubor
  • Zpracování HTML souboru
  • Zpracování CSS stylů
  • Zkopírování složky
  • Konfigurace pro vývoj
• Importování Three.js
• Startovní kód

Transformace objektů

• Souřadnicový systém
• Vlastnosti pro transformaci objektů
  • position
  • scale
  • rotation
  • quaternion
• Seskupování objektů
  • Přidávání objektů do objektů
  • Seskupování objektů do skupin
• Třída Vector3
• Třída Object3D
• Axes Helper

Animace

• Jak funguje animace
• Vytvoření animační smyčky
  • Startovní kód
  • Použití metody setAnimationLoop
  • Animace posunu kostky
  • Delta time
  • Posouvání kostky pomocí funkce sinus

Kamera

• Typy kamer
  • Array Camera
  • Cube Camera
  • Orthographic Camera
  • Perspective Camera
  • Stereo Camera
• Perspektivní kamera
• Ortografická kamera

Měnění velikosti canvasu

• Startovní kód
• Roztažení canvasu přes celé okno prohlížeče
• Reagování na změnu velikosti okna
• Pixel ratio
• Fullscreen

Typy ovládání

• Startovní kód
• Arcball Controls
• Drag Controls
• First Person Controls
• Fly Controls
• Orbit Controls
• Pointer Lock Controls
• Trackball Controls
• Transform Controls

Dat.GUI

• Co je dat.GUI
• Startovní kód
• Instalace dat.GUI
• Použití dat.GUI
  • Číselný input
  • Input pro barvu
  • Checkbox input
  • Select input
  • Pojmenovávání inputů

Geometrie

• Co je geometrie
• Startovní kód
• Typy geometrií
  • Box Geometry
  • Capsule Geometry
  • Circle Geometry
  • Cone Geometry
  • Cylinder Geometry
  • Dodecahedron Geometry
  • Icosahedron Geometry
  • Lathe Geometry
  • Octahedron Geometry
  • Plane Geometry
  • Polyhedron Geometry
  • Ring Geometry
  • Sphere Geometry
  • Tetrahedron Geometry
  • Torus Geometry
  • Torus Knot Geometry
  • Ostatní geometrie
• Vlastní geometrie

Textury

• Co jsou textury
• Typy textur
  • Base Color
  • Alpha
  • Height
  • Normal
  • Rougness
  • Metalness
  • Ambient Occlusion
  • Emissive
• Physically Based Rendering
• Startovní kód
• Načítání textur
• UV Unwrapping
• Manipulace textury
  • Zvětšování/zmenšování
  • Posouvání
  • Rotace
• Filtering a Mipmapping
  • Minification Filter
  • Magnification Filter
  • Vypnutí generování mipmap
• Kritické věci pro přípravu textur
  • Velikost souboru
  • Rozměry textury

Materiály

• Startovní kód
• Mesh Basic Material
  • Barva
  • Color textura
  • Průhlednost
  • Renderování obou stran polygonů
• Mesh Normal Material
  • Flat Shading
• Mesh Matcap Material
• Mesh Lambert Material
• Mesh Phong Material
  • Lesklost
• Mesh Toon Material
  • Gradient Map
• Mesh Standard Material
  • Textury
  • Ambient Occlusion
  • Environment mapa
• Další materiály
  • Mesh Physical Material
  • Points Material
  • Shader Material a Raw Shader Material

Světla

• Startovní kód
• Typy světel
  • Ambient Light
  • Directional Light
  • Hemisphere Light
  • Point Light
  • Spot Light
  • Rect Area Light
• Vliv světel na výkon
• Vypékání světel do textur
• Helpery
  • Directional Light Helper
  • Hemisphere Light Helper
  • Point Light Helper
  • Spot Light Helper

Stíny

• Jak tvorba stínů funguje
• Startovní kód
• Zapnutí stínů
• Zlepšení kvality stínů
  • Rozlišení shadow mapy
  • Rozměry kamery pro stíny
  • Rozmazání stínů
  • Změna algoritmu pro shadow mapy
• Čemu se vyhnout
• Vypékání stínů do textur

Particles

• Co jsou particles
• Startovní kód
• Vytvoření particles
• Přidání textury
  • Nastavení alpha testu
  • Deaktivace depth testingu
  • Vypnutí zápisu do depth bufferu
  • Změna blending módu
• Měnění barev částic
• Animace

Raycasting

• Co je to raycasting
• Startovní kód
• Použití Raycasteru
• Raycasting z pozice myši

Fyzika

• Knihovny pro fyziku
  • Používání knihovny pro fyziku s Three.js
  • 2D/3D knihovny pro fyziku
• Startovní kód
• Instalace Cannon.js knihovny
• Vytvoření světa pro fyziku
• Vytvoření body
• Aktualizace světa pro fyziku
• Vytvoření statického objektu
• Materiály

Importování modelů

• Formáty pro 3D modely
  • GLTF
• Startovní kód
• Načítání 3D modelů
• Načítání GLTF souboru s Draco kompresí
• Načítání animací

Realistické renderování

• Startovní kód
• Realistická světla
• Output Encoding
• Tone Mapping
• Stíny
• Anti-Aliasing

Shadery

• Co je Shader
  • Typy shaderů
• Attributes, Uniforms a Varyings
  • attributes
  • uniforms
  • varyings
• Startovní kód
• Vytvoření vlastních shaderů
• Jazyk GLSL
  • Odsazování a středníky
  • Datové typy
  • Vektory
  • Funkce
• Psaní shaderů do samostatných souborů
• Psaní vertex shaderu
• Psaní fragment shaderu
• Varyings
• Uniforms
  • Animace
• Aplikování textury
• Shader Material
• Kreslení vzorů
• Rozšiřování Three.js materiálů

Animování particles

• Startovní kód
• Vytvoření geometrie pro particles
• Vytvoření materiálu pro particles
• Zobrazení vertexů
• Aplikování textury
• Přidání barev
• Animace
• Modifikování Points Materialu

Post-Processing

• Jak post-processing funguje
• Startovní kód
• Vytvoření Effect Composeru
• Přidání post-processing efektů
• Vytváření vlastních efektů
• Konfigurace render targetu

3D Text

• Startovní kód
• Načtení fontu
• Vytvoření geometrie pro text
• Vycentrování textu

Načítání

• Startovní kód
• Načtení assetů
• Loading Manager
  • Překrytí canvasu při načítání
  • Přidání progress baru

Pozicování HTML elementů

• Startovní kód
• Pozicování elementů na canvasu
• Skrývání elementů

Optimalizace

• Měření FPS
• Draw cally
• Informace rendereru
• Disposing
• Světla
• Stíny
• Textury
• Slučování geometrie
• Materiály
• Instanced Mesh
• 3D modely
• Frustum Culling
• Pixel ratio
• Anti-aliasing
• Preference výkonu
• Post-processing
• Shadery