02/Konversija

3D vizualizacijos ir web animacijos

WebGL, kuris nesugriauna greičio. Viena stipri idėja vietoje penkių efektų.

Trumpas atsakymasNeimanoma kuria 3D scenas naršyklei su Three.js ir React Three Fiber: produktų vizualizacijos, interaktyvūs konfigūratoriai, hero scenos. Kaina — nuo 1 200 € už sceną. Nenaudojame Spline (800 kB–2 MB JS). Kiekviena scena turi pajėgumo vartus ir statinį fallback'ą silpniems įrenginiams.

01/Problema

800 kB–2 MB

Spline scenos svoris

Populiarūs „no-code" 3D įrankiai atsiunčia savo runtime ir sunaikina Core Web Vitals. Mes rašome sceną ranka.

< 60

draw calls riba

Be griežto biudžeto WebGL scena tampa nenaudojama telefone. InstancedMesh, vienas materialas, KTX2 tekstūros.

5 %

svorio už 80 % efekto

Jei 3D netelpa į biudžetą, siūlome CSS/SVG alternatyvą — vizualiai 80 % efekto už 5 % svorio.

02/Sprendimas

Kaip mes tai darome

01

Progresyvus patobulinimas

Serveris atiduoda statinį vaizdą, 3D įsijungia po LCP tik jei įrenginys pajėgus. 3D niekada nėra LCP elementas.

02

Pajėgumo pakopos

Ultra, high, mid, off — pagal WebGL2, branduolius, atmintį, ekrano plotį, Save-Data ir prefers-reduced-motion.

03

Asset disciplina

glb su Draco ir meshopt < 180 kB, KTX2/Basis tekstūros, HDRI 512×256 tik atspindžiams.

04

Adaptyvus FPS

Jei vidutinis FPS nukrenta žemiau 45 per 3 sekundes — scena automatiškai nusileidžia pakopa žemyn.

03/Kas įeina

Konkretus sąrašas

  • Koncepcija ir raidos brėžinys
  • Modeliavimas arba jūsų modelių optimizacija
  • Shaderiai ir medžiagos
  • Scroll ar hover valdoma animacija
  • Pajėgumo detekcija ir fallback
  • Statinis renderis silpniems įrenginiams
  • prefers-reduced-motion palaikymas
  • Performance ataskaita prieš/po

04/Procesas

  1. 01

    Koncepcija

    3 d.

    Idėja, referencai, techninis įgyvendinamumas, biudžetas kilobaitais.

  2. 02

    Prototipas

    1 sav.

    Gyvas prototipas su matuojamu FPS ir svoriu.

  3. 03

    Gamyba

    1–3 sav.

    Galutinė geometrija, shaderiai, animacija, fallback.

  4. 04

    Optimizacija

    3 d.

    Draco, KTX2, pakopos, Lighthouse patikra.

05/Kaina

Kainos viešos. Derinama apimtis, ne kaina.

Scena

nuo 1 200 €

  • 1 3D scena
  • Fallback vaizdas
  • Pajėgumo vartai
  • Integracija į svetainę
Gauti auditą

Rekomenduojame

Produkto konfigūratorius

nuo 4 900 €

  • Interaktyvus modelis
  • Variantų valdymas
  • Kainos skaičiavimas
  • Užklausos forma
Gauti auditą

Pilna patirtis

nuo 9 900 €

  • 3–5 scenos
  • Scroll naratyvas
  • Custom shaderiai
  • Video renderiai marketingui
Gauti auditą

07/DUK

Dažni klausimai

Ne, jei laikomasi biudžeto. 3D krautas atskirai po LCP, tik pajėgiems įrenginiams. Lighthouse riba — 90 desktop, 85 mobile, ir ji tikrinama CI.

Ekranuose žemiau 768 px pagal nutylėjimą rodomas statinis renderis. Tai sąmoningas sprendimas — telefone svarbiau greitis.

Galime ją perrašyti į Three.js. Tipinis rezultatas — 3–6 kartus mažesnis svoris ir stabilūs 60 FPS.

Tinka CAD, OBJ, FBX ar GLB. Jei modelio nėra — modeliuojame patys, tai įskaičiuojama į scenos kainą.

Taip. Tos pačios scenos renderiai tinka reklamai ir socialiniams tinklams — nuo 690 € už kūrybinių paketą.

Gauti auditą per 48 val.