WebGL在高分辨率下（Retina）显示有问题 – Unity

问题

原因

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

解决方案

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

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

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）中，并且内容会根据预期效果显示。

相关文章