total - javascript profiler chrome



Applicazione di profilatura Threejs (1)

Ci sono varie cose da provare.

Sei legato?

Cambia la tua tela in pixel 1 x 1 grande. Il tuo framerate va al rialzo? Se è così, stai tracciando troppi pixel o i tuoi ombreggiatori di frammenti sono troppo complessi.

Per vedere se semplificare il tuo shader di frammenti aiuterebbe a usare uno shader più semplice. Non conosco bene three.js. Forse il materiale di base?

Hai ombre? Spegnerli. Va più veloce? Puoi usare ombre più semplici? Ad esempio, le ombre in questo esempio sono false . Sono solo aerei con una trama circolare.

Stai usando effetti di post-elaborazione? Gli effetti di post-elaborazione sono costosi, specialmente sulle GPU mobili.

Stai disegnando molte cose opache? In tal caso, puoi ordinare il tuo ordine di disegno in modo da disegnare avanti e indietro (vicino al lontano). Non sono sicuro se three.js abbia un'opzione per farlo o meno. So che può riordinare le cose trasparenti in modo che sia semplice invertire il test. Ciò renderà il rendering più veloce presumendo che tu stia disegnando con il test di profondità perché i pixel nella parte posteriore verranno rifiutati dal DEPTH_TEST e quindi non verrà eseguito lo shader di frammenti.

Un'altra cosa che puoi fare per risparmiare larghezza di banda è disegnare su una tela più piccola e farlo allungare usando CSS per coprire l'area che vuoi che appaia. Molti giochi fanno questo.

Sei legato alla geometria?

Dici che stai disegnando solo 17 mesh ma quanto sono grandi quelle mesh? 17 12 cubi triangolari o 17 milioni di maglie triangolari?

Se sei vincolato alla geometria puoi usare la semplificazione? Se la geometria si estende in lontananza, puoi dividerla e usare i lod? vedi un campione

Ho un'applicazione webgl, ho scritto usando threejs. Ma l'FPS non è abbastanza buono su alcune delle mie macchine di prova. Ho provato a profilare la mia applicazione utilizzando Chrome su: tracciamento con l'aiuto di questo articolo: http://www.html5rocks.com/en/tutorials/games/abouttracing/

Sembra che la gpu sia sovraccaricata. Ho anche scoperto che il mio FPS cade drasticamente quando ho la mia intera scena nella visuale della telecamera. La scena contiene circa 17 maglie e un'unica fonte di luce direzionale. Non è una scena davvero pesante. Ho visto scene molto più pesanti ottenere rendering impeccabilmente sulla stessa GPU.

  • Quindi, quali modifiche posso apportare nella scena per renderla meno pesante, senza cambiarla completamente? Ho già provato a rimuovere le trame? Ma questo non sembra risolvere il problema.
  • C'è un modo per capire quale calcolo sta spingendo la tecnologia sulla GPU? O sarebbe questo a rompere l'astrazione di base che i trejs danno?
  • Quali sono i suggerimenti generali per la profilatura delle app webgl-threejs di GPU?




profiling