Aliased resistor bands

[phet-steele]

Similar in appearance to #111, the resistor bands are heavily aliased when rotated on an iPad 2 and Firefox.

Seen on macOS 10.12.6 FF and iOS 9.3.5. For phetsims/qa/issues/33.

URL: http://www.colorado.edu/physics/phet/dev/html/circuit-construction-kit-dc/1.0.0-dev.153/circuit-construction-kit-dc_en.html
Version: 1.0.0-dev.153 2017-08-12 02:34:08 UTC
Features missing: touch
Flags: pixelRatioScaling
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:54.0) Gecko/20100101 Firefox/54.0
Language: en-US
Window: 1920x1009
Pixel Ratio: 2/1
WebGL: WebGL 1.0
GLSL: WebGL GLSL ES 1.0
Vendor: Mozilla (Mozilla)
Vertex: attribs: 16 varying: 16 uniform: 1024
Texture: size: 16384 imageUnits: 16 (vertex: 16, combined: 16)
Max viewport: 16384x16384
OES_texture_float: true
Dependencies JSON: {"assert":{"sha":"928741cf","branch":"master"},"axon":{"sha":"2545ad65","branch":"master"},"babel":{"sha":"9fc5cbec","branch":"master"},"brand":{"sha":"90738131","branch":"master"},"chipper":{"sha":"3042728b","branch":"master"},"circuit-construction-kit-common":{"sha":"5c1826cb","branch":"master"},"circuit-construction-kit-dc":{"sha":"5da7fd82","branch":"master"},"dot":{"sha":"f7d9de8b","branch":"master"},"joist":{"sha":"e3c3c82f","branch":"master"},"kite":{"sha":"dc5c4382","branch":"master"},"phet-core":{"sha":"6bfeef5c","branch":"master"},"phetcommon":{"sha":"7ec5d299","branch":"master"},"query-string-machine":{"sha":"c74e454e","branch":"master"},"scenery":{"sha":"7414c4fa","branch":"master"},"scenery-phet":{"sha":"7bdef2ee","branch":"master"},"sherpa":{"sha":"be8e800b","branch":"master"},"sun":{"sha":"b5554519","branch":"master"},"tandem":{"sha":"74233a04","branch":"master"},"twixt":{"sha":"3ca102d0","branch":"master"}}

[samreid]

@jonathanolson I think these are rendered with new Rectangle({renderer:'webgl'}), can you please take a look?

[samreid]

Here's a note about detecting aa capabilities:
http://codeflow.org/entries/2013/feb/22/how-to-write-portable-webgl/#how-to-request-antialiasing

[samreid]

@jonathanolson tried gl.SAMPLES on his chrome and got a result of 4

[samreid]

Looks nicely aliased in my MacOS FF 55.0.2

Perhaps the OP meant safari?

[samreid]

Also beautiful in my Safari 10.1.2

[samreid]

@jonathanolson ran gl.SAMPLES on iPad2 and got back a value of 0, which means that AA is not supported by WebGL on iPad2.

[samreid]

We investigated supersampling by setting a backing scale of 2.0. This makes the rectangles look beautiful, but it doubles the WebGL memory usage. Will this crash the sim earlier, or exacerbate #141? Possibly, or perhaps the graphics memory is separate from the JS heap memory and hence OK to go a bit higher. The easiest thing to do would be to leave this aliased on platforms that don't support WebGL antialias out of the box (like iPad2)--it doesn't seem like a pedagogical issue at all (to me).

@arouinfar thoughts?

[samreid]

@arouinfar said it would be good to not introduce new memory issues.

@jonathanolson said there is a way to implement our own antialiasing for iPad2 that could take around 8 hours to implement (by reducing alpha near the edges). @arouinfar said she wasn't sure that would be warranted.

@kathy-phet what do you recommend?

[phet-steele]

@samreid @kathy-phet @arouinfar @jonathanolson It might be worth it to point out that there is significant aliasing on these components during rotation as well, so the custom AA would probably fix it all, right?:

• Eraser
  

• Paperclip
  

• High V Battery (Low V one is acceptable)
  

[arouinfar]

It might be worth it to point out that there is significant aliasing on these components during rotation as well, so the custom AA would probably fix it all, right?

If this is correct, then I'm more inclined to say custom AA is worth the time expenditure. Still think it would be good for @kathy-phet to take a look.

[samreid]

The strategy @jonathanolson indicated in #139 (comment) would only work for rectangles and drawn shapes, not for images. We may wish to investigate the 2x backing scale and try to solve the memory issues.

[samreid]

@jonathanolson committed the 2x backing scale above.

[samreid]

Here's a dev version for testing:
http://www.colorado.edu/physics/phet/dev/html/circuit-construction-kit-dc/1.0.0-dev.155/circuit-construction-kit-dc_en.html

@phet-steele and @arouinfar can you take a look? If it is too crashy, we can hopefully look into saving memory elsewhere.

[phet-steele]

@samreid I do not think this makes performance any better or worse. The components do look crisper though! It may just be my imagination, but maybe:

• Components take a little longer to grab out of the carousel (not alarmingly longer)
• The sim takes ~2 extra seconds to load

@arouinfar is pleased with the new version.

[samreid]

iPad2 on local wifi refreshing dev.155 (in seconds)
10.28
10.74
8.85

dev.154 (aliased)
12.40
9.18
10.27

There is some variability, but dev.155 doesn't seem significantly worse, closing.