1247135 - Shader compilation in a WebGL 2 demo takes ~3x time when ANGLE is enabled.

Status: NEW

(Core :: Graphics: CanvasWebGL, defect, P3)

Comment 1

[Milan Sreckovic [:milan] (needinfo for best results)]

Let's add the details here.  What version, how are we enabling/disabling ANGLE, a page as an example.

Comment 2

[Jeff Muizelaar [:jrmuizel]]

It looks like this is due to D3D shader compilation being expensive. How many shaders are being compiled?

Comment 3

[Jeff Muizelaar [:jrmuizel]]

Perhaps only the first part is D3D shader compilation. It would be good if you could log the time for the shader compilation step to see how much of the 3x start up regression is happening there.

Comment 4

[Anthony Vaughn [:anthony][:avaughn][San Francisco - Pacific]]

Hi, Robert. Can you shed light on Jeff's question or point us to someone who might be familiar with it? Thanks.

Comment 5

[Robert Goulet]

I will provide profiling results after GDC if that's ok? But I agree with Jeff that this is most likely shader compilation.

Comment 6

[Anthony Vaughn [:anthony][:avaughn][San Francisco - Pacific]]

Sounds great. Thanks again, Robert!

Comment 7

[Jukka Jylänki]

Benchmarking a WebGL 2 demo that exhibits this, running the page three times on Windows 10 PC with GTX 980 Ti and i7-5960X.

With webgl.disable-angle=false (default):

45543.515ms
44224.875ms
43752.875ms

avg. of ~44 seconds or so.

With webgl.disable-angle=true:

16911.91ms
17119.3ms
18685.315ms

so with ANGLE, page load times end up being ~3x slower.

Comment 8

[Jukka Jylänki]

Attachment: webgl2_loadtimes_angle_enabled.png

A benchmark with ANGLE enabled, total loading time is 67 seconds, of which D3D compiler portion is 33 seconds.

Comment 9

[Jukka Jylänki]

Attachment: webgl2_loadtimes_angle_disabled.png

With ANGLE disabled, the total loading time is 34 seconds, more in JS register allocation and so on.

Comment 10

[Milan Sreckovic [:milan] (needinfo for best results)]

To be clear, the ANGLE contributes indirectly because all the shaders are HLSL and we use the D3D compiler, right?

Comment 11

[Jukka Jylänki]

Yeah, that's correct. I don't see the ANGLE codebase itself generating much slowdown here, but it is D3DCompiler.dll that dominates here.

Comment 12

[Michael Leu[:Lenzak](UTC+8)]

Attachment: compare_angle.png

I made a simple test using the ghost town demo to compare the shader performance between ANGLE and native OpenGL.

You can see that glLinkProgram is the most prominent factor for the loading time difference. (28.638sec vs 4.159sec) 

It is because in ANGLE's design, they "compile" the shader from GLSL/ESSL to HLSL in glCompileShader, and do actual D3D compilation in glLinkProgram which is the most time-consuming part.

Besides, it is interesting that the most time-consuming D3D compilation is formed by lots of "mini compilation" by an average of 0.087 sec for 327 times.

Maybe we can do the compilation in parallel or async?

Comment 14

[Jukka Jylänki]

A second test case that shows similar effects, one that is not the same engine which was reported originally, but is at least public so easier to share, is the UE4 Zen Garden demo:

https://s3.amazonaws.com/mozilla-games/ZenGarden/EpicZenGarden.html?playback&novsync&cpuprofiler

where running Firefox Nightly 55.0a1 (2017-03-21) (64-bit) on desktop PC HASWELL, which is

Windows 10 Home 64-bit
3.0 GHz Intel 8-Core i7-5960X
32GB of RAM
ASUS NVIDIA GeForce GTX 980 Ti

gives:

ANGLE disabled (webgl.disable-angle;true):

> "totalRenderTime": 18871.894999999997,
> "shaderCompilation": 3140.0150000000012,

and ANGLE enabled (webgl.disable-angle;false):

> "totalRenderTime": 31248.83, (+65.59%)
> "shaderCompilation": 8476.345, (+169.95%)