DIGIKROM Lights PRO – Interaktywna Odyseja 3D w Świecie WordPressa (Case Study)

Projekt powstał z potrzeby przesunięcia granic tego, co uznaje się za „standardowy widget Elementora”. Inspiracją był legendarny eksperyment WebGL „Lights”, ale celem było stworzenie narzędzia, które będzie nie tylko piękne, ale też w pełni konfigurowalne przez użytkownika końcowego bez znajomości kodu.

Wyzwanie Techniczne

Głównym problemem przy wdrażaniu zaawansowanej grafiki 3D na strony WordPress jest wydajność i kompatybilność. Standardowe rozwiązania często obciążają procesor lub wymagają ładowania ogromnych bibliotek z zewnętrznych serwerów.

• Cel: Stworzenie płynnego (60 FPS) doświadczenia audiowizualnego.

• Ograniczenie: Brak zależności od zewnętrznych CDN i optymalizacja pod urządzenia o różnej mocy obliczeniowej.

Rozwiązanie: Architektura DIGIKROM

Zbudowaliśmy autorski ekosystem oparty na trzech filarach:

1. Silnik Renderujący (Three.js + WebGL) Zamiast statycznych obrazów, wykorzystaliśmy akcelerację sprzętową GPU. Scena składa się z ponad 15 000 dynamicznych punktów. Zastosowaliśmy autorski generator terenu (Terrain Mesh), który w czasie rzeczywistym tworzy nieskończone pasmo górskie, dając użytkownikowi poczucie nieustannego lotu.

2. Analiza Audio (Web Audio API) Widget nie tylko „odtwarza” muzykę – on ją rozumie. Algorytm analizuje pasma częstotliwości (FFT) i mapuje je na:

• Kolory Vertex: Gwiazdy zmieniają barwę w zależności od tonów wysokich i średnich.

• Skalę Lidera: Główny neonowy meteor pulsuje w rytm basu.

• Przezroczystość Terenu: Cały krajobraz „oddycha” wraz z dynamiką utworu.

3. Optymalizacja „Fake Bloom” Zrezygnowaliśmy z ciężkich procesorów post-processingu na rzecz autorskich tekstur gradientowych (Canvas Sprites). Dzięki temu uzyskaliśmy efekt kinowej poświaty neonów przy minimalnym obciążeniu RAM-u, co pozwala na płynne działanie nawet na urządzeniach mobilnych.