#javascript #optimization #three.js #buffer-geometry
#javascript #оптимизация #three.js #buffer-geometry
Вопрос:
Требования
Визуализируйте очень большую геометрию (> 1 миллиона треугольников) с помощью webgl, а через взаимодействие с пользователем измените цвет некоторых треугольников. следует поддерживать 60 кадров в секунду. Геометрия не может быть упрощена, должна отображаться как есть, со всеми треугольниками.
Проблема
Цикл рендеринга занимает слишком много времени, иногда до 100 мс.
Что я пробовал
Я пробовал визуализировать сцену через THREE.js буферизованная геометрия, группировка треугольников одного и того же цвета (при условии, что их индексы расположены в ряд) и повторное использование материалов через materialIndex группы.
//Declare three.js variables
let camera, scene, renderer, mesh
//assign three.js objects to each variable
function init() {
//camera
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight);
camera.position.z = 2000;
//scene
scene = new THREE.Scene();
//renderer
renderer = new THREE.WebGLRenderer({
antialias: true
});
//set the size of the renderer
renderer.setSize(window.innerWidth, window.innerHeight);
//add the renderer to the html document body
document.querySelector('.webgl').appendChild(renderer.domElement);
}
function addMesh() {
const bufferGeometries = []
for (var i = 0; i < 50000; i ) {
var geo = new THREE.BoxGeometry(15, 15, 15)
geo.applyMatrix4(new THREE.Matrix4().makeTranslation(Math.random() * 1500 - 500, Math.random() * 1500 - 500, 0));
geo.rotateX(Math.random() * 1)
geo.rotateY(Math.random() * 1)
bufferGeometries.push(new THREE.BufferGeometry().fromGeometry(geo))
}
const mergedBufferGeometries = mergeBufferGeometries(bufferGeometries, true)
mesh = new THREE.Mesh(mergedBufferGeometries, new THREE.MeshNormalMaterial());
mesh.material = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((value) => new THREE.MeshPhongMaterial({
emissive: new THREE.Color(`hsl(${value * i}, 100%, 50%)`),
side: THREE.DoubleSide,
polygonOffset: true,
polygonOffsetFactor: 1,
polygonOffsetUnits: 1,
transparent: false,
depthWrite: false
}))
mesh.geometry.groups = mesh.geometry.groups.map(group => ({
...group,
materialIndex: 0
})) // assign the first material too all the groups
scene.add(mesh);
}
window.animate = function() {
mesh.geometry.groups = mesh.geometry.groups.map((group, i) =>
i < 100 ? // assign random materials to the first 1,00 items
({
...group,
materialIndex: Math.floor(Math.random() * 10)
}) :
group
)
performance.mark('a');
render()
performance.measure('duration', 'a')
const entries = performance.getEntriesByType("measure")
document.getElementById('time').innerText = Math.round(entries[0].duration)
performance.clearMeasures()
performance.clearMarks()
}
function render() {
//render the scene
renderer.render(scene, camera);
}
init();
addMesh();
render();
window.animate();// assign random colors one first time
// below is copied from https://github.com/mrdoob/three.js/blob/dev/examples/js/utils/BufferGeometryUtils.js
function mergeBufferAttributes(attributes) {
var TypedArray;
var itemSize;
var normalized;
var arrayLength = 0;
for (var i = 0; i < attributes.length; i) {
var attribute = attributes[i];
if (attribute.isInterleavedBufferAttribute) {
console.error('THREE.BufferGeometryUtils: .mergeBufferAttributes() failed. InterleavedBufferAttributes are not supported.');
return null;
}
if (TypedArray === undefined) TypedArray = attribute.array.constructor;
if (TypedArray !== attribute.array.constructor) {
console.error('THREE.BufferGeometryUtils: .mergeBufferAttributes() failed. BufferAttribute.array must be of consistent array types across matching attributes.');
return null;
}
if (itemSize === undefined) itemSize = attribute.itemSize;
if (itemSize !== attribute.itemSize) {
console.error('THREE.BufferGeometryUtils: .mergeBufferAttributes() failed. BufferAttribute.itemSize must be consistent across matching attributes.');
return null;
}
if (normalized === undefined) normalized = attribute.normalized;
if (normalized !== attribute.normalized) {
console.error('THREE.BufferGeometryUtils: .mergeBufferAttributes() failed. BufferAttribute.normalized must be consistent across matching attributes.');
return null;
}
arrayLength = attribute.array.length;
}
var array = new TypedArray(arrayLength);
var offset = 0;
for (var i = 0; i < attributes.length; i) {
array.set(attributes[i].array, offset);
offset = attributes[i].array.length;
}
return new THREE.BufferAttribute(array, itemSize, normalized);
}
function mergeBufferGeometries(geometries, useGroups) {
var isIndexed = geometries[0].index !== null;
var attributesUsed = new Set(Object.keys(geometries[0].attributes));
var morphAttributesUsed = new Set(Object.keys(geometries[0].morphAttributes));
var attributes = {};
var morphAttributes = {};
var morphTargetsRelative = geometries[0].morphTargetsRelative;
var mergedGeometry = new THREE.BufferGeometry();
var offset = 0;
for (var i = 0; i < geometries.length; i) {
var geometry = geometries[i];
var attributesCount = 0;
// ensure that all geometries are indexed, or none
if (isIndexed !== (geometry.index !== null)) {
console.error('THREE.BufferGeometryUtils: .mergeBufferGeometries() failed with geometry at index ' i '. All geometries must have compatible attributes; make sure index attribute exists among all geometries, or in none of them.');
return null;
}
// gather attributes, exit early if they're different
for (var name in geometry.attributes) {
if (!attributesUsed.has(name)) {
console.error('THREE.BufferGeometryUtils: .mergeBufferGeometries() failed with geometry at index ' i '. All geometries must have compatible attributes; make sure "' name '" attribute exists among all geometries, or in none of them.');
return null;
}
if (attributes[name] === undefined) attributes[name] = [];
attributes[name].push(geometry.attributes[name]);
attributesCount ;
}
// ensure geometries have the same number of attributes
if (attributesCount !== attributesUsed.size) {
console.error('THREE.BufferGeometryUtils: .mergeBufferGeometries() failed with geometry at index ' i '. Make sure all geometries have the same number of attributes.');
return null;
}
// gather morph attributes, exit early if they're different
if (morphTargetsRelative !== geometry.morphTargetsRelative) {
console.error('THREE.BufferGeometryUtils: .mergeBufferGeometries() failed with geometry at index ' i '. .morphTargetsRelative must be consistent throughout all geometries.');
return null;
}
for (var name in geometry.morphAttributes) {
if (!morphAttributesUsed.has(name)) {
console.error('THREE.BufferGeometryUtils: .mergeBufferGeometries() failed with geometry at index ' i '. .morphAttributes must be consistent throughout all geometries.');
return null;
}
if (morphAttributes[name] === undefined) morphAttributes[name] = [];
morphAttributes[name].push(geometry.morphAttributes[name]);
}
// gather .userData
mergedGeometry.userData.mergedUserData = mergedGeometry.userData.mergedUserData || [];
mergedGeometry.userData.mergedUserData.push(geometry.userData);
if (useGroups) {
var count;
if (isIndexed) {
count = geometry.index.count;
} else if (geometry.attributes.position !== undefined) {
count = geometry.attributes.position.count;
} else {
console.error('THREE.BufferGeometryUtils: .mergeBufferGeometries() failed with geometry at index ' i '. The geometry must have either an index or a position attribute');
return null;
}
mergedGeometry.addGroup(offset, count, i);
offset = count;
}
}
// merge indices
if (isIndexed) {
var indexOffset = 0;
var mergedIndex = [];
for (var i = 0; i < geometries.length; i) {
var index = geometries[i].index;
for (var j = 0; j < index.count; j) {
mergedIndex.push(index.getX(j) indexOffset);
}
indexOffset = geometries[i].attributes.position.count;
}
mergedGeometry.setIndex(mergedIndex);
}
// merge attributes
for (var name in attributes) {
var mergedAttribute = mergeBufferAttributes(attributes[name]);
if (!mergedAttribute) {
console.error('THREE.BufferGeometryUtils: .mergeBufferGeometries() failed while trying to merge the ' name ' attribute.');
return null;
}
mergedGeometry.setAttribute(name, mergedAttribute);
}
// merge morph attributes
for (var name in morphAttributes) {
var numMorphTargets = morphAttributes[name][0].length;
if (numMorphTargets === 0) break;
mergedGeometry.morphAttributes = mergedGeometry.morphAttributes || {};
mergedGeometry.morphAttributes[name] = [];
for (var i = 0; i < numMorphTargets; i) {
var morphAttributesToMerge = [];
for (var j = 0; j < morphAttributes[name].length; j) {
morphAttributesToMerge.push(morphAttributes[name][j][i]);
}
var mergedMorphAttribute = mergeBufferAttributes(morphAttributesToMerge);
if (!mergedMorphAttribute) {
console.error('THREE.BufferGeometryUtils: .mergeBufferGeometries() failed while trying to merge the ' name ' morphAttribute.');
return null;
}
mergedGeometry.morphAttributes[name].push(mergedMorphAttribute);
}
}
return mergedGeometry;
} html, body {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.webgl {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
} <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r119/three.min.js"></script>
<div class="webgl"></div>
<button onClick='window.animate()'>refresh colors</button>
<div style='color: white'>requied time <span id='time'>ms</span></div> Идеальное решение
Повторно отобразите только необходимые треугольники / пиксели, где цвет меняется. Я попытался прочитать THREE.js документация для частичного рендеринга, но безрезультатно. Я нашел только setDrawRange то, что отображает только определенные индексы, но на самом деле «раскрывает» остальные, что не то, что я хочу.