When I open Multiple pages(More then 20) basic 3D ball pages at the same time, the page reports an error

CesiumJS
1

Compute Configuration

cpu Memory disk gpu
8*i7-7700 360Ghz 16GB 250GB NVIDIA GeForce GT 730

browser：Chrome newest

Two kinds of errors
First kind
pic

image
image1911×923 53.1 KB

Text
An error occurred while rendering. Rendering has stopped.
DeveloperError: Expected width to be greater than 0, actual value was 0


Error
    at new DeveloperError (http://192.168.100.95:18030/test/static/libs/CesiumUnminified/Cesium.js:83:13)
    at Function.Check.typeOf.number.greaterThan (http://192.168.100.95:18030/test/static/libs/CesiumUnminified/Cesium.js:260:13)
    at new Texture (http://192.168.100.95:18030/test/static/libs/CesiumUnminified/Cesium.js:98320:25)
    at createTextures$1 (http://192.168.100.95:18030/test/static/libs/CesiumUnminified/Cesium.js:271775:37)
    at updateFramebuffers$4 (http://192.168.100.95:18030/test/static/libs/CesiumUnminified/Cesium.js:271868:7)
    at GlobeDepth.update (http://192.168.100.95:18030/test/static/libs/CesiumUnminified/Cesium.js:272071:5)
    at updateAndClearFramebuffers (http://192.168.100.95:18030/test/static/libs/CesiumUnminified/Cesium.js:304338:23)
    at executeCommandsInViewport (http://192.168.100.95:18030/test/static/libs/CesiumUnminified/Cesium.js:304072:9)
    at Scene.updateAndExecuteCommands (http://192.168.100.95:18030/test/static/libs/CesiumUnminified/Cesium.js:303808:7)
    at render (http://192.168.100.95:18030/starview/static/libs/CesiumUnminified/Cesium.js:304692:11

Second King
pic

image
image1727×869 121 KB

text
Cesium.js:1 [Cesium WebGL] Fragment shader compile log:
createAndLinkProgram @ Cesium.js:1
Cesium.js:1 WebGL: INVALID_OPERATION: getTranslatedShaderSource: attempt to use a deleted object
createAndLinkProgram @ Cesium.js:1
Cesium.js:1 [Cesium WebGL] Fragment shader translation failed.
createAndLinkProgram @ Cesium.js:1
Cesium.js:1 An error occurred while rendering. Rendering has stopped.
RuntimeError: Fragment shader failed to compile. Compile log:

Error
    at new RuntimeError (http://192.168.100.95:18030/test/static/libs/Cesium/Cesium.js:1:40928)
    at createAndLinkProgram (http://192.168.100.95:18030/test/static/libs/Cesium/Cesium.js:1:949048)
    at reinitialize (http://192.168.100.95:18030/test/static/libs/Cesium/Cesium.js:1:951769)
    at initialize$b (http://192.168.100.95:18030/test/static/libs/Cesium/Cesium.js:1:951701)
    at ShaderProgram._bind (http://192.168.100.95:18030/test/static/libs/Cesium/Cesium.js:1:955514)
    at beginDraw (http://192.168.100.95:18030/test/static/libs/Cesium/Cesium.js:1:2544159)
    at Context.draw (http://192.168.100.95:18030/test/static/libs/Cesium/Cesium.js:1:2545708)
    at DrawCommand.execute (http://192.168.100.95:18030/test/static/libs/Cesium/Cesium.js:1:912887)
    at executeCommand (http://192.168.100.95:18030/test/static/libs/Cesium/Cesium.js:1:3231720)
    at executeCommands (http://192.168.100.95:18030/test/static/libs/Cesium/Cesium.js:1:3237516)
CesiumWidget.showErrorPanel @ Cesium.js:1
:18030/test/#/Map?userId=18:1 WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost

I think webgl restrictions? You cannot open multiple cesium web pages at the same time Maybe

But When I try to open your online address more then 20 on this machine. https://sandcastle.cesium.com/standalone.html#c=bY9Pa8MwDMW/ivGpgyGz6+qGQq+FHQY7+aI6Wmuq2MFSUtJPvyS9jK26vaf3058RqxkT3aiancl0MweSNHTwtXqbYOOqDyUrpkw12JdtyPbVetGJqQnZrLVPXV+qmqHyBsApdT2jkrjTEK+kEEUWcIl69xv1bRpNandPNpnIKDJ3vgfmz3SnYBvv5vw/lAu2KZ8/RqqM0xK7vDXHhwkA3s3yOaml8Anrn8nzfxfVXt6dE8xtRFEmeBwIsXTujMxUJ/cD.A miracle happened，No error reported！！

So，Call the cesium app deployed in my environment for more than 20 times and an error will be reported，but if you open your online address more than 20 times, you will not report an error.

I will try not to use the Vue Framework ，but to use pure HTML to implement the basic create Cesium page for testing. In the meantime, I hope to get some comments from you！！ :smiley:

the bat Can open more pagestartOpenMultipleCesiumPage.zip (559 Bytes)

2

I solved it.

Container width and height must be set to the default value. As follows.

.mapViewer {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

Because the width passed in when webgl initializes the texture must be greater than 0.

3

@Ray

Congratulations on solving the issue! Your solution looks robust :rocket: I will share it with the community if similar questions arise.

-Sam