ID:1669903
 
Resolved
Atom color and matrix transformations were quite inefficient.
BYOND Version:507
Operating System:Windows 8 Pro 64-bit
Web Browser:Chrome 37.0.2062.102
Applies to:Webclient
Status: Resolved (507.1251)

This issue has been resolved.
In almost every game I've tested so far, Chrome's Task Manager says the webclient's tab is taking 25 CPU, the maximum of a single core, freezing the tab entirely. The "GPU Process" task is taking 30-40 CPU.

I'm not sure what exactly is causing it. It could be caused by screen objects, alpha, animate(), or transform, or none of the above. At this point, my best guess is animated/transformed icons with alpha transparency.

I know that in chrome://flags the options to "Disable WebGL" and "Disable accelerated 2D canvas" are both disabled, grayed out, giving the option to be enabled. The developer console says StageXL is using Canvas2D, then WebGL.

Games I've tried and failed to play:
http://byond.com/games/f0lak/hazordhu - It's strange, the title screen isn't nearly as bad as after you're in your character.
http://byond.com/games/kaiochao/endure
http://byond.com/games/kaiochao/tacoyaki
http://byond.com/games/kaiochao/sling
http://byond.com/games/kaiochao/hexagon

Games that work decently:
http://byond.com/games/forum_account/rpgsweeper
http://byond.com/games/kaiochao/shootahinspace
small, non-fancy projects
Descriptive Problem Summary:
I'm pretty sure this has something to do with FPS,
when I put up the web client, it performs EXTREMELY slow. At 60 FPS it's almost frozen.
When I reduce the FPS to 30 it runs better, but the performance makes it unplayable.

Code Snippet (if applicable) to Reproduce Problem:
Setting DOM load callback
Creating byond function and module
Adding bind and curry functions
Creating skin module
Creating prompt function and module
Creating lightbox module
Creating event module
Creating byond.fn methods
Creating byond.winsetfn methods
Checking for DOM load
Adding listener for DOM load event
DOM load event
DOM load detected
DOM loaded
Creating client
Setting host and port
Doing reset
Creating byond function and module
Adding bind and curry functions
Creating skin module
Creating prompt function and module
Creating lightbox module
Creating event module
Creating byond.fn methods
Creating byond.winsetfn methods
Checking for DOM load
DOM has already loaded
DOM load detected
DOM loaded
Begin render loop
Getting user ID
Opening Websocket
Client creation complete
Removing listener for DOM load event
Socket: open
Version: 507, 498
Begin loader setup
StageXL render engine : Canvas2D
Adding items to loader
Loader creation finished
Getting key after key message
Key received
Key activated
Key received
All resources loaded
Beginning skin load
Loading byondprompt alert
Loading styles
Loading byondprompt any
Loading styles
Loading byondclass browser
Loading styles
Loading byondclass button
Loading styles
Loading byondclass child
Loading styles
Loading byondprompt color
Loading styles
Loading byondclass info
Loading styles
Loading byondclass input
Loading styles
Loading byondclass label
Loading styles
Loading byondclass map
Loading styles
Loading byondprompt message
Loading styles
Loading byondclass output
Loading styles
Loading byondclass pane
Loading styles
Loading byondprompt text
(2)
Loading styles
Generating default styles
Filling skin HTML
Loading skin
Loading map
StageXL render engine : WebGL
Ready to begin play
Ready to begin play webclient.dart.js:11189
XHR finished loading: GET "http://108.14.254.223:8195/cache/4147071396". webclient.dart.js:9415
XHR finished loading: GET "http://108.14.254.223:8195/cache/1416338653". webclient.dart.js:9415
XHR finished loading: GET "http://108.14.254.223:8195/cache/2206038622". webclient.dart.js:9415
XHR finished loading: GET "http://108.14.254.223:8195/cache/1383446570". webclient.dart.js:9415
XHR finished loading: GET "http://108.14.254.223:8195/cache/1915141172". webclient.dart.js:9415
XHR finished loading: GET "http://108.14.254.223:8195/cache/1362464930". webclient.dart.js:9415
XHR finished loading: GET "http://108.14.254.223:8195/cache/4243726502". webclient.dart.js:9415
XHR finished loading: GET "http://108.14.254.223:8195/cache/2375407469".


Expected Results:
Game to perform at normal speed
Actual Results:
Game performs at an extremely slow speed
Does the problem occur:
Every time? Or how often? Everytime
In other games? No.
In other user accounts? Yes.
On other computers? Don't know.

When does the problem NOT occur?
I wish I knew.
Did the problem NOT occur in any earlier versions? If so, what was the last version that worked? (Visit http://www.byond.com/download/build to download old versions for testing.)
No.
Workarounds:
I wish I knew.
"The developer console says StageXL is using Canvas2D, then WebGL."

I'm having the same problem.
In response to Ishuri
Is this on a local network?
That's actually correct. There are two stages-- the first is the "splash screen" that shows the loader, and that uses Canvas2D (just because it uses vector graphics, although we will probably ditch this approach). The second stage is your main map.
In response to Ishuri
Public, let me attempt local.

I tried doing local and it performs A LOT better on 60 FPS, but it still feels very CPU heavy.
In response to Ishuri
You should see if the CPU burden is on DD or on your browser, because that will help isolate the issue. Also, compare the lag in both local and public tests with DS. There's really no reason we can't get the server-side performance to be comparable or better (which I think we can accomplish with multithreading), but there may be a limitation on the drawing due to the somewhat new browser canvas standards. 60fps is probably not going to happen in multiplayer on either the web or in DS, but you never know.
In response to Tom
Are you saying this logo is a vector image?
In response to Ishuri


Public

Local

Public

Local


Profiler Self CPU stays at 0 when idle.
No, but the loading box at the bottom is.
test source

From that, it looks like atom.color is using up a lot of CPU while atom.transform doesn't have much of an effect.

You can replace the turf.New() with this:
    New()
animate(src, transform = turn(matrix(), 120), time = 10/3, loop=-1)
animate(transform = turn(matrix(), -120), time = 10/3)
animate(transform = null, time = 10/3)

Although transform by itself doesn't seem to have much of an effect, animating transform cuts my number of colored tiles in half.
Tom resolved issue with message:
Atom color and matrix transformations were quite inefficient.
I optimized this quite a bit (client-side)-- let me know if there is an improvement in 1251.
In response to Ishuri
Tell me if this is resolved in 1251 or later.
In response to Ishuri
Yes it did, works FANTASTICALLY. Extremely happy!
Good to know!