Už samotný název tohoto příspěvku je zavádející. Ale – nevadí!
Web v C++? Jak? Proč? O tom dnes něco málo zkusím napsat.
Divergentní myšlení. To je to, co můj mozek velmi rád sem tam provozuje. To on má na svědomí tuto na hlavu postavenou ideu. Neobvyklý koncept, který možná stojí za realizaci.
Ihned první otázka, kterou si možná položíme.
Jak zobrazíme vykreslené okno, nebo nějaké plátno na webu? A co bude to plátno? Jak dostaneme do okna prohlížeče obsah z naší aplikace?
Velmi stručná odpověď je – WebGL/OpenGL, případně další metody, které jsou však v mém příspěvku vynechané.
Aplikace napsaná v C++, která má zobrazit obsah na webu potřebuje kontext a plátno webu. Jenže v C++ se většinou vytváření standalone aplikace.
Magie, která povznese C++ aplikaci z LowLevel nížin na web se jmenuje Emscripten. Emscripten je v podstatě Clang kompilátor. Je modifikovaný pro překlad kódu do Wasm. Binární webový assembler zdrojový kód.
C++ aplikace ve svém přirozeném prostředí funguje tak, že vytvoří okno, pronajme si na něm plátno a do jeho kontextu vykresluje grafický obsah. Používá k tomu opengl, vulkan, a další podpůrné knihovny pro práci s grafikou a jejím zpracováním a zobrazováním.
Pokud však C++ aplikaci chceme zobrazit na webu, musíme ji napsat trochu odlišně a myslet při tom na to, že ji programujeme pro prostředí Emscripten. Takovou C++ aplikaci pak můžeme přeložit již zmíněným překladačem a vyprodukovat binární, html, javascript a data artefakty, které po sléze posíláme na web.
Emscripten podporuje moderní SDL, Raylib a další grafické knihovny.
Tento koncept programování nabízí velmi neotřelé a inovativní možnosti. Je to sice nevšední koncept, ale existuje mnoho portovaných C++ projektů, které byly přeloženy do webové podoby. Ať už jsou to různé emulátory, celé herní projekty, nebo grafické aplikace.
Jedna z první improvizací je k nahlednutí zde. Tento projekt jsem psal velmi narychlo a zaslouží si refaktorizaci, která se už tvoří. Tento zdrojový kód odkazuje již na refaktorizovanou verzi, na které nyní ve volném čase pracuji a je prozatím volně k dispozici na GitHubu.
Průběžné výsledky refaktorizované verze můžete shlédnout na následujícíh odkazech, které sem budu postupně přidávat. Zdrojový kód Vertex a Fragment shaderů je z ShaderToy. Se shadery jsou obecně problémy, jelikož se musí správně interpretovat dle verze OpenGL/WebGL/Vulkan, apod.
Ukázky přímo na webu – řada vizuálních prototypů
Náhled na původní šablonový projekt DotNameCpp v jeho webové verzi. Toto je čistá projektová šablona HTML projektu bez grafických renderů.
https://digitalspace.name/dotnamecpp/preview/debug/DotNameStandalone.html
https://digitalspace.name/dotnamecpp/preview/release/DotNameStandalone.html
Náhled na plné možnosti shaderů
Pokud se některý ze shaderů nezobrazí, nebo se vám zpomalí celý počítač, může to být příznak slabší grafické karty, nebo vám zrovna nefunguje GPU akcelerace pro ten který shader/prohlížeč. V tomto případě doporučuji zkusit jiný webový prohlížeč. Na MS Windows by neměl být problém. Na Linuxu může také někdy pomoci přepnout render na Vulkan. (např. google, pomocí chrome://flags/)
Nějaké ukázky. Pozn., nejsou optimalizované pro použití v mobilních telefonech.
happyjumping/debug happyjumping/release
seascape/debug seascape/release
synthwave/debug synthwave/release
glasscube/debug glasscube/release
singularity/debug singularity/release
fractaltrees/debug fractaltrees/release
fireflame/debug fireflame/release
anothercube/debug anothercube/release