--- title: "WebGL: co to jest? Słownik pojęć" description: "WebGL to technologia, dzięki której przeglądarka rysuje na stronie grafikę 3D na żywo, bez wtyczek, korzystając z karty graficznej urządzenia." url: https://fluostudio.pl/baza-wiedzy/slownik/webgl/ --- [Strony www](https://fluostudio.pl/baza-wiedzy/slownik/?dzial=www) # WebGL Inaczej Web Graphics Library WebGL to technologia, dzięki której przeglądarka rysuje na stronie grafikę 3D na żywo, bez wtyczek, korzystając z karty graficznej urządzenia. Działają na niej m.in. przeglądarki modeli 3D i konfiguratory 3D. ## W skrócie - Działa we wszystkich współczesnych przeglądarkach - Najpopularniejsza biblioteka: Three.js - Format modeli do sieci: najczęściej glTF lub GLB - Nowszy standard: WebGPU ## Usługa - [Strony www](https://fluostudio.pl/uslugi/strony-www/) Na stronie projektu [Itodi](https://fluostudio.pl/projekty/itodi/) jedna scena 3D prowadzi od taśmy na paczce, przez posty i instrukcję, do komody z konfiguratora, która trafia do kartonu. To nie film ani seria zdjęć, tylko scena, którą przeglądarka rysuje na bieżąco dzięki WebGL. Na tej samej technologii, z biblioteką Three.js, działa album 3D na stronie projektu [20 lat Porta w Rumunii](https://fluostudio.pl/projekty/porta-rumunia-20-lat/). ## WebGL, render i animacja 3D [Render 3D](https://fluostudio.pl/baza-wiedzy/slownik/render-3d/) i [animacja 3D](https://fluostudio.pl/baza-wiedzy/slownik/animacja-3d/) powstają wcześniej, w programie takim jak Blender, i trafiają na stronę jako gotowy obraz albo film. WebGL rysuje scenę na żywo w przeglądarce, więc użytkownik może nią sterować: obrócić produkt, zmienić wariant, przybliżyć detal. Ten sam model może posłużyć do obu rzeczy, jeśli od początku przygotuje się go także z myślą o sieci. ## Kiedy 3D się broni Wtedy, gdy kształt, materiał albo wariant produktu trudno pokazać zdjęciem: opakowanie, mebel, maszyna, część zamienna. W [konfiguratorze produktu](https://fluostudio.pl/baza-wiedzy/slownik/konfigurator-produktu/) klient od razu widzi swój wariant. Przy produkcie technicznym sam obejrzy detal, o który inaczej zapytałby handlowca. Jako ozdoba 3D się nie broni. Model, który kręci się na stronie głównej i niczego nie tłumaczy, tylko spowalnia ładowanie. ## Na co uważać - **Waga.** Modele i tekstury potrafią ważyć więcej niż cała reszta strony. Siatkę upraszcza się pod sieć, tekstury kompresuje, a scenę ładuje dopiero wtedy, gdy ktoś do niej przewinie. Inaczej cierpią [Core Web Vitals](https://fluostudio.pl/baza-wiedzy/slownik/core-web-vitals/). - **Telefony.** Ciężka scena na słabszym telefonie tnie się i grzeje urządzenie. Testuje się ją na przeciętnych telefonach. Mocny komputer projektanta niczego tu nie dowodzi. - **Wersja bez 3D.** Nie każde urządzenie uruchomi WebGL i nie każdy chce ruchu na ekranie. Na naszych stronach projektów przeglądarka bez WebGL dostaje w miejscu sceny 3D te same kroki ze zwykłymi zdjęciami. Treść ma być [dostępna](https://fluostudio.pl/baza-wiedzy/slownik/dostepnosc-cyfrowa/) także bez 3D. ## W naszych projektach - ### [Itodi](https://fluostudio.pl/projekty/itodi/) Na stronie projektu: scena 3D w WebGL, w której komoda zmienia się razem z wymiarami, frontami, podstawą i kolorem z konfiguratora. - ### [20 lat Porta w Rumunii](https://fluostudio.pl/projekty/porta-rumunia-20-lat/) Na stronie projektu: album 3D w Three.js, obok identyfikacji i ponad 30 materiałów na jubileusz marki w Aradzie. ## Zobacz też - [Animacja i wideo Animacja 3D Animacja 3D to film złożony z klatek wyliczonych z trójwymiarowej sceny: modeli, materiałów, świateł i kamery. Pozwala pokazać produkt z każdej strony, od środka i jeszcze przed premierą.](https://fluostudio.pl/baza-wiedzy/slownik/animacja-3d/) - [Animacja i wideo Render 3D Render 3D to obraz wyliczony przez program z trójwymiarowej sceny: modeli, materiałów, świateł i kamery. Może wyglądać jak zdjęcie produktu, choć nikt go nie fotografował.](https://fluostudio.pl/baza-wiedzy/slownik/render-3d/) - [Strony www Konfigurator produktu Konfigurator produktu to narzędzie na stronie, w którym klient sam składa produkt z dostępnych opcji, np. wymiaru, materiału i koloru, i zwykle od razu widzi efekt. Wynik trafia do koszyka albo do zapytania.](https://fluostudio.pl/baza-wiedzy/slownik/konfigurator-produktu/) - [Strony www Front-end Front-end to część strony lub aplikacji, którą użytkownik widzi i obsługuje, czyli układ, przyciski, formularze i animacje. Powstaje w HTML, CSS i JavaScripcie i działa w przeglądarce.](https://fluostudio.pl/baza-wiedzy/slownik/front-end/) - [Strony www Core Web Vitals Core Web Vitals to trzy wskaźniki Google, które mierzą, jak strona działa u prawdziwych użytkowników. Sprawdzają, jak szybko pokazuje główną treść (LCP), jak szybko reaguje (INP) i czy układ nie skacze (CLS).](https://fluostudio.pl/baza-wiedzy/slownik/core-web-vitals/) - [Animacja i wideo Low poly Low poly to model 3D zbudowany z małej liczby wielokątów. Bywa celowym stylem z widocznymi, kanciastymi ściankami, lekkim modelem do gier i stron albo pierwszym etapem modelowania.](https://fluostudio.pl/baza-wiedzy/slownik/low-poly/) - [Animacja i wideo Scrollytelling Scrollytelling to opowiadanie historii na stronie, w którym przewijanie uruchamia kolejne sceny. Tekst, obrazy, wykresy i animacje zmieniają się w rytmie przewijania.](https://fluostudio.pl/baza-wiedzy/slownik/scrollytelling/) Hasło pojawia się też w: [Strona statyczna](https://fluostudio.pl/baza-wiedzy/slownik/strona-statyczna/) ## Strona ma sprzedawać, działać szybko i dawać się łatwo edytować. Porozmawiajmy o Twojej. Na pierwszej rozmowie sprawdzimy, czy i jak możemy pomóc, bez zobowiązań. [Porozmawiajmy](https://fluostudio.pl/kontakt/) [Umów 30 minut konsultacji](https://calendly.com/anita-fluo/darmowa-konsultacja-30-minut)