search

phetsims / build-a-molecule

"Build a Molecule" is an educational simulation in HTML5, by PhET Interactive Simulations.
GNU General Public License v3.0
8 stars 7 forks source link

Loading the sim in Legends of Learning will cause graphic failure in currently running sim #203

Closed loganbraywork closed 3 years ago

loganbraywork commented 4 years ago

Test device

Windows 10 Laptop

Operating System

Windows 10 v.1903

Browser

Chrome 83.0.4103.116 & Edge 83.0.478.58

Problem description

For https://github.com/phetsims/QA/issues/509

Seen in both Chrome and Edge. Does not seem to occur in Firefox. It seems that if the sim is loaded in the Legends of Learning Harness while the sim is also opened in another tab, the sim used last will experience a graphical failure. This also includes the sim loaded in the Legends of Learning Harness, if the last used sim was not in the harness.

Steps to reproduce

  1. Open the sim
  2. Navigate to the single molecule screen
  3. In a new tab, load the Legends of Learning harness and input the sim with the query parameter ?legendsOfLearning
  4. Interact with the sim in the Legends of Learning harness
  5. Return to the sim in the original tab

Visuals

2020-07-02BldMlcReloadGraphic

Troubleshooting information: !!!!! DO NOT EDIT !!!!! Name: ‪Build a Molecule‬ URL: https://phet-dev.colorado.edu/html/build-a-molecule/1.0.0-rc.1/phet/build-a-molecule_all_phet.html Version: 1.0.0-rc.1 2020-06-19 20:40:00 UTC Features missing: touch Flags: pixelRatioScaling User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36 Language: en-US Window: 1433x706 Pixel Ratio: 1.3406250476837158/1 WebGL: WebGL 1.0 (OpenGL ES 2.0 Chromium) GLSL: WebGL GLSL ES 1.0 (OpenGL ES GLSL ES 1.0 Chromium) Vendor: WebKit (WebKit WebGL) Vertex: attribs: 16 varying: 30 uniform: 4095 Texture: size: 16384 imageUnits: 16 (vertex: 16, combined: 32) Max viewport: 32767x32767 OES_texture_float: true Dependencies JSON: {}

Denz1994 commented 3 years ago

The issue here is that there are too many WebGL contexts created in the browser at one time. This seems to be a limitation of the browser. There is a limit on the number of WebGL contexts that the browser can create (16 on Chrome).

This isn't specific to LoL either. This can be reproduced by following the above steps but using a new tab instead of the LoL wrapper.

Denz1994 commented 3 years ago

More details: BAM requires 9 WebGL contexts on sim start-up. Each screen was one dialog with 3 contexts all used in the Molecule3dDialog. A Molecule3dDialog requires one context for the center 3D molecule (the rotating molecule in the dialog) and two contexts for the radio buttons. This is because the center molecule and the radio button molecules are rendered using instances of ThreeNode (see THREE.WebGLRenderer), which creates a WebGL context on initialization.

@jonathanolson Do you think it is reasonable for the sim to share one dialog? I think that would lower the cost of a dialog to only 3 WebGL contexts.

jonathanolson commented 3 years ago

@jonathanolson Do you think it is reasonable for the sim to share one dialog? I think that would lower the cost of a dialog to only 3 WebGL contexts.

That sounds reasonable to me.

Denz1994 commented 3 years ago

Refactors were made to reduce the number of WebGL contexts required for the sim on startup. This means sharing ThreeNode instances as much as possible and using static icons for the view types. This should be verified in the latest RC.

KatieWoe commented 3 years ago

Looks ok to me. Tested with three sims open and then tested with a sim and a LoL sim. @loganbraywork would you test as well since you discovered the issue?

KatieWoe commented 3 years ago

This looks ok in RC3.