Track gets filled between two points

[phet-steele]

@samreid @jessegreenberg @jonathanolson take a look:

This just happens from normal use, and can flicker (change between filled/not filled) while dragging track nodes around. I went aaaaaalllll the way back to 1.0.0 of ESPB and the problem still exists (!). Since I'm seeing this on a common platform (Win 10 + Chrome), I have to think this is hardware related. This is the first time I've ever looked at this sim with this particular computer. Since this image screams a scenery/webgl problem, maybe this is the first time my GPU has ever been tested? Or did Chrome break something? (I didn't try other browsers)

For phetsims/QA/issues/134.

If it is hardware related, let me know what you want to know about my computer. Here is some info from the published version:

Troubleshooting Information

URL: https://phet.colorado.edu/sims/html/energy-skate-park-basics/latest/energy-skate-park-basics_en.html Version: 1.1.7 2018-05-24 05:12:39 UTC Features missing: touch User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36 Language: en-US Window: 1920x947 Pixel Ratio: 1/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: 16384x16384 OES_texture_float: true Dependencies JSON: {"assert":{"sha":"7d27130a","branch":"HEAD"},"axon":{"sha":"084c71cf","branch":"HEAD"},"babel":{"sha":"923f0d2e","branch":"master"},"brand":{"sha":"ae19edf4","branch":"HEAD"},"chipper":{"sha":"ef32df40","branch":"HEAD"},"dot":{"sha":"33ae235e","branch":"HEAD"},"energy-skate-park-basics":{"sha":"14cf3b33","branch":"HEAD"},"joist":{"sha":"39afa845","branch":"HEAD"},"kite":{"sha":"24ad131a","branch":"HEAD"},"phet-core":{"sha":"c48bf320","branch":"HEAD"},"phetcommon":{"sha":"64051904","branch":"HEAD"},"scenery":{"sha":"0b3ec069","branch":"HEAD"},"scenery-phet":{"sha":"71c5dea5","branch":"HEAD"},"sherpa":{"sha":"2b2bdfd9","branch":"HEAD"},"sun":{"sha":"953074cc","branch":"HEAD"},"tandem":{"sha":"2441eec6","branch":"HEAD"}}

[jessegreenberg]

Weird, thanks @phet-steele. @KatieWoe are you able to reproduce this bug on any of PhET's other testing devices? I just tried for a few minutes to get this to happen on my Windows 10 with Chrome 67.0.3396.99 (Official Build) (64-bit) for a few minutes but wasn't able to.

[KatieWoe]

I haven't managed to recreate it on any of the three Windows 10 devices we use for testing while on chrome. I'll keep trying, as well as take a look at other browsers and devices, but I haven't seen anything like this so far.

[jonathanolson]

Doesn't look related to WebGL (paths here would be drawn in SVG most likely, possibly canvas).

Does ?rootRenderer=canvas prevent this on the platform where it shows up?

[phet-steele]

Does ?rootRenderer=canvas prevent this on the platform where it shows up?

No issue when using that renderer.

[jessegreenberg]

@jonathanolson are you recommending we use renderer: canvas on the track? To reduce memory usage the WebGL content is in a single layer to reduce the number of canvases required (#295). Is there any reason to believe that using renderer: canvas would be bad for memory/performance for similar reasons?

[samreid]

I don't know if canvas and webgl can share the same raster. Even if they can, it seems likely that we would have to redesign the z-ordering in order to get them into the same raster, or there may be constraints in the design that prevent them from using the same raster.

[jonathanolson]

Is there any reason to believe that using renderer: canvas would be bad for memory/performance for similar reasons?

It would probably have memory/performance issues.

I don't know if canvas and webgl can share the same raster.

I believe they can't.

[jessegreenberg]

@ariel-phet can you please review this issue and determine how much time should be spent fixing this? I am unclear since we can't reproduce on any device on campus.

@phet-steele did you notice this issue in any platform other than Chrome?

One way forward could be to test a version where the track is rendered with canvas in Chrome, see if that fixes the issue on @phet-steele's machine, then test to see if this has negative impacts on our other Chromium based platforms.

@jonathanolson does this warrant an issue in Scenery to determine why this is happening sometimes with svg?

[ariel-phet]

@jessegreenberg I can reproduce this bug easily on the published version on the website on my Win 7 Chrome, but does not appear to be happening on Win 7 FF or IE

Troubleshooting information (do not edit): Name: ‪Energy Skate Park: Basics‬ URL: https://phet.colorado.edu/sims/html/energy-skate-park-basics/latest/energy-skate-park-basics_en.html Version: 1.1.7 2018-05-24 05:12:39 UTC Features missing: generatedcontent, touch Flags: pixelRatioScaling User Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36 Language: en-US Window: 2133x1096 Pixel Ratio: 0.8999999761581421/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: 16384x16384 OES_texture_float: true Dependencies JSON: {"assert":{"sha":"7d27130a","branch":"HEAD"},"axon":{"sha":"084c71cf","branch":"HEAD"},"babel":{"sha":"923f0d2e","branch":"master"},"brand":{"sha":"ae19edf4","branch":"HEAD"},"chipper":{"sha":"ef32df40","branch":"HEAD"},"dot":{"sha":"33ae235e","branch":"HEAD"},"energy-skate-park-basics":{"sha":"14cf3b33","branch":"HEAD"},"joist":{"sha":"39afa845","branch":"HEAD"},"kite":{"sha":"24ad131a","branch":"HEAD"},"phet-core":{"sha":"c48bf320","branch":"HEAD"},"phetcommon":{"sha":"64051904","branch":"HEAD"},"scenery":{"sha":"0b3ec069","branch":"HEAD"},"scenery-phet":{"sha":"71c5dea5","branch":"HEAD"},"sherpa":{"sha":"2b2bdfd9","branch":"HEAD"},"sun":{"sha":"953074cc","branch":"HEAD"},"tandem":{"sha":"2441eec6","branch":"HEAD"}}

[ariel-phet]

@jessegreenberg considering the popularity of this sim, and that the bug seems to be on Chrome (our most popular browser), this seems worth investigating. I will check on my Win 10 laptop as well.

Not occurring on my Win 10 chrome

Name: ‪Energy Skate Park: Basics‬ URL: https://phet.colorado.edu/sims/html/energy-skate-park-basics/latest/energy-skate-park-basics_en.html Version: 1.1.7 2018-05-24 05:12:39 UTC Flags: pixelRatioScaling User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36 Language: en-US Window: 1600x780 Pixel Ratio: 2/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: 4096 Texture: size: 16384 imageUnits: 16 (vertex: 16, combined: 32) Max viewport: 16384x16384 OES_texture_float: true Dependencies JSON: {"assert":{"sha":"7d27130a","branch":"HEAD"},"axon":{"sha":"084c71cf","branch":"HEAD"},"babel":{"sha":"923f0d2e","branch":"master"},"brand":{"sha":"ae19edf4","branch":"HEAD"},"chipper":{"sha":"ef32df40","branch":"HEAD"},"dot":{"sha":"33ae235e","branch":"HEAD"},"energy-skate-park-basics":{"sha":"14cf3b33","branch":"HEAD"},"joist":{"sha":"39afa845","branch":"HEAD"},"kite":{"sha":"24ad131a","branch":"HEAD"},"phet-core":{"sha":"c48bf320","branch":"HEAD"},"phetcommon":{"sha":"64051904","branch":"HEAD"},"scenery":{"sha":"0b3ec069","branch":"HEAD"},"scenery-phet":{"sha":"71c5dea5","branch":"HEAD"},"sherpa":{"sha":"2b2bdfd9","branch":"HEAD"},"sun":{"sha":"953074cc","branch":"HEAD"},"tandem":{"sha":"2441eec6","branch":"HEAD"}}

[jessegreenberg]

Sounds good, then maybe it will be easier to track down. @KatieWoe can you please see if this is reproducible on any of PhET's Windows 7 devices, assuming we have one?

[KatieWoe]

Tried it on our windows 7 computer. Sorry, still wasn't able to reproduce it. I tried both the published and the dev versions on chrome, firefox, and internet explorer. I tried for a few minutes each, does it take a longer amount of time to reproduce?

[jessegreenberg]

Thanks @KatieWoe. It sounds like @ariel-phet and @phet-steele were able to see this easily right away.

[jessegreenberg]

@phet-steele @ariel-phet can you please try this one-off version and see if you can reproduce the issue? https://bayes.colorado.edu/dev/html/energy-skate-park-basics/1.4.0-trackCanvasInChrome.1/phet/energy-skate-park-basics_en_phet.html

In this version the track layer is rendered with canvas. If the bug is gone we can ask @KatieWoe to see if performance has gotten worse on our Chromium based devices. Just an initial impression, dragging the track is a little slower in this version compared to version on the phet website.

If this workaround doesn't work out, we may have to dive deeper into scenery to figure out what is going on.

EDIT: Redacted statement, feels much faster after closing zoom.

[samreid]

The main platforms to test the canvas solution will be iPad2 and our lowest supported retina iPad, because allocating an extra fullscreen raster will take a lot of memory.

[ariel-phet]

@jessegreenberg I cannot reproduce the issue with that one off version.

[jessegreenberg]

Thanks @ariel-phet. Seems like there is enough to test here that I created a new issue in QA to test this. Checklist in https://github.com/phetsims/QA/issues/158 to track progress.

[samreid]

Assigned @jonathanolson to take a look.

[marlitas]

It looks like there is a commit here that is ready to be tested. I'll add it to the project board for the upcoming region and culture publication.