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.
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
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:
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:
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.