Some items unclear in Iframe

[Nancy-Salpepi]

Test device iMac

Operating System 10.15.7

Browser Chrome 92.0.4515.107

Problem description https://github.com/phetsims/qa/issues/683

The house and girl are not as clear in the Iframe as in the original sim. If I zoom in, those items become much clearer.

Here is a side-by-side comparison of the Iframe and the sim:

It was clearer when viewing the Iframe version on my MacBook Air 11.4 + chrome:

Troubleshooting information: !!!!! DO NOT EDIT !!!!! Name: ‪Number Line: Distance‬ URL: https://phet-dev.colorado.edu/html/number-line-distance/1.0.0-rc.1/phet/number-line-distance_all_phet.html Version: 1.0.0-rc.1 2021-07-30 16:56:03 UTC Features missing: applicationcache, applicationcache, touch User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.107 Safari/537.36 Language: en-US Window: 1288x875 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: 31 uniform: 1024 Texture: size: 16384 imageUnits: 16 (vertex: 16, combined: 80) Max viewport: 16384x16384 OES_texture_float: true Dependencies JSON: {}

[amanda-phet]

At small window sizes, I've noticed that the house and person will be blurry, so I don't think this is specific to i-frame.

This might be fixable with mipmaps.

[jbphet]

Yes, mipmaps can probably help with this. @SaurabhTotey - You may not have run into these before, but a mipmap is basically an image that is pre-scaled at multiple resolutions and can thus look good over a larger range of sizes. Here is a rough set of steps for changing images to mipmaps. I'm doing this from memory, and it has been a while, so this might not be perfect.

1. Identify the images for which scaling appears to be a problem
2. Move those image files into a mipmaps directory that is parallel to the images directory
3. Remove the previously generated .js versions of these images
4. Run grunt modulify. This will create mipmap versions of the images.
5. Update the import statements for all of the moved images to get them from the mipmaps directory instead of the images directory
6. Move all of the license information for these images into a license.json file in the new mipmaps directory
7. Test it out

You can look at the balancing-act repo to see some examples of this in action. The file Boy.js (among others) uses mipmaps.

[SaurabhTotey]

I created mipmaps for the person and the house images, but I am unable to test or see the blurriness, so I am unsure if anything has changed. Assigning to @amanda-phet.

[amanda-phet]

They look ok to me. @Nancy-Salpepi can you verify that this fixes the issue for you? If so, let us know and then you can close the issue. If it's still there we can assign this back to @SaurabhTotey with guidance.

[Nancy-Salpepi]

I looked at a build (that Jesse deployed for me) and it looks much better. Both the house and girl are very clear on Mac 11 + safari. On Mac 10.15 + safari, the house looks great. It is still a little hard to make out the girl's face, but it is much better than before.

[SaurabhTotey]

Reopening to verify that this made it into the 1.0 release.

[stemilymill]

The girl is still a little bit more blurry than the other things on the screen, but I don't know how picky you want to be with this. I observed in iframe and in the regular sim at various window sizes on both Win10 chrome and firefox.

iframe

regular sim at regular size on my screen

https://github.com/phetsims/qa/issues/695

[Nancy-Salpepi]

Both the house and girl are very clear on Mac 11 + safari. On Mac 10.15 + safari, the house is very clear. It is still a little hard to make out the girl's face, but it is much better than before. I think it is acceptable.