在移动设备上支持 Canvas 和 WebGL (three.js)？

Posted 2023-02-27

【中文标题】在移动设备上支持 Canvas 和 WebGL (three.js)？

【英文标题】：Support of Canvas and WebGL (three.js) on moble devices?

【发布时间】：2012-01-08 21:33:12

【问题描述】：

有一个很棒的 3D 应用程序框架，名为 three.js。据我了解，它有几个渲染子系统：基于Canvas 和基于WebGL。

那么，移动设备支持呢？ （安卓、ios）

【参考方案1】：

不管是哪三个.js，都是这样分解的：

Canvas 元素可以与2D 上下文或WebGL 上下文一起使用。 threejs 可以使用 WebGL 或 2D 上下文。

大多数手机都支持2D 上下文。

目前还很少有人支持WebGL 上下文。移动版 Firefox 支持 WebGL 并且至少可用于某些 android 版本，BlackBerry PlayBook 也可以使用它。

见：

http://caniuse.com/canvas（又名 2D）

http://caniuse.com/webgl

【参考方案2】：

您可以在移动设备上使用 Three.js，至少是 iOS，并且只能使用 Three.js 的 CanvasRenderer。 WebGLRenderer 无法在 iOS 上运行。

尽量不要使用纹理，它会降低很多帧速率。 使用简单的彩色网格，它工作得很好，而且速度很快。

我对动画几何图形进行了一些测试，但仅限于基元。 我可以在 iPodTouch 1G 和 iPodTouch 4G 上测试它。两者都运行良好，帧率也不错。

我无法在 Android 上试用，但我认为它也可以。

【参考方案3】：

2014 年 12 月 12 日更新 http://caniuse.com/#feat=webgl

IOS8 将启用 WebGL。 Android 浏览器启用了 WebGl。 但是，如果您想创建应用，可以使用 Crosswalk 在最新的 Chromium（已启用 WebGL）上运行该应用。 或者，CocoonJS 具有“Canvas+”，它是 Canvas 元素的原生 android/iOS 实现，包括虚拟 javascript 环境。 （换句话说，一个只能渲染 Canvas 元素的自定义浏览器）

【讨论】：

所有安卓浏览器现在都支持WebGL，参见：caniuse.com/#feat=webgl

不，旧的 Android 仍然安装了过时的股票浏览器！从 Android 5 开始，似乎浏览器是自动更新的（不需要人行横道）