# How to get better quality web render?

**URL:** <https://forum.defold.com/t/how-to-get-better-quality-web-render/3889>\
**Category:** Questions\
**Created:** [January 5, 2017, 8:49pm UTC](https://forum.defold.com/t/how-to-get-better-quality-web-render/3889 "2017-01-05T20:49:00Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Flemming](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/flemming/32/2044_2.png) [@Flemming](https://forum.defold.com/u/Flemming)\
**Post date:** [January 5, 2017, 8:49pm UTC](https://forum.defold.com/t/how-to-get-better-quality-web-render/3889/1 "2017-01-05T20:49:00Z")

</div>

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

 ![](https://forum-defold.b-cdn.net/uploads/default/original/2X/e/e1398d2667f0cb8278b681e7e7fc717c20c77566.png)

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

---

<div class="post-metadata">

**Author:** ![sicher](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/sicher/32/8_2.png) [@sicher](https://forum.defold.com/u/sicher)\
**Post date:** [January 5, 2017, 8:59pm UTC](https://forum.defold.com/t/how-to-get-better-quality-web-render/3889/2 "2017-01-05T20:59:03Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Flemming](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/flemming/32/2044_2.png) [@Flemming](https://forum.defold.com/u/Flemming)\
**Post date:** [January 5, 2017, 9:22pm UTC](https://forum.defold.com/t/how-to-get-better-quality-web-render/3889/3 "2017-01-05T21:22:57Z")

</div>

- 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?  
 ![](https://forum-defold.b-cdn.net/uploads/default/original/2X/8/8450a2f74117d3c743ab5f1d796131a2fda1c33a.png) ![](https://forum-defold.b-cdn.net/uploads/default/original/2X/2/21ab92b95a06e092762a56c4a8b22019b57ab8cf.png)

---

<div class="post-metadata">

**Author:** ![sicher](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/sicher/32/8_2.png) [@sicher](https://forum.defold.com/u/sicher)\
**Post date:** [January 5, 2017, 11:15pm UTC](https://forum.defold.com/t/how-to-get-better-quality-web-render/3889/4 "2017-01-05T23:15:11Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Flemming](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/flemming/32/2044_2.png) [@Flemming](https://forum.defold.com/u/Flemming)\
**Post date:** [January 6, 2017, 2:56am UTC](https://forum.defold.com/t/how-to-get-better-quality-web-render/3889/5 "2017-01-06T02:56:20Z")

</div>

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

 ![](https://forum-defold.b-cdn.net/uploads/default/original/2X/c/c362da6e45cfd1e6d802fe7bd15401efe7ba7041.png)

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?

---

<div class="post-metadata">

**Author:** ![sicher](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/sicher/32/8_2.png) [@sicher](https://forum.defold.com/u/sicher)\
**Post date:** [January 6, 2017, 10:31am UTC](https://forum.defold.com/t/how-to-get-better-quality-web-render/3889/6 "2017-01-06T10:31:23Z")

</div>

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](https://forum.defold.com/t/what-is-a-proper-way-to-handle-textures-on-universal-app-for-high-and-low-res-devices/3336):
>
> 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.

---

<div class="post-metadata">

**Author:** ![Flemming](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/flemming/32/2044_2.png) [@Flemming](https://forum.defold.com/u/Flemming)\
**Post date:** [January 6, 2017, 2:46pm UTC](https://forum.defold.com/t/how-to-get-better-quality-web-render/3889/7 "2017-01-06T14:46:11Z")

</div>

thanks let me try that and see how it goes

---

<div class="post-metadata">

**Author:** ![Flemming](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/flemming/32/2044_2.png) [@Flemming](https://forum.defold.com/u/Flemming)\
**Post date:** [January 6, 2017, 3:59pm UTC](https://forum.defold.com/t/how-to-get-better-quality-web-render/3889/8 "2017-01-06T15:59:54Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Flemming](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/flemming/32/2044_2.png) [@Flemming](https://forum.defold.com/u/Flemming)\
**Post date:** [January 11, 2017, 5:30pm UTC](https://forum.defold.com/t/how-to-get-better-quality-web-render/3889/9 "2017-01-11T17:30:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![sven](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/sven/32/1086_2.png) [@sven](https://forum.defold.com/u/sven)\
**Post date:** [January 11, 2017, 6:21pm UTC](https://forum.defold.com/t/how-to-get-better-quality-web-render/3889/10 "2017-01-11T18:21:20Z")

</div>

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

 ![](https://forum-defold.b-cdn.net/uploads/default/original/2X/a/a6cf2d85809dbd6b3cc1bb672ea9d2967a6f1056.png)

With some fixes to canvas size and css:

 ![](https://forum-defold.b-cdn.net/uploads/default/original/2X/4/44a91b42b26399c549fe899f6140e27cf4ff7090.png)

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.

---

<div class="post-metadata">

**Author:** ![Flemming](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/flemming/32/2044_2.png) [@Flemming](https://forum.defold.com/u/Flemming)\
**Post date:** [January 11, 2017, 6:26pm UTC](https://forum.defold.com/t/how-to-get-better-quality-web-render/3889/11 "2017-01-11T18:26:47Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![sven](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/sven/32/1086_2.png) [@sven](https://forum.defold.com/u/sven)\
**Post date:** [January 11, 2017, 6:34pm UTC](https://forum.defold.com/t/how-to-get-better-quality-web-render/3889/12 "2017-01-11T18:34:34Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Flemming](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/flemming/32/2044_2.png) [@Flemming](https://forum.defold.com/u/Flemming)\
**Post date:** [January 11, 2017, 7:01pm UTC](https://forum.defold.com/t/how-to-get-better-quality-web-render/3889/13 "2017-01-11T19:01:08Z")

</div>

OMG thats great

Happy to announce it’s working like a charm

 ![](https://forum-defold.b-cdn.net/uploads/default/original/2X/d/d3027bbadfa08677de5c2a36adafea83a89671dc.png)