Question

我正在尝试使用Three.js制作一些图形。在开始阶段，我发现：到目前为止，在ios7.0上，我无法使用WebGL。所以相反，我使用CanvasRenderer。但是，似乎CanvasRenderer的大小会严重影响性能。有人可以分享一些想法吗？或者在ios设备上为CanvasRenderer提供良好的分辨率？

注意：我在iPhone5s上显示了chrome的分辨率：980x1544。

如果我将分辨率设置为640 * 1024，则可以正常工作。

如果我使用较小的分辨率：（window.innerWidth / 2，window.innerHeight / 2），那也可以正常工作。

但是，如果我使用全宽和全高，则不会显示立方体。即使我将高度设置为（640,1025），旋转立方体也会非常慢。

我的问题是： CanvasRenderer的大小对性能有何影响？（特别是针对iPhone5浏览器）

以下是我为渲染多维数据集而编写的简单代码：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(40, window.innerWidth/window.innerHeight, 0.1, 1000);
document.getElementById("debug").innerHTML = window.innerWidth + " " + window.innerHeight; 

renderer = webglAvailable() ? new THREE.WebGLRenderer() : new THREE.CanvasRenderer();
renderer.setSize(640, 1024);
document.getElementById("body").appendChild(renderer.domElement);

var geometry = new THREE.BoxGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 10;


var render = function () {
    requestAnimationFrame(render);

    cube.rotation.x += 0.1;
    cube.rotation.y += 0.1;

    renderer.render(scene, camera);
};

render();

作为参考，您可以尝试使用iPhone加载这两个页面。您可以轻松查看性能差异。

分辨率640 * 1024：http://shawnfandev.com/Testing/workingResolution/Cube.php

第640 * 1200号决议：http://shawnfandev.com/Testing/higherResolution/Cube.php

感谢任何想法！

Answer 1

我做了一个简单的模拟，可以改变分辨率并计算FPS。

模拟渲染100个立方体以降低FPS，使其易于比较。

FPS监视器由stats.js提供。

This is jsfiddle.

HTML：

<div id="renderer"></div>
<div id="input_fileds">
    width: <input type="text" id="width" value="200">
    height: <input type="text" id="height" value="200">
</div>

的javascript：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(40, 1, 0.1, 1000);
var renderer = new THREE.CanvasRenderer();
renderer.setSize(200, 200);

container = document.getElementById('renderer');
document.body.appendChild(container);


container.appendChild(renderer.domElement);

stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild(stats.domElement);


var geometry = new THREE.BoxGeometry(.3, .3, .3);
var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
var cubes = [];
for (var i = 0; i < 100; i++) {
    var cube = new THREE.Mesh(geometry, material);
    cube.position.x = Math.random() * 6 - 3;
    cube.position.y = Math.random() * 6 - 3;
    cubes.push(cube);
    scene.add(cube);
}

camera.position.z = 10;

var render = function() {
    cubes.forEach(function(cube) {
        cube.rotation.x += 0.1;
        cube.rotation.y += 0.1;
    });

    stats.update();
    renderer.render(scene, camera);
    setTimeout(render, 1000 / 60);
};
render();

var width_input = document.getElementById('width');
var height_input = document.getElementById('height');
width_input.addEventListener("keyup", function() {
    resize();
});
height_input.addEventListener("keyup", function() {
    resize();
});

function resize() {
    camera.aspect = width_input.value / height_input.value;
    camera.updateProjectionMatrix();
    renderer.setSize(width_input.value, height_input.value);
}

的CSS：

#renderer{
    margin-top:50px;
}
#renderer canvas{
    background-color: #000000;
}
#input_fileds{
    position:fixed !important;
    top:0px;
    padding-left:100px;
}
#stats{
    position:fixed !important;
}

我的iPhone5s上的结果

600 x 600时19 FPS

800x800的19 FPS

1000x1000上的19 FPS

1024x1024上的19 FPS

1025x1025上5 FPS

FPS和分辨率彼此不成正比，但当分辨率大于某一点时，FPS急剧下降。

Three.js：为什么CanvasRenderer的大小会影响iPhone5s＆＃39;浏览器（chrome，safari）

1 个答案: