Three.js 示例不完全兼容移动端

Posted 2023-02-27

【中文标题】Three.js 示例不完全兼容移动端

【英文标题】：Three.js example not completely compatible with mobile

【发布时间】：2016-01-23 16:20:02

【问题描述】：

我对移动设备上的“后处理/故障”示例有疑问。只是雪效应造成了麻烦。在桌面上，它会在故障期间覆盖整个视口。在手机上，它只出现在底部。我认为这是负责的路线。它在 DigitalGlitch.js 中。

"vec4 snow = 200.*amount*vec4(rand(vec2(xs * seed,ys * seed*50.))*0.2);",

我不明白为什么要影响移动设备。

【问题讨论】：

您希望vec2() 中的vec4() 是什么？

感谢您的回复。我不确定该值应该是多少。这是当前着色器中的值。从桌面 Bowser 观看时，每件事看起来都不错，但雪景效果在移动设备上并没有出现。测试一下，你就会明白我的意思了。这是示例的链接threejs.org/examples/#webgl_postprocessing_glitch

也是我帖子中提到的下一行。 gl_FragColor = gl_FragColor+ 雪；。我在想也许需要为移动设备更改此语法。我对 GLSL 还是很陌生。

我的错。 rand() 返回一个浮点数，所以代码看起来不错。

是的，我不确定它是如何工作的。感谢您清除它。我希望有某种方法可以将控制台日志与 GLSL 一起使用。所以我可以比较桌面和移动设备之间的 gl_fragColor 值。我在想也许需要一个在移动设备上不可用的 WebGL 扩展。我不确定如何测试。

【参考方案1】：

此问题在移动设备中最常见，这是此设备像素比率背后的原因之一 通常移动设备的像素比 > 2 像素比为 2 意味着要渲染的像素多 4 倍

为了优化性能我们必须把这个标准化，你可以试试 -

  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));