HTML5 display sharpness problem

[ScottWitte]

The object2VR3 display engine has a sharpness problem.



The image on the left is a 1:1 screen grab from O2VR displayed in the browser. The image on right is the actual image being displayed (img_0_0_1.jpg), also 1:1. Displaying the image by itself in the browser looks the same as the original on the right. Changing browsers makes no difference. Unlike P2VR there is no warping involved, only scaling, and since it is 1:1 there really shouldn't be any interpolation.

Why is this happening and how do I correct it other than using images much larger than required O2VR scales them down while displaying them?

[Hopki]

Hi Scott,
Object2VR uses an interpolation filter, default is Mitchell which is a little soft. The further down the list you go the sharper the output.
Regards,
Hopki

[ScottWitte]

Hi Hopki,

Do you mean the interpolator specified under File > Settings > Images/Skin Editor / Interpolation Filter? I understand that the interpolator comes into play when creating the images/tiles from the source files. Does it also function in the display? If yes, where is it specified or included? It would have to be in the skin, object2vr_player or xml file, or in the swf file. However, when I change the interpolator then regenerate the project all those remain identical (except for data like generation date). Also, the result visually is no different.

I'm not sure changing the interpolation filter has any effect on the display engine at all.

[360Texas]

I assume you used 1 image every 10° for a total of 36 or more image collection.

The only place I can think of is when those 36 or more images are sliced and diced for the specified number of HTML5 or Flash multi resolution tiles.

[Hopki]

Hi Scott,
Yep your right, filter is only used to create the images not to display them.
Have you seen a difference between different browsers?
Next time I'm talking with the dev's ill ask the question.
Regards,
Hopki

[ScottWitte]

Howdy Hopki,

No difference between browsers. I also see this in O2VR Flash output.

If the image being displayed is larger than the display size it will be sharp. For instance, if you enable zoom with a max of 2 the generated images will be twice the size of how it displays initially and it will be sharp.

For anyone interested you can see this yourself if you take any source image, set a window size smaller or equal to source image size, image width to auto, no zoom. Generate output. The generated image(s) will be equal to the display size and not multi rez tiled. (You can do this with even a single image and no autoplay.)

[360Texas]

I would this you might have answered the initial question?

Try to display a small image larger view.. yes because it is a bit map image... it should go pixelated. Try to display a large image in a smaller window... the image will compress and appear sharper.

With regards to Multi - Rez ... using a soft interpolation filter .. original images will be sliced, diced and create the output tiles which will appear softer (as in your demonstration). But our discussions did not mention that you were not using Multi - Rez. So it was only an alternative guess on our part.

The object2VR3 display engine has a sharpness problem.

Image

The image on the left is a 1:1 screen grab from O2VR displayed in the browser. The image on right is the actual image being displayed (img_0_0_1.jpg), also 1:1. Displaying the image by itself in the browser looks the same as the original on the right. Changing browsers makes no difference. Unlike P2VR there is no warping involved, only scaling, and since it is 1:1 there really shouldn't be any interpolation.

Why is this happening and how do I correct it other than using images much larger than required O2VR scales them down while displaying them?

[JimWatters]

I am not able to reproduce the issue.
I used the test pattern and project below and tested:
jpg and png output
Image Width auto
Image scaling: none
Zoom: disabled
Multiresolution on and off

Also comparing these two I don't see a difference when the zoom is set correctly.
http://support.ggno.me/cup/ click on first button.
http://support.ggno.me/cup/tiles/c0_l0_4_4.jpg

Can you provide a project that shows the issue.

test pattern

zp_original.gif (43.51 KiB) Viewed 7467 times

test.txt

save and rename to test.o2vr

(3.75 KiB) Downloaded 254 times

[ScottWitte]

Good catch, Jim.

LOTS of trial and error testing ensued. The problem seems to be with the way O2VR is doing image scaling to fit the display window. In my case, set it to vertical or max and the image gets blurry. Anything else and the image is sharp.

My source images were 1000x2300. O2VR automatically sets the display image window size to 278x640. However, the generated image is 278x639. Keep aspect ratio and background visible are checked. Image scaling is vertical (or max). It seems O2VR is trying to stretch that 639 to 640 and doing a bad job of it.

Worse, in the example I sent I had reduced the display window height to 600 which automatically scaled width to 260. But the generated image was 260x598. So O2VR was stretching the image height by 2 px which had a strong negative impact.

I will surely not be the only person to run into something like this so I suggest Thomas update his scaling and display image dimension computations. In the meantime my workaround seems to be setting scaling to none.

[JimWatters]

Thanks. I'll check scaling again when set to vertical or max.

[ScottWitte]

Jim,

It only happens with vertical or max in this case because that is the dimension where the window and image aren't equal and the image is vertical. In your example it wouldn't make a difference because the source image isn't being resized, the width and height are equal and O2VR can easily calculate a window dimension to be equal to the image dimension. If this is unclear let me know and I will try to explain better.