3D-veebilehe jõudlus: glTF, Draco, KTX2 ja mobiili varulahendused

Kiire 3D-veebilehe aluseks on kolm otsust. Määra kolmnurkade arvu, failimahu ja joonistuskutsete piirid juba enne modelleerimist. Tihenda kõik failid: geomeetria Draco või meshoptiga, tekstuurid KTX2-ga. Laadi 3D alles pärast HTML-lehe esmast kuvamist ning paku nõrgematele telefonidele staatilist pilti või videot. Nii võib reaalajas 3D mahtuda Google Core Web Vitalsi heade näitajate piiridesse.

Nii teeme seda ASFARI digitalis.

Määra kõigepealt 3D jõudluse piirid

Jõudlusega tuleb arvestada juba lähteülesandes, mitte viimasel töönädalal. Mobiili avavaate stseeni loomisel lähtume järgmistest sihtväärtustest. Need on meie enda tööpiirid, mitte valdkonna standard.

Joonistuskutse on üks brauseri käsk graafikaprotsessorile: „joonista see võrk selle materjaliga“. Väiksem arv suuri joonistuskutseid on tõhusam kui palju väikeseid. Seetõttu on võrkude ühendamine ja instantsimine ehk sama objekti korduvate eksemplaride ühine joonistamine olulisem kui mõne tuhande kolmnurga kokkuhoid.

glTF-i tihendamine: Draco, meshopt ja KTX2

glTF on veebi standardne 3D-vorming (Khronos). Eksporditud failid võivad olla suured, kuid tihendamine vähendab sageli nende mahtu märgatavalt.

• Draco tihendab võrgu geomeetriat. See sobib hästi tihedatele võrkudele, kuid dekodeerimine võtab veidi aega.
• meshopt on teine geomeetria tihendamise võimalus, mille dekodeerimine on väga kiire. Tasub oma mudeliga katsetada, kumb sobib paremini: meshopt või Draco.
• KTX2 / Basis Universal tihendab tekstuurid vormingusse, mida graafikaprotsessor saab otse kasutada. JPG või PNG võib allalaadimisel olla väike, kuid GPU mälus pakitakse see täies mahus lahti. KTX2 jääb ka seal tihendatuks, aidates vältida telefonis tekkivaid tõrkeid.

Avatud lähtekoodiga käsureatööriistas glTF-Transform näeb esimene töötlus välja nii (käsud dokumentatsioonist):

npm install --global @gltf-transform/cli
gltf-transform inspect hero.glb        # kolmnurgad, tekstuurid, mahud
gltf-transform optimize hero.glb hero-opt.glb --compress draco --texture-compress webp

KTX2 jaoks kasuta WebP asemel käsureatööriista KTX2-tekstuurikäske. Need vajavad paigaldatud KTX-Software’i. Seejärel määra Three.js-ile, kuidas mõlemat vormingut dekodeerida:

const draco = new DRACOLoader().setDecoderPath('/draco/');
const ktx2 = new KTX2Loader().setTranscoderPath('/basis/').detectSupport(renderer);
const loader = new GLTFLoader().setDRACOLoader(draco).setKTX2Loader(ktx2);

Käivita inspect enne ja pärast töötlust. Ületad endiselt piirväärtusi? Tavaliselt tuleb mudelit Blenderis muuta, mitte faili veel rohkem tihendada.

Laadi 3D pärast lehe esmast kuvamist

3D-teek koos mudelitega võib olla mahukas. Utsubo andmetel on minimeeritud Three.js-i tuum umbes 600 KB, koos abimoodulite, järeltöötluse ja GLB-ga aga üle 3 MB. Kui selle laadimine blokeerib lehe kuvamist, halveneb Largest Contentful Painti näitaja.

Tööjärjekord:

1. Renderda HTML serveris, sealhulgas pealkiri ja üleskutse tegevusele.
2. Näita asenduspilti kindla kuvasuhtega alas, et canvas-elemendi lisandumine sisu paigast ei nihutaks.
3. Impordi 3D-kood siis, kui brauser pole hõivatud muude ülesannetega või vastav ala keritakse vaatevälja.
4. Kui esimene kaader on valmis, asenda pilt sujuva üleminekuga canvas-elemendiga.

const start = () => import('./hero-scene.js').then(m => m.mount(canvas));
'requestIdleCallback' in window ? requestIdleCallback(start) : setTimeout(start, 200);

Nii töötab ka GitHubi avalehe gloobus. Esimese kaadri valmimiseni kuvatakse SVG-asenduspilti, mis seejärel asendub canvas-elemendiga 600 ms kestva üleminekuga. See on tähtis ka otsingus nähtavuse jaoks, millest räägime artiklis „WebGL-veebilehe SEO“.

WebGL-i jõudlus mobiilis: seadmete kvaliteeditasemed

Kõik telefonid ei pea saama sama stseeni. Kavanda vähemalt kolm taset:

• Kõrge kvaliteet: täielik stseen, pikslitiheduse kordaja ülempiir on 2 (renderer.setPixelRatio(Math.min(devicePixelRatio, 2))).
• Madal kvaliteet: vähem osakesi, järeltöötluseta, pikslitiheduse kordaja 1-1,5.
• Varulahendus: eelrenderdatud korduv videoklipp või staatiline pilt. Helita video atribuudiga playsinline saab iOS-is automaatselt lehe sees mängida.

Kohanda kvaliteeti ka töö käigus. GitHubi gloobus jälgib kaadrisagedust ja vähendab kvaliteeti, kui ei suuda viimase 50 kaadri jooksul hoida 55,5 FPS-i. Lahendus liigub läbi nelja kvaliteeditaseme: vähendab pikslitihedust ja kiirte lõikumiskontrollide arvu ning jätab punkte ligikaudu kolmandiku võrra vähemaks.

Three.js-i jõudluse optimeerimiseks salvesta arenduse ajal igal kaadril väärtused renderer.info.render.calls ja renderer.info.render.triangles ning võrdle neid piiridega. Järgi ka eelistust prefers-reduced-motion: vähendatud liikumise valinud külastajale näita pöörleva stseeni asemel staatilist pilti.

Mõõda Core Web Vitalsi näitajaid

Google peab headeks väärtusi LCP ≤ 2,5 s, INP ≤ 200 ms ja CLS ≤ 0,1. 3D-lehel on LCP-elemendiks sageli canvas või asenduspilt ning pikk varjutajate kompileerimine halvendab INP-d.

Utsubo hinnangul kulub ühe varjutaja kompileerimiseks 50-300 ms ja suure tekstuuri dekodeerimiseks 50-200 ms. Seepärast valmista varjutajad ette enne kasutaja esimest toimingut. Animatsioonist laiemalt loe artiklist „Kas animatsioon aeglustab veebilehte?“. Üksiku tootemudeli lisamist käsitleb juhend „Kuidas lisada veebilehele interaktiivne 3D-mudel“.