three.js 08-02 之 網格合併
阿新 • • 發佈：2019-02-12
上一篇文中，我們介紹到利用 THREE.Group 物件可以很容易操縱和管理大量的網格。但是當網格物件的數量非常多時，效能就會成為一個瓶頸。實際上在組裡的每個物件還是獨立的，需要對它們分別進行處理和渲染。
在舊版 three.js 中，有個叫 THREE.GeometryUtils.merge 函式可以將多個幾何體合併起來，建立一個聯合體。但是在新版中已經改用 THREE.Geometry.merge 函式來實現了。接下來我將直接給出具體的完整示例，你會看到一個隨機分佈著很多半透明方塊的場景。通過右上角的 numberOfObjects 滑塊，你可以設定場景中的方塊的數量。點選 redraw 按鈕可以重新繪製場景。
根據你所使用的 PC 硬體配置不同，當方塊的數量達到一定量時，效能就會開始下降。在我的 PC 上，效能在 4000 個左右的物件時就已經下降到了 35 FPS 左右了。但是，如果你把右上角的 combined 複選框勾上，在點選 redraw 重繪整個場景，那麼在我的 PC 上就算把數量上調至 40000，FPS 依然可以保證 60 左右。具體示例程式碼如下所示：
如前所述，場景中能夠新增的網格數量是有上限的。一般來說也不需要那麼多的網格，但是在某些遊戲或者高階顯示效果時，你就有可能會遇到這樣的效能問題。而使用 THREE.Geometry.merge 函式就可以在某種程度上幫組你解決這個問題。其核心的程式碼是 createMesh() 函式中的如下片段所示：<!DOCTYPE html> <html> <head> <title>示例 08.02 - Merge Geometry</title> <script src="../build/three.js"></script> <script src="../build/js/controls/OrbitControls.js"></script> <script src="../build/js/libs/stats.min.js"></script> <script src="../build/js/libs/dat.gui.min.js"></script> <script src="../jquery/jquery-3.2.1.min.js"></script> <style> body { /* 設定 margin 為 0，並且 overflow 為 hidden，來完成頁面樣式 */ margin: 0; overflow: hidden; } /* 統計物件的樣式 */ #Stats-output { position: absolute; left: 0px; top: 0px; } </style> </head> <body> <!-- 用於 WebGL 輸出的 Div --> <div id="webgl-output"></div> <!-- 用於統計 FPS 輸出的 Div --> <div id="stats-output"></div> <!-- 執行 Three.js 示例的 Javascript 程式碼 --> <script type="text/javascript"> var scene; var camera; var render; var webglRender; //var canvasRender; var controls; var stats; var guiParams; var ambientLight; var spotLight; var axesHelper; //var cameraHelper; var ground; $(function() { initStats(); initRender(); initCamera(); initControls(); scene = new THREE.Scene(); createAxesHelper(); createAmbientLight(); //createSpotLight(); createGuiControls(); // 加入地面 //createGround() // 建立網格 createMesh(); renderScene(); }); /** 初始化 stats 統計物件 */ function initStats() { stats = new Stats(); stats.setMode(0); // 0 為監測 FPS；1 為監測渲染時間 $('#stats-output').append(stats.domElement); return stats; } /** 初始化渲染器 */ function initRender() { webglRender = new THREE.WebGLRenderer( {antialias: true, alpha: true} ); // antialias 抗鋸齒 webglRender.setSize(window.innerWidth, window.innerHeight); webglRender.setClearColor(0x0F0F0F, 1.0); // 0xeeeeee render = webglRender; render.shadowMap.enabled = true; // 允許陰影投射 $('#webgl-output')[0].appendChild(render.domElement); window.addEventListener('resize', onWindowResize, false); } /** 初始化相機 */ function initCamera() { camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 2147483647); // 2147483647 camera.position.set(30, 40, 50); } /** 初始化滑鼠控制器 */ function initControls() { var target = new THREE.Vector3(0, 0 , 0); controls = new THREE.OrbitControls(camera, render.domElement); controls.target = target; camera.lookAt(target); } /** 當瀏覽器視窗大小變化時觸發 */ function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); render.setSize(window.innerWidth, window.innerHeight); } /** 渲染場景 */ function renderScene() { stats.update(); //rotateMesh(); // 旋轉物體 requestAnimationFrame(renderScene); render.render(scene, camera); } /** 旋轉物體 */ var step = 0; function rotateMesh() { step += guiParams.rotationSpeed; scene.traverse(function(mesh) { if (mesh instanceof THREE.Mesh && mesh != ground) { mesh.rotation.x = step; mesh.rotation.y = step; mesh.rotation.z = step; } }); } /** 建立一個座標軸：X（橙色）、Y（綠色）、Z（藍色） */ function createAxesHelper() { axesHelper = new THREE.AxesHelper(60); scene.add(axesHelper); } /** 建立一個 AmbientLight 環境光源 */ function createAmbientLight() { ambientLight = new THREE.AmbientLight(0x0c0c0c); scene.add(ambientLight); } /** 建立一個 AmbientLight 環境光源 */ function createSpotLight() { spotLight = new THREE.SpotLight(0xffffff); spotLight.position.set(-60, 60, -10); spotLight.castShadow = true; spotLight.shadow.mapSize.set(2048, 2048); // 必須是 2的冪，預設值為 512 scene.add(spotLight); //cameraHelper = new THREE.CameraHelper(spotLight.shadow.camera); //scene.add(cameraHelper); } /** 用來儲存那些需要修改的變數 */ function createGuiControls() { guiParams = new function() { this.rotationSpeed = 0.02; this.numberOfObjects = 4000; this.combined = false; this.redraw = function() { createMesh(); } } /** 定義 dat.GUI 物件，並繫結 guiParams 的幾個屬性 */ var gui = new dat.GUI(); gui.add(guiParams, 'rotationSpeed', 0, Math.PI, 0.01); gui.add(guiParams, 'numberOfObjects', 400, 40000, 1); gui.add(guiParams, 'combined'); gui.add(guiParams, 'redraw'); } /** 加入地面 */ function createGround() { var groundGeom = new THREE.PlaneGeometry(60, 60); var groundMaterial = new THREE.MeshPhongMaterial( { color: 0xbbbbbb, side: THREE.DoubleSide} ); // 0x777777 ground = new THREE.Mesh(groundGeom, groundMaterial); ground.receiveShadow = true; // 地面接收陰影 ground.rotation.x = -0.5 * Math.PI; scene.add(ground); } /** 建立網格 */ function createMesh() { var mergedGeometry = new THREE.Geometry(); var mergedGroup = new THREE.Group(); var material = new THREE.MeshPhongMaterial( {color: 0x00ff00, emissive: 0x00ff00, transparent: true, opacity: 0.5} ); for (var i = 0; i < guiParams.numberOfObjects; i++) { var x = -60 + Math.round((Math.random() * 100)); var y = Math.round((Math.random() * 10)); var z = -100 + Math.round((Math.random() * 200)); var cubeGeom = new THREE.BoxGeometry(3, 3, 3); var cubeMesh = new THREE.Mesh(cubeGeom, material); cubeMesh.position.set(x, y, z); cubeMesh.updateMatrix(); if (guiParams.combined) { mergedGeometry.merge(cubeMesh.geometry, cubeMesh.matrix); } else { mergedGroup.add(cubeMesh); } } if (guiParams.combined) { var mergedMesh = new THREE.Mesh(mergedGeometry, material); mergedMesh.name = "combined"; scene.remove(scene.getObjectByName(mergedMesh.name)); scene.add(mergedMesh); } else { mergedGroup.name = "combined"; scene.remove(scene.getObjectByName(mergedGroup.name)); scene.add(mergedGroup); } } </script> </body> </html>
未完待續···var mergedGeometry = new THREE.Geometry(); ... mergedGeometry.merge(cubeMesh.geometry, cubeMesh.matrix); ... var mergedMesh = new THREE.Mesh(mergedGeometry, material); mergedMesh.name = "combined"; scene.remove(scene.getObjectByName(mergedMesh.name)); scene.add(mergedMesh);