2
我的問題是，我想只有1 WebGLRenderer，但有一個可以放置在許多獨特的帆布許多相機的看法。在下面的例子中，我有9個視圖在1個畫布中，每個視圖都有獨特的相機，場景和網格，然後使用ctx.drawImage方法將它們繪製到它們自己的畫布上。這種方法可行，但drawImage太慢，甚至無法獲得10 fps，更不用說60+ fps。three.js所的drawImage到多個畫布
有沒有解決這個問題的任何方式，不涉及使用緩慢的drawImage方法或者是有什麼辦法可以加快整個過程？
感謝您的幫助和示例代碼如下放置。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Three.js Test</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<script src="./three.min.js"></script>
<script>
var renderer;
var windowWidth, windowHeight;
var numberMeshes = 1;
var dpr = window.devicePixelRatio || 1;
var viewDemensions = {x: 3, y: 3};
var views = [];
init();
animate();
function init() {
for (var i = 0; i < viewDemensions.x; i++) {
for (var j = 0; j < viewDemensions.y; j++) {
var obj = {};
obj.left = i/viewDemensions.x;
obj.bottom = j/viewDemensions.y;
obj.width = 1/viewDemensions.x;
obj.height = 1/viewDemensions.y;
obj.canvas = document.createElement('canvas');
obj.context = obj.canvas.getContext('2d');
document.body.appendChild(obj.canvas);
var camera = new THREE.PerspectiveCamera(75, 100/100, 1, 10000);
camera.position.z = 1000;
obj.camera = camera;
var scene = new THREE.Scene();
var geometry = new THREE.SphereGeometry(100, 10, 10);
obj.meshes = [];
for (var k = 0; k < numberMeshes; k++) {
var material = new THREE.MeshBasicMaterial({ color: 0xffffff*Math.random(), wireframe: true });
var mesh = new THREE.Mesh(geometry, material);
var scale = 2*Math.random();
mesh.scale.set(scale, scale, scale);
scene.add(mesh);
obj.meshes.push(mesh);
}
obj.scene = scene;
views.push(obj);
}
}
renderer = new THREE.WebGLRenderer({
preserveDrawingBuffer: true
});
// document.body.appendChild(renderer.domElement);
}
function updateSize() {
if (windowWidth != window.innerWidth || windowHeight != window.innerHeight) {
windowWidth = window.innerWidth;
windowHeight = window.innerHeight;
renderer.setSize (windowWidth, windowHeight);
}
}
function animate() {
updateSize();
for (var i = 0; i < views.length; i++) {
var view = views[i];
var left = Math.floor(view.left*windowWidth) * dpr;
var bottom = Math.floor(view.bottom*windowHeight) * dpr;
var width = Math.floor(view.width*windowWidth) * dpr;
var height = Math.floor(view.height*windowHeight) * dpr;
view.canvas.width = width;
view.canvas.height = height;
view.canvas.style.width = Math.floor(view.width*windowWidth) + 'px';
view.canvas.style.height = Math.floor(view.height*windowHeight) + 'px';
view.context.scale(dpr, dpr);
view.camera.aspect = width/height;
view.camera.updateProjectionMatrix();
renderer.setViewport(left, bottom, width, height);
renderer.setScissor(left, bottom, width, height);
renderer.enableScissorTest (true);
renderer.setClearColor(new THREE.Color().setRGB(0.5, 0.5, 0.5));
for (var j = 0; j < numberMeshes; j++) {
view.meshes[j].rotation.x += 0.03*Math.random();
view.meshes[j].rotation.y += 0.05*Math.random();
}
renderer.render(view.scene, view.camera);
view.context.drawImage(renderer.domElement,left,bottom,width,height,0,0,view.width*windowWidth,view.height*windowHeight);
}
requestAnimationFrame(animate);
}
</script>
</body>
</html>
爲什麼需要維護單個WebGLRenderer？ – prabindh
，因爲webgl有一個硬限制，它限制了可能的併發webgl渲染器的數量 –
我不知道WebGL規範對此有限制，但可能存在瀏覽器特定的限制，例如內存。如果只有一個畫布並將這些對象放置得恰到好處，它會更有效率嗎？ – prabindh