(这个问题并不特定于three.js，但我会以它作为例子)
最近我一直在使用three.js开发Web应用程序界面，并编写了一些漂亮的回退（针对桌面浏览器）在WebGL和Canvas渲染器之间切换。
但现在的问题是如何正确地检测设备性能，这个问题有两个方面：
一个值得注意的例子: Firefox移动版/Opera移动版声称支持WebGL，但存在bug或受设备硬件限制。
到目前为止，我想到了一些解决方法：
或者也许这不必那么难，还有其他建议吗？
在一个项目中，我们想要使用高性能桌面CPU/GPU上可用的canvas特性以及像平板电脑和手机这样的较低速度设备。为此，我们采用了一种性能测量方法。
基本上，我们从最简单的场景复杂度开始，如果渲染循环时间小于33毫秒，就增加复杂度（如果稍后渲染循环开始花费太长时间，我们也会减少复杂度）。
我想，在你的情况下，你可能需要运行快速的canvas和WebGL性能测试，然后选择其中之一。经过一段时间的研究，我没有发现更好的解决方法。
import {
Mesh,
MeshStandardMaterial,
PerspectiveCamera,
Scene,
SphereGeometry,
WebGLRenderer,
} from "three";
function sleep(ms: number) {
return new Promise((resolve) => setTimeout(resolve, ms));
}
export enum GPUPerformanceLevel {
HIGH = "HIGH",
LOW = "LOW",
}
function approxRollingAverage(
average: number,
value: number,
history = 50
) {
average -= average / history;
average += value / history;
return average;
}
/**
* Three.js based webgl benchmark
*
* In summary, the `run` method adds `meshPerStep` new spheres every step (frame)
* and measures the fps. If we're able to perform >=`thresholds.steps` of these
* steps, without the fps dropping below `thresholds.fps`, then we label the device
* `GPUPerformanceLevel.HIGH`.
*/
export class GPUBenchmark {
scene = new Scene();
material = new MeshStandardMaterial();
geometry = new SphereGeometry();
static thresholds = { fps: 10, steps: 50 };
static meshPerFrame = 1000;
static framesPerStep = 5;
async run(debug = false): Promise<GPUPerformanceLevel> {
const camera = new PerspectiveCamera(75);
const renderer = new WebGLRenderer();
let tPrev = performance.now() / 1000;
let steps = 0;
let meshCnt = 0;
let fps = 30;
let passedThreshold = false;
const animate = async () => {
const time = performance.now() / 1000;
const fpsMeasured = Math.min(1 / (time - tPrev), 120);
tPrev = time;
fps = approxRollingAverage(fps, fpsMeasured, 5);
if (debug) {
console.log(`fps: ${fps} fpsMeasured: ${fpsMeasured} steps: ${steps} meshCnt: ${meshCnt}`);
}
if (
fps > GPUBenchmark.thresholds.fps &&
steps < GPUBenchmark.thresholds.steps
) {
requestAnimationFrame(animate);
if (steps++ % GPUBenchmark.framesPerStep == 0) {
meshCnt += this.step();
}
renderer.render(this.scene, camera);
} else {
passedThreshold = true;
}
};
animate();
while (!passedThreshold) {
await sleep(1);
}
this.cleanup();
renderer.dispose();
const level = GPUBenchmark.stepsToPerfLevel(steps);
if (debug) {
console.log("device benchmarked at level:", level);
}
return level;
}
private step(): number {
const meshPerStep = GPUBenchmark.meshPerFrame * GPUBenchmark.framesPerStep;
for (let i = 0; i < meshPerStep; i++) {
const sphere = new Mesh(this.geometry, this.material);
sphere.frustumCulled = false;
this.scene.add(sphere);
}
return meshPerStep;
}
private cleanup() {
for (const obj of this.scene.children) {
this.scene.remove(obj);
}
//@ts-ignore
this.scene = null;
this.material.dispose();
this.geometry.dispose();
//@ts-ignore
this.material = null;
//@ts-ignore
this.geometry = null;
}
private static stepsToPerfLevel(numSteps: number): GPUPerformanceLevel {
if (numSteps >= GPUBenchmark.thresholds.steps) {
return GPUPerformanceLevel.HIGH;
} else {
return GPUPerformanceLevel.LOW;
}
}
}
你可以使用http://webglstats.com/来进行WebGL硬件支持和特性检测。