Pojďme si promluvit o grafických rozhraních API.

Aplikační programovací rozhraní neboli API je spojením mezi počítači nebo mezi počítačovými programy. Působí jako softwarové rozhraní, které nabízí službu dalším částem softwaru. V případě toho, co dělají vývojáři full-stack, API poskytuje uživateli možnost zadat požadavek, odeslat tento požadavek jinému fungujícímu softwaru a poté získat výsledek z tohoto softwaru zpět. Program používá části svého API nebo podprogramy, metody, požadavky nebo koncové body k vytváření, odesílání a přijímání těchto požadavků mezi jednotlivými částmi softwaru. Tato volání definuje specifikace API, která vývojáři vysvětluje, jak je používat nebo implementovat.

Rozhraní API existují v různých aplikacích, ale dnes budeme hovořit o grafických API – softwaru, který vám umožní vidět to, co právě čtete na obrazovce. Grafické rozhraní API mezi softwarem, který používáte, a ovladači vaší grafické karty umožňuje vizuální reprezentaci informací, které chcete zobrazit – ať už je to procházení webu, sledování filmu nebo hraní her.

Konkrétně Graphics API

Grafická rozhraní API jsou softwarové knihovny, které jsou umístěny mezi vaším softwarem (hra, film, YouTube video nebo vizualizace) a ovladače vaší grafické karty. Specifikace API umožňuje vývojáři vznést požadavek na rozhraní API a rozhraní API propojit s hardwarem prostřednictvím ovladačů tohoto hardwaru. To znamená, že systém nepotřebuje mít takovou specifickou sadu kódu pro propojení s hardwarem. Na rozdíl od dob Atari nebo Commodore 64, kdy software komunikoval přímo s hardwarem, a proto musel být napsán pro tuto konkrétní sadu hardwaru, umožňují grafické rozhraní API větší flexibilitu v tom, jaký hardware je podporován, aniž by potřebují vývojáři psát specifická rozhraní pro každou možnou kombinaci hardwaru. Tato rozhraní jsou výsledkem skupinového úsilí a z velké části je spravuje nezisková technologická skupina The Khronos Group. Tato skupina se skládá z návrhářů operačních systémů, výrobců grafických karet a obecných technologických skupin, jako jsou Apple, Google a Mozilla. Tyto skupiny definují, jaké specifikace API potřebuje, a jaká rozšíření jsou potřebná pro toto API pro provoz jejich hardwaru, což umožňuje velkou flexibilitu v případech použití a rozšiřitelnost pro budoucí verze API.

3D na web

Abychom však mohli začít s počátečními základy pro účely vývoje webu, můžeme začít s OpenGL. OpenGL je vícejazyčné rozhraní API pro různé platformy pro vykreslování 2D a 3D vektorové grafiky. Vyvinutý společností Silicon Graphics Inc, jeho první verze byla vydána v roce 1992 a široce se používala v počítačově podporovaném designu (CAD), vědecké vizualizaci, informační vizualizaci, letových simulacích, videohrách a v poslední době také v prostředí virtuální reality a rozšířené reality. Navrženo pro implementaci převážně nebo zcela v hardwaru, API je definováno jako sada funkcí, které má volat klientský program, spolu s pojmenovanými celočíselnými konstantami. I když jsou tyto definice podobné definicím v programovacím jazyce C, jsou jazykově nezávislé a lze jim dát jazykové vazby, což umožňuje jazykům jako JavaScript používat grafické API, WebGL.

Vzhledem k tomu, že WebGL je relevantnější pro vývojáře full-stack webových stránek, budu o něm mluvit trochu podrobněji. WebGL, zkratka pro Web Graphics Library, je JavaScript API pro vykreslování 2D a 3D grafiky v libovolném kompatibilním prohlížeči pomocí zásuvných modulů. To umožňuje vývojářům využít systémový hardware k urychlení fyziky, zpracování obrázků a efektů jako součást plátna webové stránky. Počínaje pěkným sudým číslem 1.0 se WebGL 1.0 zrodilo z předchozího projektu s názvem Canvas 3D, který zahájil vývojář Vladimir Kukicevic z Mozilly. Cílem Canvas 3D bylo v roce 2006 přidat podporu pro nízkoúrovňovou hardwarovou akceleraci 3D grafiky v prohlížeči, ale do roku 2007 vytvořili další vývojáři z Mozilly a Opery své vlastní samostatné implementace této technologie. V roce 2009 Khronos Group převzala Canvas3D a založila 'WebGL Working Group', která se skládá z výše zmíněných vývojářů.

První kroky

WebGL 1.0 je založen na OpenGL ES (Embedded Systems) 2.0. Používá element plátna HTML 5 a je přístupný přes rozhraní DOM. Tato verze WebGL byla založena na metodě OpenGL pro vestavěné systémy a byla zaměřena speciálně na vestavěná zařízení, jako jsou chytré telefony, tablety, videoherní konzole a PDA. Nesouvisející, kdy jste naposledy použili PDA? V současné době je nejnovější stabilní verze WebGL 2.0, která je stále založena na OpenGL, nyní OpenGL ES 3.0, nyní umožňuje vývojářům zaručenou dostupnost volitelných rozšíření WebGL 1.0, ale s dodatečným přístupem k dalším API. Současná implementace v prohlížečích Firefox a Chrome (také Chromium) je příznačně pojmenována ANGLE (Almost Native Graphics Layer Engine), což je open source abstraktní vrstva vyvinutá společností Google. Popisováno jako přenosné OpenGL a využívá WebGL 2.0 k přímému překladu do OpenGL za účelem volání do Direct3D, což je grafické rozhraní Windows API. Tato implementace poskytuje extrémně rychlá volání skutečných ovladačů grafického hardwaru, což umožňuje mnohem komplexnější a interaktivnější vykreslování. Důvodem tohoto zvýšeného výkonu je způsob, jakým je kód shaderu (způsob, jakým vývojář chce věc vykreslit) předán GPU. Ve WebGL 1.0 by vývojář musel poskytnout a implementovat shader kód a nakonfigurovat koncové body dat explicitně v JavaScriptu. Tento explicitní výraz by pak předal kód shaderu jako textové řetězce, kde by WebGL tyto shadery zkompiloval do kódu GPU. Tento kód je pak spuštěn pro každý vertex odeslaný přes API a pro každý pixel rastrovaný na obrazovku, což znamená delší dobu načítání a větší šanci na lidskou chybu při psaní. Toto se nazývá API s pevnou funkcí, což znamená, že i když je jednodušší implementovat, je navrženo speciálně a má menší možnosti rozšíření.

WebGL 2.0 využívá alternativní přístup k předávání informací prostřednictvím toho, co se nazývá „3D API založené na shaderu“. Zatímco API s pevnou funkcí je jednodušší, API založené na shaderu zpracovává grafická data obecně, a proto programový objekt může kombinovat fáze shaderu do jediného propojeného celku, což výrazně zkracuje dobu načítání a umožňuje vývojářům strávit více času. zaměřit se na grafiku, kterou chtějí zobrazit, spíše než být omezeni tím, co jsou schopni dělat kvůli metodě, kterou jsou data předávána. To znamená, že grafická rozhraní API na hardwarové úrovni, jako jsou Direct3D/DirectX (Microsoft), Metal (Apple), RenderMan (Pixar) a Vulkan (AMD), jsou schopnější interagovat s voláními z WebGL

WebGL je neuvěřitelný nástroj, který nám umožňuje užít si krátké doby načítání, neuvěřitelnou grafiku v prohlížeči na našich stolních počítačích i mobilních zařízeních. WebGL mění způsob, jakým jsme schopni vzájemně komunikovat prostřednictvím internetu, od zábavných dob, kdy byly základní textové tabule HTML až po plně interaktivní a poutavé webové stránky.

Pro další čtení a zajímavosti bych vám doporučil podívat se na tyto.

Shadertoy, knihovna shaderů WebGL 2.0

Three.JS, úžasný příklad toho, co můžete dělat s WebGL pro vytváření grafických detailů na vysoké úrovni