微信小游戏、three.js、真机调试，出现锯齿的解决办法

更正：

原文是基于微信小游戏，在微信开发者工具、手机端微信小游戏，该方案没问题。

我今天尝试移植到普通web，该方案出现新问题：

1）不使用该方案，则出现锯齿。

2）使用该方案，则正圆变成椭圆。

暂时解决不了。

 

说明

我原先的尝试是错误的，正确的方法见这位大牛的博客：https://blog.csdn.net/sakurallj/article/details/80263494#comments

这位大牛的方法是对的，具体细节并不适合我的情况，可能是我太菜了的缘故。

使用该方法，修改了一下具体写法，完美解决了我的问题。

正确方法见后文。错误的尝试过程也保留备忘。

错误的尝试

微信小游戏在真机调试时出现锯齿，网上搜索了很多解决方案，其中包括CSDN的博客两篇。

也许是因为我水平有限，对众多解决方案的理解不够深入，总之结果是照葫芦画瓢的尝试没有成功。

经过自己摸索，发现解决方案如下：

对于three.js，使用如下语句：

var renderer = new THREE.WebGLRenderer({canvas:canvas,antialias:true,precision:"highp"})
renderer.setSize(window.innerWidth*8, window.innerHeight*8)

对于babylon.js，使用如下语句：

var engine = new BABYLON.Engine(canvas, true);
engine.setSize(window.innerWidth*16, window.innerHeight*16);

总结：网上的各解决方案对问题出现的原因分析的是对的，思路也是对的，就是通过放大实际绘制的绘图尺寸，但是提供的具体命令不可行。

修改尺寸的时候，也不能按照真机的dpr乘以倍数，就简单粗暴直接乘以一个较大的数。我用的小米8，three乘以8，babylon乘以16，能获得较好的效果。

大牛的方法

大牛介绍的方法：

let sysInfo = wx.getSystemInfoSync(),width  =sysInfo.windowWidth,height  =sysInfo.windowHeight;

canvas.style.width = width + "px";
canvas.style.height = height + "px";
canvas.height = height * window.devicePixelRatio;
canvas.width = width * window.devicePixelRatio;
ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
--------------------- 
作者：SakuraLJ 
来源：CSDN 
原文：https://blog.csdn.net/sakurallj/article/details/80263494 
版权声明：本文为博主原创文章，转载请附上博文链接！

我的问题：

ctx是什么鬼？我还留言问了大牛，得到回复之前自己瞎摸索，便有了前面的错误尝试。

正确的方法

大牛回复说ctx = canvas.getContext(xxxxxx)，但微信小游戏不允许在html中添加canvas元素，不能这么用。

使用three.js的方法修改渲染器的尺寸，问题解决。代码如下：

//屏幕尺寸
var screenWidth = window.innerWidth;
var screenHeight = window.innerHeight;
var devicePixelRatio = window.devicePixelRatio;

//抗锯齿
canvas.style.width = width + "px";
canvas.style.height = height + "px";
canvas.width = screenWidth * devicePixelRatio;
canvas.height = screenHeight * devicePixelRatio;
renderer.setSize(screenWidth * devicePixelRatio, screenHeight * devicePixelRatio);

在真机上效果很完美。

新问题：这样虽然解决了真机的问题，但是在模拟机又出现了锯齿。

判断设备种类

针对上述解决了真机锯齿，模拟机又出现问题的情况，另一位大牛给出了解决方案：https://www.cnblogs.com/web-leader/p/6877361.html，思路是，根据终端设备的类型决定要不要运行抗锯齿代码。

但是由于微信开发工具的手机模拟器会被识别成手机，因此需要增加对运行平台的识别。完整代码如下：

//屏幕尺寸
var screenWidth = window.innerWidth;
var screenHeight = window.innerHeight;
var devicePixelRatio = window.devicePixelRatio;

//判断平台
function isDevtools() {
  return "devtools" == navigator.platform;
}

// 判断设备种类
function isPhone() {
  var userAgentInfo = navigator.userAgent;
  var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
  for (var v = 0; v < Agents.length; v++) {
    if (userAgentInfo.indexOf(Agents[v]) > 0) {
      return true;
    }
  }
  return false;
}

if ( !isDevtools() && isPhone() ) {
  //抗锯齿
  canvas.style.width = screenWidth + "px";
  canvas.style.height = screenHeight + "px";
  canvas.width = screenWidth * devicePixelRatio;
  canvas.height = screenHeight * devicePixelRatio;
  renderer.setSize(screenWidth * devicePixelRatio, screenHeight * devicePixelRatio);
}

这段代码完美解决了微信小游戏开发工具模拟器、手机真机的锯齿问题。

但素，又双叒叕有新问题了：

我使用本地浏览器调试代码，之后再移植到微信。（微信开发工具的调试功能太难用）

这段代码，使用浏览器访问时，还是有锯齿。

Three.js的问题

经过以上工作，仍然有锯齿，不是canvas的问题，是three.js的问题。通过 WebGLRenderer 的 antialias:true 选项可以解决：

var renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias:true });