Closed Nancy-Salpepi closed 3 years ago
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.
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.
mipmaps
directory that is parallel to the images
directory.js
versions of these imagesgrunt modulify
. This will create mipmap versions of the images.mipmaps
directory instead of the images
directorylicense.json
file in the new mipmaps
directoryYou can look at the balancing-act repo to see some examples of this in action. The file Boy.js
(among others) uses mipmaps.
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.
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.
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.
Reopening to verify that this made it into the 1.0 release.
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
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.
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: {}