Hi
I have a quality problem using Starter Kit: VR. The quality of the project is very low only when in VR mode.
I try to access camera settings but I do not have a script or component that allows to move some values and try to improve the quality of the project.
Where the properties of the VR cameras are accessed.
Thanks.
When you say low quality what do you mean exactly? If you are talking about the resolution you can try using the Device’s pixel ratio. You can do that by enabling Device Pixel Ratio in your project settings.
This will have an impact on performance though as it will render more pixels depending on the pixel ratio of the device that this is running on. For example if the pixel ratio on a phone is 2 then it will render 2 times the amount of pixels.
You can also limit this number in code by doing this.app.graphicsDevice.maxPixelRatio = X where X is some number - you can try playing with that value until you get good performance on your target devices.
Hi, Vaios
I send a link to the build of the project we are working on.
If you see in VR mode the quality is very poor.
Thank you,
Regards!
I do not have any VR gear at my office at the moment but someone else from the team will take a look at it as soon as possible. Thanks!
Sorry, Made for VR Mobile, you could see it on iPhone or Android.
Thank you.
Even if you do not use a VR headset… just press the VR button and you will see how quality decreases, you do not need a VR headset to see that! please help us this is urgent
Please, share project link. Without the link it is hard to tell much.
Very likely you have Device Pixel Ration disabled as Vaios mentioned above.
I’m looking at it now and this is what I see:
When you say the quality is poor, are you talking about the framerate, resolution, etc?
Additionally, few major issues with your app you’ve shared above:
You have to enable GZIP encoding on server. This will have big impact on app size, and can cut up to 80% of json and js file sizes. Right now you have 17.7mb out of 31.1mb of JSON data. This will be dramatically reduced by GZIP.
ammo.js physics is loaded, if you are not using actual rigidbody or collision components or any physics raycasting, then you better to disable physics in project settings.
There are 5 batmobiles loaded. Is this correct? You might want to check all your assets, and untick “preload” for those you actually not using.
There are very large PNG images that even don’t have any alpha. You better to use JPEG as it will dramatically save a lot of download size without noticeable difference.
Compression - you have to consider compressing your textures if you are targeting mobile. As VRAM on mobile is a big limitation.
Application size has dramatic impact on how many people will wait till application loads. And as you are targeting mobile, then it is even more important to make sure app is as small as possible, and is downloaded as fast as possible.
Please note that in the Screen Capture, I just uploaded that it is not in VR, but full screen, you can read clearly the signe (rounded in red); however, when we compare it with your Screen Capture the text are unreadable
Thanks, these optimization steps will be done at the end of the project. Our priority is to solve the quality problem. Regards
We still really need the project link to double check your settings.
Hi, Steven.
Create a scene with the background screens and a capsule.
When you see this capsule and screens in VR mode, the loss of quality is different.
https://playcanvas.com/editor/scene/492108
Thank you.
Some of the team are away at the moment so we can give you the following as a workaround until we can investigate in more depth. In look-camera onVrPresentChange, replace with the following:
LookCamera.prototype.onVrPresentChange = function(display) {
if (display.presenting) {
this.removeEventCallbacks();
this.app.setCanvasResolution(pc.RESOLUTION_AUTO);
}
else {
this.addEventCallbacks();
this.entity.setLocalEulerAngles(0,0,0);
if (this.magicWindowEnabled) {
if (this.app.vr && this.app.vr.display) {
var appVrDisplay = this.app.vr.display;
this.entity.camera.vrDisplay = appVrDisplay;
}
}
}
};
You’ve not said where you are running this on, but I’m assuming Mobile Cardboard VR?
The reason you see a lower quality in VR than out of VR is that no browsers current support the native WebVR standard. There is a polyfill in place made by Google which we use to provide VR functionality on browsers that don’t support WebVR (currently all of them)
The way the polyfill works is to intercept the rendering and apply the distortion as a fullscreen effect of the scene that you are rendering. This requires a render buffer to draw the scene to.
By default the render buffer used by the polyfill is 0.5x the screen resolution. This is the default set by google based on performance testing on their end. Essentially that larger that value (up to 1.0) the more work the GPU has to do to render the scene.
We don’t expose this value of the polyfill, but here is how you can change it:
In webvr-ui.js:
Add this line at the top of the file:
WebVRConfig.BUFFER_SCALE = 1.0;
And this modify the top of the initialize method to look like this:
if (this.app.vr && this.app.vr.display) {
this.app.vr.display.display.bufferScale_ = 1.0;
this.app.vr.display.on("presentchange", this.onVrPresentChange, this);
}
Basically you have to set the scale in two places, in this case I’m setting it to 1.0.
Tweak this scale value as you see fit. If your app runs fine on target devices with scale=1.0 then use that. Otherwise reduce it down until you have an acceptable balance between speed and quality.
Note: this change is incompatible with Steven’s example above which does a similar thing and just overrides the resolution. Note, if you have non-polyfilled browsers loading the page Steven’s change may cause problems.
Thanks for the help Steven and Dave.
With the two contributions I managed to solve in different stages.
Regards