HTML Performance Optimization

  • #10, by SimonSSaturday, 21. October 2017, 00:21 7 years ago
    I tested a little and made an update for the html5 player, that betters performance a little and also adds info about the download progress. I get the best performance in Chrome here, Firefox tends to lock up and Edge is really slow. The biggest performance issue is decoding images and not how big the game is (although Firefox is not so skilled at managing it).

    Thread Captain

    1581 Posts


  • #11, by Johannes Reß-2Sunday, 22. October 2017, 12:40 7 years ago
    Thanks for all your feedback. I work on a Dell XPS 15 9560 and for me it is at least playable on Chrome and Firefox - but it is still jerking a lot (even if CPU and RAM are only at 30% usage - so there must be another bottleneck). On a bit weaker PCs (still no crap), I have seen a lot of unplayable situations. 

    If you want to compare the HTML Version to the otherversions, you can find all different ones at http://schulprojekte-reformation.de/spiel/ - besides the HTML Version, they all seem to perform great. I have some problems with the touch controls, but thats something for a different thread.

    I will test the new HTML export tomorrow, give more feedback and send you a new link to the HTML Versions. I'm still thinking about, what we could reduce to optimize perfomance, besides redoing the whole game in 720p.

    Do you think, reducing the walkcycles to 4 directions would make a noticeable difference?

    Newbie

    31 Posts

  • #12, by afrlmeSunday, 22. October 2017, 13:06 7 years ago
    Do you think, reducing the walkcycles to 4 directions would make a noticeable difference?
    It's possible because the default character animations for the playable character get stored in the cache. These animations are the idle, walk & talk animations. I believe they are always in the cache using up VRAM. All other non-preloaded animations get stored in the temp cache as they play. For windows, mac, linux etc, these will play & load much faster if you use webp due to the smaller file-sizes compared to png, but they will still use the same amount of VRAM - short of making the images smaller & scaling them up with Lua script, but that will reduce the overall quality of them, which isn't very nice for characters or images/animations that need to be sharp & detailed.

    I recommend reading my tips on game optimization on the wiki as there are various methods I've mentioned on that to help reduce both the amount of required hdd/ssd space & VRAM usage.

    1. Less animation frames = load faster & use less VRAM.

    2. Less white space (cropping) reduce file size & use less VRAM.

    3. Convert png to webp format (faster loading due to smaller filesizes)

    4. Never use duplicated animation frames, instead assign manual pause values to frames that you need to display longer.

    5. Don't use duplicated frames for pendulum effect animations. Either manually add the current frame files in reverse one by one or use Lua script - I shared a script on the script index for that a while back (it's an easy one too).

    6. for animations like water ripples, fog, mist, snow, rain, smoke, etc. consider exporting the image at 50% or 25% of the intended size & then using Lua script to scale up the animation when it plays. Also very easy to do.

    There's lots of things you can do for optimizing your games. I'm not sure about html5. Maybe VS html5 export needs refining a bit to make it more stable/optimized, or maybe it is just down to the way you have created your game - for me, it's hard to say.

    P.S: Simon said below that he's made a small update to the html5 player for better performance which will roll out with the next update I guess. wink

    P.P.S: that's a very interesting menu bar you have on your website. Kind of gets in the way, but looks pretty snazzy.

    Imperator

    7278 Posts

  • #13, by Johannes Reß-2Sunday, 22. October 2017, 13:20 7 years ago
    Thanks for your tips - most of them we do already use, but I will try to reduce the main character animations. All the big animations for fog, light etc, have already been removed for the HTML version and work well in the windows version. 

    For now, we have 8 directions for walk, idle and talk for two interchangeable characters. Walk Animations have 8 frames and Idle and talk animations have 6 frames.

    I will reduce it to 4 directions - I don't think reducing the animationframes would work out well, but I will have a look at this also.

    Newbie

    31 Posts

  • #14, by sebastianSunday, 22. October 2017, 13:42 7 years ago
    For me the game stays black on macOS with safari .

    Thread Captain

    2346 Posts

  • #15, by Johannes Reß-2Sunday, 22. October 2017, 20:42 7 years ago
    Can you tell me, if there is an error in the Javascript Console? 

    Thank you!

    Newbie

    31 Posts

  • #16, by sebastianSunday, 22. October 2017, 20:49 7 years ago
    I guess something shader related is one problem?
    [Log] run() called, but dependencies remain, so not running (html_gs, line 83)
[Log] still waiting on run dependencies: (html_gs, line 83)
[Log] dependency: cp /martinlutherkurzversion.vis (html_gs, line 83)
[Log] dependency: al martinlutherkurzversion.vis (html_gs, line 83)
[Log] (end of list) (html_gs, line 83)
[Log] still waiting on run dependencies: (html_gs, line 83)
[Log] dependency: cp /martinlutherkurzversion.vis (html_gs, line 83)
[Log] dependency: al martinlutherkurzversion.vis (html_gs, line 83)
[Log] (end of list) (html_gs, line 83)
[Log] still waiting on run dependencies: (html_gs, line 83)
[Log] dependency: cp /martinlutherkurzversion.vis (html_gs, line 83)
[Log] dependency: al martinlutherkurzversion.vis (html_gs, line 83)
[Log] (end of list) (html_gs, line 83)
[Log] still waiting on run dependencies: (html_gs, line 83)
[Log] dependency: cp /martinlutherkurzversion.vis (html_gs, line 83)
[Log] dependency: al martinlutherkurzversion.vis (html_gs, line 83)
[Log] (end of list) (html_gs, line 83)
[Log] still waiting on run dependencies: (html_gs, line 83)
[Log] dependency: cp /martinlutherkurzversion.vis (html_gs, line 83)
[Log] dependency: al martinlutherkurzversion.vis (html_gs, line 83)
[Log] (end of list) (html_gs, line 83)
[Log] still waiting on run dependencies: (html_gs, line 83)
[Log] dependency: cp /martinlutherkurzversion.vis (html_gs, line 83)
[Log] dependency: al martinlutherkurzversion.vis (html_gs, line 83)
[Log] (end of list) (html_gs, line 83)
[Log] still waiting on run dependencies: (html_gs, line 83)
[Log] dependency: cp /martinlutherkurzversion.vis (html_gs, line 83)
[Log] dependency: al martinlutherkurzversion.vis (html_gs, line 83)
[Log] (end of list) (html_gs, line 83)
[Log] still waiting on run dependencies: (html_gs, line 83)
[Log] dependency: cp /martinlutherkurzversion.vis (html_gs, line 83)
[Log] dependency: al martinlutherkurzversion.vis (html_gs, line 83)
[Log] (end of list) (html_gs, line 83)
[Log] still waiting on run dependencies: (html_gs, line 83)
[Log] dependency: cp /martinlutherkurzversion.vis (html_gs, line 83)
[Log] dependency: al martinlutherkurzversion.vis (html_gs, line 83)
[Log] (end of list) (html_gs, line 83)
[Log] still waiting on run dependencies: (html_gs, line 83)
[Log] dependency: cp /martinlutherkurzversion.vis (html_gs, line 83)
[Log] dependency: al martinlutherkurzversion.vis (html_gs, line 83)
[Log] (end of list) (html_gs, line 83)
[Log] still waiting on run dependencies: (html_gs, line 83)
[Log] dependency: cp /martinlutherkurzversion.vis (html_gs, line 83)
[Log] dependency: al martinlutherkurzversion.vis (html_gs, line 83)
[Log] (end of list) (html_gs, line 83)
[Log] still waiting on run dependencies: (html_gs, line 83)
[Log] dependency: cp /martinlutherkurzversion.vis (html_gs, line 83)
[Log] dependency: al martinlutherkurzversion.vis (html_gs, line 83)
[Log] (end of list) (html_gs, line 83)
[Log] still waiting on run dependencies: (html_gs, line 83)
[Log] dependency: cp /martinlutherkurzversion.vis (html_gs, line 83)
[Log] dependency: al martinlutherkurzversion.vis (html_gs, line 83)
[Log] (end of list) (html_gs, line 83)
[Log] still waiting on run dependencies: (html_gs, line 83)
[Log] dependency: cp /martinlutherkurzversion.vis (html_gs, line 83)
[Log] dependency: al martinlutherkurzversion.vis (html_gs, line 83)
[Log] (end of list) (html_gs, line 83)
[Log] still waiting on run dependencies: (html_gs, line 83)
[Log] dependency: cp /martinlutherkurzversion.vis (html_gs, line 83)
[Log] dependency: al martinlutherkurzversion.vis (html_gs, line 83)
[Log] (end of list) (html_gs, line 83)
[Log] Calling stub instead of signal() (html_gs, line 83)
[Log] pre-main prep time: 151921 ms (html_gs, line 83)
[Log] Calling stub instead of sigaction() (html_gs, line 83)
[Log] Calling stub instead of sigaction() (html_gs, line 83)
[Log] 20:47:13.030:Loading from //config.ini (html_gs, line 75)
[Log] No HRTFs found (html_gs, line 75)
[Log] HRTF not enabled! (html_gs, line 75)
[Log] 20:47:13.183:m_gamePath: /martinlutherkurzversion.vis (html_gs, line 75)
[Log] 20:47:13.506:Serialization finished. Needed time: 257 ms (html_gs, line 75)
[Log] 20:47:13.510:Engine Version: 5.0.2 (Build 1190 from Build date: Sep 4 2017) (html_gs, line 75)
[Log] 20:47:13.510:Time needed for preloading game: 327 msec (html_gs, line 75)
[Log] 20:47:13.512:No config.ini in /save//config.ini (html_gs, line 75)
[Log] Warning: Enlarging memory arrays, this is not fast! 16777216,134217728 (html_gs, line 83)
[Log] enlarged memory arrays from 16777216 to 134217728, took 97 ms (has ArrayBuffer.transfer? false) (html_gs, line 83)
[Log] Warning: Enlarging memory arrays, this is not fast! 134217728,268435456 (html_gs, line 83)
[Log] enlarged memory arrays from 134217728 to 268435456, took 138 ms (has ArrayBuffer.transfer? false) (html_gs, line 83)
[Log] 20:47:14.371:Initializing graphics interface. Surface size: 1920x931, render size: 1920x1080 (html_gs, line 75)
[Log] 20:47:14.408:log: WARNING: 0:1: extension 'GL_ARB_gpu_shader5' is not supported (html_gs, line 75)
[Log] (html_gs, line 75)
[Log] 20:47:14.409:log: WARNING: 0:1: extension 'GL_ARB_gpu_shader5' is not supported (html_gs, line 75)
[Log] (html_gs, line 75)
[Log] 20:47:14.415:log: WARNING: 0:1: extension 'GL_ARB_gpu_shader5' is not supported (html_gs, line 75)
[Log] (html_gs, line 75)
[Log] 20:47:14.417:log: WARNING: 0:1: extension 'GL_ARB_gpu_shader5' is not supported (html_gs, line 75)
[Log] (html_gs, line 75)
[Log] 20:47:14.426:log: WARNING: 0:1: extension 'GL_ARB_gpu_shader5' is not supported (html_gs, line 75)
[Log] (html_gs, line 75)
[Log] 20:47:14.427:log: WARNING: 0:1: extension 'GL_ARB_gpu_shader5' is not supported (html_gs, line 75)
[Log] (html_gs, line 75)
[Log] 20:47:14.434:log: WARNING: 0:1: extension 'GL_ARB_gpu_shader5' is not supported (html_gs, line 75)
[Log] (html_gs, line 75)
[Log] 20:47:14.434:log: WARNING: 0:1: extension 'GL_ARB_gpu_shader5' is not supported (html_gs, line 75)
[Log] (html_gs, line 75)
[Log] 20:47:14.442:log: WARNING: 0:1: extension 'GL_ARB_gpu_shader5' is not supported (html_gs, line 75)
[Log] (html_gs, line 75)
[Log] 20:47:14.443:log: WARNING: 0:1: extension 'GL_ARB_gpu_shader5' is not supported (html_gs, line 75)
[Log] (html_gs, line 75)
[Log] 20:47:14.450:log: WARNING: 0:1: extension 'GL_ARB_gpu_shader5' is not supported (html_gs, line 75)
[Log] (html_gs, line 75)
[Log] 20:47:14.451:log: WARNING: 0:1: extension 'GL_ARB_gpu_shader5' is not supported (html_gs, line 75)
[Log] (html_gs, line 75)
[Error] emscripten_set_main_loop_timing: Cannot set timing mode for main loop since a main loop does not exist! Call emscripten_set_main_loop first to set one up.
 _emscripten_set_main_loop_timing (visplayer.js:1:79573)
 _eglSwapInterval (visplayer.js:1:205489)
 qWc (visplayer.js:51:160141)
 Wdc (visplayer.js:44:74662)
 j7b (visplayer.js:34:203852)
 pma (visplayer.js:5:60368)
 qma (visplayer.js:5:72694)
 tma (visplayer.js:5:78618)
 (anonyme Funktion) (visplayer.js:60:1178)
 callMain (visplayer.js:60:42990)
 doRun (visplayer.js:60:43912)
 (anonyme Funktion) (visplayer.js:60:44067)
[Log] 20:47:14.458:red, green, blue, alpha, depth size: , doublebuffer , accelerated (html_gs, line 75)
[Log] 20:47:15.094:Serialization finished. Needed time: 631 ms (html_gs, line 75)
[Log] 20:47:15.110:SetupParents finished. Needed time: 15 ms (html_gs, line 75)
[Log] 20:47:15.111:SortLinks finished. Needed time: 1 ms (html_gs, line 75)
[Log] 20:47:15.239:Interfaces loaded. Needed time: 79 ms (html_gs, line 75)
[Log] 20:47:15.299:Scripts loaded. Needed time: 60 ms (html_gs, line 75)
[Log] 20:47:15.306:Time needed for loading game: 1797 msec (html_gs, line 75)
[Log] Keine Nachricht (1) (html_gs, line 83)
exception thrown: TypeError: undefined is not an object (evaluating 'AL.currentContext.ctx.listener._orientation[0]=x'),_alListenerfv — visplayer.js:1:239909K0a — visplayer.js:33:209758w4a — visplayer.js:23:131110E2a — visplayer.js:23:84323bma — visplayer.js:5:52778ima — visplayer.js:5:55262vja — visplayer.js:13:196177qma — visplayer.js:5:73591tma — visplayer.js:5:78618(anonyme Funktion) — visplayer.js:60:1178callMain — visplayer.js:60:42990doRun — visplayer.js:60:43912(anonyme Funktion) — visplayer.js:60:44067
[Error] TypeError: undefined is not an object (evaluating 'AL.currentContext.ctx.listener._orientation[0]=x')
 callMain (visplayer.js:60:43231)
 doRun (visplayer.js:60:43912)
 (anonyme Funktion) (visplayer.js:60:44067)

    Thread Captain

    2346 Posts

  • #17, by Johannes Reß-2Monday, 23. October 2017, 16:31 7 years ago
    I don't use shaders in the game - but I can reproduce the error at safari on OSX - I think this is something Simon has to look at.

    Newbie

    31 Posts

  • #18, by Johannes Reß-2Monday, 23. October 2017, 17:03 7 years ago
    I did a new export of the game, with the updated HTML Exporter. You can find it here, for further testing:

    Newbie

    31 Posts