How to get better quality web render?

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

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?

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?

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?

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:

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.

4 Likes

thanks let me try that and see how it goes

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

1 Like

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

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.

9 Likes

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?

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

OMG thats great

Happy to announce it’s working like a charm

5 Likes