cocos / cocos-engine

Cocos simplifies game creation and distribution with Cocos Creator, a free, open-source, cross-platform game engine. Empowering millions of developers to create high-performance, engaging 2D/3D games and instant web entertainment.
https://www.cocos.com/en/creator
Other
7.09k stars 1.82k forks source link

Empty project build web-mobile or web-desktop lags on safari browser (frame rate only 30+) #12790

Open yeshao2069 opened 2 years ago

yeshao2069 commented 2 years ago

Cocos Creator version

3.5.0、3.5.1、3.5.2、3.6.0

System information

macOS 12.5、safari 15.6 (17613.3.9.1.5)

Issue description

Create a new empty project project, put a monochrome picture on the scene, and turn on the performance panel display (profiler.showStats)

Testing Creator editor version 3.4.2, building web-mobile in safari browser, frame rate has 48-58

Relevant error log output

No response

Steps to reproduce

Create a new empty project project, put a monochrome picture on the scene, and turn on the performance panel display (profiler.showStats)

Minimal reproduction project

No response

yeshao2069 commented 2 years ago

https://forum.cocos.org/t/topic/139639

yeshao2069 commented 2 years ago

test data

https://doc.weixin.qq.com/sheet/e3_APYA4gbxADYU7HD8VmqQPSrtbms0W?scode=ADcAmwdCAAodAiSzWZAPYA4gbxADY

SantyWang commented 2 years ago

seems same issue https://github.com/cocos/3d-tasks/issues/13603, @star-e please take a look. In Safari 15.6, gl.drawElement and bufferSubData has a huge cost

pandamicro commented 1 year ago

After Apple start using "WebGL via Metal" experimental feature, there has been frequently issues on performance or rendering result.

https://bugs.webkit.org/show_bug.cgi?id=228012 https://github.com/cocos/cocos-engine/issues/10659 https://forum.unity.com/threads/poor-performance-of-webgl-2-0-on-ios-15.1316232/

So We have decided to fire issue to Webkit, and deprioritize issues on Safari WebGL temporarily. This issue will be delayed

hana-alice commented 1 year ago

The simple-bow of the scene example-3d/physics:

  1. iphonese2 iOS13.5 stable 60 frames, the test takes 3 ~ 7ms;
  2. iphonese2 iOS16.0.2 floats 57 ~ 59 frames, one frame takes 17 ~ 20ms;
  3. iphoneX iOS15.5 floats 57-59 frames, and one frame takes 17-20ms;

[2] [3] Go to Settings -> safari -> Advanced -> experimental features -> WebGL via Metal for both. Turn off this option, and the frame rate of the safari test scene will return to the level of [1]. This also has same effect on desktop safari (safari->settings->advanced->show develop menu, Develop->experimental features -> webgl via metal).

Based on this option: The latest ios16 and mac13.0 cannot profile to where the hotspot is, the CPU time is normal, the rendering time is normal, but the frame rate is very low, it may be the time that the CPU waits for the gpu is counted into the idle. I got it in the ios15.5 profile The glbufferSubdata takes more than 10ms, and the test scene has three calls per frame: instanced-buffer update, batcher-2d vertexBuffer update and indexBuffer update, all three are full bufferSize updates. Tried glBufferData, the behavior on safari is that the corresponding vertexBuffer is no longer rendered normally, and the frame rate has not improved, and the update option plus GL_DYNAMIC_DRAW has no effect.

ios13 does not have the option of webgl via metal. It can be determined that ios15.5 (14 to be test) and later versions have it and are enabled by default. There are also large voices in the apple developer forum saying that ios15, i.e. safari webgl after macOS 12, performs poorly.

The safari update log mentions that webgl is running on the metal implementation on ios15: https://developer.apple.com/documentation/safari-release-notes/safari-15-release-notes And khronos mentioned that safari uses ANGLE as the implementation of webgl: https://www.khronos.org/blog/webgl-2-achieves-pervasive-support-from-all-major-web-browsers Find some clues in the ANGLE source code. If there is a need to synchronize and have dependent buffer reading and writing, ANGLE's metal implementation will submit the current commandbuffer and wait for the gpu to finish executing (mtl_resources.mm: map->mapWithOpt->ensureResourceReadyForCPU), so tried to make a double buffer inside the gfxwebgl-buffer, the update is alternated between the two buffers, and the iOS frame rate returns to the normal level.

The above operation does not apply to safari on mac.

origin: https://github.com/cocos/3d-tasks/issues/14037

star-e commented 1 month ago

Buffer upload method is improved in custom pipeline. In one frame, data submitted to gpu will not be written by cpu again.

Please see 3.8.4 https://github.com/cocos/cocos-engine/pull/17513