关注

WebGL在高分辨率下(Retina)显示有问题

问题

  • 当使用WebGL发布时,应用的内容在Retina显示设备上的显示结果与预期的不相符。
  • Canvas的内容在WebGL上出现像素化。
  • Canvas的内容看起来很奇怪(拉伸或挤压)。 

原因

浏览器会自动增加Canvas的大小,但是里面的内容会维持原来的大小,出现一些抗锯齿方面的错误。

解决方案

HTML的Canvas元素有两个不同的大小属性,应该用它们来适配高分辨率屏幕(包括Retina )下的内容。

  1. Cnavas的大小是Canvas元素在屏幕(页面)上所呈现的大小,可以用CSS属性width和height来对其值进行修改:

<canvas id="CanvasTest" style="width: 400px; height: 300px;" ...></canvas>

  1. Canvas内容的大小决定Canvas中有多少个像素,可以通过修改Canvas的属性width和height(以像素为单位)来修改这个值。这个大小叫做drawingBuffer

<canvas id="CanvasTest" width="100" height="150" ...></canvas>

如果不使用CSS属性来设置Canvas的大小,那么Canvas的大小会采用drawingBuffer大小,所以在第二个例子中Canvas内容大小是设置成100x150(px),而且Canvas的大小也是设置成100x150(px)。

设置Canvas尺寸并修复Canvas Content Size

我们可以根据需求来使用这些属性设置内容,例如,可以修改Canvas大小以填满整个浏览器的大小:

<style>

body

{

   margin: 0;

   border: 0;

   padding: 0;

   background-color: white; // It depends of your project.

// 该取值取决于你的项目

}

canvas

{

   width: 100%;

   height: 100%;

   position: absolute;

}

</style>

 

We can set the app to full-screen using this code in a callback triggered by some Input event in C# code

我们可以用下面这段代码把应用设置为全屏模式,这个回调函数会被一些由C#编写的输入事件触发从而调用。

void OnClickEvent ()

{

    Screen.fullScreen = true;

}

请到这些页面了解更多相关内容:

 

可以使用clientWidth和clientHeight这两个属性来对Canvas的width和height属性赋值,从而让Canvas内容大小与Canvas大小一致:

canvas.width = canvas.clientWidth;

可以把上面的小代码段放置在JS用于调整大小的回调函数中。

Handling the DPI property on Retina displays.

最后,我们有一些案例讲述应用如何在诸如带Retina的Macbook Pro或带Retina的移动设备等Retina显示屏设备中运行。在这些案例中,我们必须管理High Pixel Densities (DPI)属性。Unity没有内置选项或设定来设置该属性,但可以在JS中维护它。

浏览器会自动增加Canvas的大小,而Canvas的内容则保持原来的大小,这会带来一些抗锯齿的错误。对于修复这个错误,我们可以使用devicePixelRatio(window.devicePixelRatio)属性来获悉用多少个实质的像素来填充1个CSS像素并如下修改调整大小的回调函数:

canvas.width = canvas.clientWidth * window.devicePixelRatio;

canvas.height = canvas.clientHeight * window.devicePixelRatio;

使用这两行代码,内容大小会适配到高分辨率设备(包含Retina)中,并且内容会根据预期效果显示。

更多信息

https://docs.unity3d.com/Manual/webgl-cursorfullscreen.html

https://docs.unity3d.com/Manual/webgl-cursorfullscreen.html

 

 

这篇文章有帮助吗?
0 人中有 0 人觉得有帮助
还有其它问题?提交请求

0 评论

登录写评论。