1
Geeker 2017-12-25 23:01:43 +08:00 1
可以在 renderer 参数里加 { precision: 'highp' }
然后 renderer.setPixelRatio(window.devicePixelRatio); |
2
YyYyYyy 2017-12-25 23:29:16 +08:00 1
所有 texture 的 generateMipmaps 设成 false
所有 texture 的 magFilter 和 minFilter 改成变量名不带 mipmap 的其他任意的值 再试,试完说下结果。 PS:不要用非 2 的 pow 的 texture,且一般情况不要想着用超过 1024 的单张 texture,古墓丽影崛起海边背景那种程度的场合才 2048 往上走,texture 越大不代表分辨率越大 |
3
rabbbit OP @YyYyYyy
添加了以下参数 texture0.generateMipmaps = false; texture0.magFilter = THREE.LinearFilter; texture0.minFilter = THREE.LinearFilter; texture1.generateMipmaps = false; texture1.magFilter = THREE.NearestFilter; texture1.minFilter = THREE.NearestFilter; texture2.generateMipmaps = false; texture2.magFilter = THREE.LinearFilter; texture2.minFilter = THREE.LinearFilter; texture3.generateMipmaps = false; texture3.magFilter = THREE.LinearFilter; texture3.minFilter = THREE.LinearFilter; texture4.generateMipmaps = false; texture4.magFilter = THREE.LinearFilter; texture4.minFilter = THREE.LinearFilter; texture5.generateMipmaps = false; texture5.magFilter = THREE.LinearFilter; texture5.minFilter = THREE.LinearFilter; 笔记本下表现,分辨率 1366x768 高分屏下表现,分辨率 2048x1536 |
4
YyYyYyy 2017-12-26 00:27:45 +08:00 1
@rabbbit 关了 mipmap 出现锯齿是正常行为,这种情况下尝试转正方形使某面远离屏幕,如果没有像之前逐渐变模糊说明发虚就是 mipmap 导致的。
下图是在关了 mipmap 后开了 highp 的结果嘛?看起来已经正常了的样子 |
5
rabbbit OP |
6
YyYyYyy 2017-12-26 00:51:10 +08:00
@rabbbit 没用过 three.js ,以上内容凭 PC 渲染经验回答的。
mipmap 是用来解决 3d 物体远离镜头后纹理采样的问题的,一般不应该关闭。 很纳闷为什么一开始的模糊看起来就像是纹理直接从 mipmap level2/3/4 层开始的样子 恢复你提问时刚开始的状态:mipmap 保持默认开启,不开 highp,然后按照刚搜到的下贴内容修改 https://stackoverflow.com/questions/39276191/webgl-image-rendering-bad-quality 看是否能正常。 如果结果还不符合预期,把上面提到的几个因素组合尝试(注意控制变量法 |
7
eastpiger 2017-12-26 01:12:33 +08:00 1
仔细读了一下你的代码,你可以开一下调试看看,问题很明显在 canvas 的参数上可以看出来的:你的 canvas 大小实际上比 renderer 渲染的目标大小要大很多,所以图像被放大了。
开调试看一下 canvas 的参数,style 的大小应该是你给的,而 renderer 之后依照的大小却是 width height 属性的数值。这样并不正确。 所以正确的方法应该是在创建 renderer 之后执行如下代: ``` renderer.setSize(element.clientWidth, element.clientHeight); ``` 这样就可以正确渲染了。另外 mipmap 不应该关掉,highp 也不一定要有的。renderer.setPixelRatio(window.devicePixelRatio);这个开启 HIDPI 可以考虑留着。 看一下加上我给的那句话之后的效果: |
8
rabbbit OP |
9
vicvinc 2017-12-27 01:40:28 +08:00 via iPhone
分辨率...
|
10
kevinzengXing 2018-05-25 10:07:12 +08:00
@rabbbit 我也遇到了这个问题,在 pc 端显示是正常得,但在移动端就会变模糊,我设置了 render 的 setPixelRatio,也让 renderer 的大小与 domElement 画布的大小一样,但移动端上还是会模糊。
|