How to get better quality web render?

[Flemming]

Hello i’m trying to understand how to get a better quality render for my game, in the web version i’m getting a little low quality renderings in the final game gui assets especially buttons and labels

• all assets are scaled down versions (scaled trough the ide gui properties )
• all assets contains gaussian blur layer

I would like to know what kind of approach will be better to get a better quality final render

[sicher]

Is the image on the left what you get on desktop and the one on the right web?

Also, is all of this one or more GUI scenes with the standard render script?

Would you mind posting screenshots of how the GUI scene(s) are set up?

[Flemming]

• The image on the left are the assets i export from my design program
• I have a custom render script but the only difference with the original is rendering another material tag
• by setup of gui scene you meant any of these?
  
  
  

[sicher]

Okay. I’m trying to understand your problem. Are you trying to get retina/hidpi redering working on web? Do you get better result running on desktop?

[Flemming]

basically that’s what i want the most retina/hdpi possible for the web, in desktop i don’t get much quality either but is better than web

By the way the my display size configuration is 405 width x 720 height, the reason for that is that i wanted said dimensions on the web.
anything to change on that part?

[sicher]

On desktop you will get high dpi proper if you enable it in the project settings (high_dpi).

It is important though to understand that enabling this will create a high dpi buffer for rendering. All measurements stay the same. Any content that is rendered at 1x scale will look the same. But if you import high res images and scale them to 0.5x they will be high dpi on screen.

Check out:

What is a proper way to handle textures on universal app for high and low res devices

Is this possible to make the one scene with the same atlas which will perfectly looks on face book app (800x600 app size) and iPad pro (2732x2048 screen size). Do i need to use just one high res texture and the engine will downscale it or maybe there is a better way like 2 different atlases for high and low res? What i think, correct me if i wrong, that downscale is not good because low res devices has less video memory and 2732x2048 textures could take all memory. Thanks.

If you do this right you will get crisp rendering on desktop. For HTML5, I am unsure how the support looks. @sven probably knows more.

[Flemming]

thanks let me try that and see how it goes

[Flemming]

many thanks the desktop rendering got so much better but the web is somewhat the same even the game fonts get somewhat pixelated

[Flemming]

Hey @sven any word on how to do get better quality on web

[sven]

Hi @Flemming!

I did a bit of investigation tonight and found out we aren’t really taking care of high-dpi displays for WebGL. Are you by any chance on such device?

Here is a quick comparison on my iMac (Left: HTML5, Right: Native window):

With some fixes to canvas size and css:

Here is a quick explanation what I did to get the result in the last image;

• Get the pixel ratio through JS; window.devicePixelRatio
• Update the canvas width and height by multiplying the pixel ratio with the original width and height; <canvas width="original width * pixel ratio" height="original height * pixel ratio" ...>
• Set the CSS width and height for the canvas element to the original width and height; #canvas { width: original-width px; height: original-height px; }

I think we should add this to the default html-export on our side of course, but you should be able to modify the HTML output to get the same result.

[Flemming]

My specific case is that i’m making a web demo for a mobile game and i kind of need the web to look high quality

what where the modifications to canvas and css that helped the quality on your bottom screenshot?

[sven]

Sorry, added an explanation to the end of the post now.

[Flemming]

OMG thats great

Happy to announce it’s working like a charm