Shadeline i SHDL Studio

Shadeline to samodzielna biblioteka runtime do tworzenia oryginalnych animacji i opraw wizualnych w przeglądarce. Nie jest przywiązana do jednego frameworka: do integracji wystarczy host DOM lub Canvas, a reszta logiki renderowania, scen i parametrów pozostaje po stronie biblioteki.

Sercem projektu jest konfigurowalny pipeline Three.js / WebGL. Shadeline składa efekty shaderowe, tekstury rastrowe, tła proceduralne, deformacje, zakłócenia i reakcje czasowe w jeden przepływ, dzięki czemu można zmieniać charakter sceny bez przebudowywania renderera.

Warstwa scen pozwala traktować animację jak system, nie pojedynczy efekt. Biblioteka obsługuje zestawy scen, ustawienia per scena, duplikowanie, zmianę nazw, kolejność efektów i widoczność warstw. Ten model dobrze pasuje do animowanych obiektów pierwszoplanowych, opraw produktowych, wizualizacji audio-reaktywnych, interaktywnych konfiguratorów i portfolio.

Aktualny zestaw obejmuje 12 warstw efektów: Raster image, Duotone mapping, Signal Displace / Glitch, Chromatic split, Legacy Pixel Bleed, CRT Scanlines, Barcode Stripes, Signal Echo, Procedural Waves, Film Grain, Background Grid oraz Negative Pulse. Każdą warstwę można włączać, wyłączać, parametryzować i przenosić w kolejności efektów.

Shadeline ma też warstwę wydajnościową: tryby Auto, Quality, Balanced i Battery, docelowe FPS, maksymalny DPR oraz adaptacyjną jakość renderowania. Runtime emituje dane o FPS, DPR i trybie pracy, więc host może reagować na koszt renderowania, rozdzielczość i możliwości urządzenia.

Integracja z interfejsem nie kończy się na Canvasie. Shadeline emituje typowane zdarzenia zmian ustawień, scen, konfiguracji, kolejności efektów, widoczności warstw, tekstury, audio, wydajności oraz zmiennych CSS. Dzięki temu elementy HTML poza WebGL mogą pozostać zsynchronizowane wizualnie z animowaną sceną.

Shadeline nie został jeszcze wydany publicznie. Traktuję go jako rozwijany projekt narzędziowy: połączenie runtime'u, systemu scen i edytora, które może obsługiwać zarówno finalne animacje produkcyjne, jak i proces ich projektowania. W przyszłości możliwe, że pojawi się osobna strona demonstracyjna projektu.