Unity WebGL解决由于分辨率过低导致的模糊问题

最新推荐文章于 2024-07-18 16:52:44 发布

真鬼123

最新推荐文章于 2024-07-18 16:52:44 发布

阅读量4.6k

点赞数 8

分类专栏： UnityWebGl Unity 文章标签： unity html css webgl

本文链接：https://blog.youkuaiyun.com/boyZhenGui/article/details/120246253

版权

Unity 同时被 2 个专栏收录

68 篇文章

订阅专栏

UnityWebGl

13 篇文章

订阅专栏

背景

通常情况下，我们制作的界面要做为子网页，或者内嵌网页给到前端同学使用。

有时前端同学的界面分辨率做的比较低，我们必须制作符合他要求的分辨率。

而Unity制作的webgl，打包后设置的分辨率会影响画面精度。这就引发了一个问题，若我们按前端的分辨率制作，会导致我们画面精度很低，如果是大屏类项目，则更会模糊不清。

所以我想到一个好办法，那就是把Unity做好的html网页分辨率乘n倍，然后给Unity网页加个壳（用一个html将Unity网页嵌入进去），把整体的外壳网页缩小n倍。

解决方案

以需要给前端1920 * 1080分辨率举例，我们将unity网页设置为3840 * 2160分辨率。

然后在同级目录下，创建新网页index0.html，将Unity网页嵌入，并且在css将整体缩小0.5倍。代码如下：

<head>
    <style type="text/css">
        iframe {
            transform: scale(0.5);
            transform-origin: 0
        }
    </style>
</head>
<body>
    <div id="mypage">
        <iframe align="center" width="3840" height="2160" src="index.html" frameborder="0" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
    </div>
</body>

iframe标签中，width和height设置为Unity网页分辨率，src设置为Unity网页名称，若不是同级，则带上路径。

既然都看到这了，那就点个赞再走吧~

关注博主即可阅读全文