indexedBufferGeometry and drawRange

Alejandro_Insua · February 14, 2019, 8:29pm

Hi.

I am trying to use the setDrawRange. This is what I found in the docs:

.setDrawRange ( start : Integer, count : Integer ) : null

Set the .drawRange property. For non-indexed BufferGeometry, count is the number of vertices to render. For indexed BufferGeometry, count is the number of indices to render.

In order to use it, I am ordering my assets (glb files which contains many indexed bufferGeometries) by its size (BoundingBox size), then at the end i merge all these bufferGeometries in only one following the same order (bigger to lower).

This is the function I use to change the drawRange in my Scene’s meshes:

var options = {
	drawRange:0,
};
var drawRangeSlider = gui.add(options, 'drawRange').min(0).max(100).step(1);
drawRangeSlider.onChange(function (value) {
	scene.traverse(function(object) {
		if (object.geometry != undefined) {
			var totalIndexes = object.geometry.index.array.length;
			var percentageIndexes = Math.floor(totalIndexes*value/100);
			if (value > 0) {
				object.geometry.setDrawRange(0, percentageIndexes);
			} else {
				object.geometry.setDrawRange(0, Infinity );
			}
		}
	});
	render()

The point is that when I try to change the drawRange of the merged geometry the behaviour is not as I expected. It should first occlude the smaller fragments of mergedGeometries but it seems that there is no order at all.

In the past I used nonIndexed BufferGeometries and it worked as expected.

Am I doing something wrong?

Best regards

Mugen87 · February 15, 2019, 9:58am

If you are using BufferGeometryUtils.mergeBufferGeometries() to merge your geometries, the order of indices implicitly defined by the geometries array should be retained. If this is not the case, please demonstrate the issue with a live example.

Alejandro_Insua · February 15, 2019, 2:12pm

Hi.

Sorry. You are right.

No, I am not using BufferGeometryUtils. I am using this function:

function mergeBufferGeometries(geometries) {
	var indexLength = 0,
		verticesLength = 0,
		attributesInfos = {},
		geometriesInfos = [],
		geometryInfo,
		referenceAttributesKeys = [],
		attributesKeys,
		countVertices,
		i,
		j,
		k;
	var vertex_index = [];
	var length_index = [];
	// read the geometries and attributes information, calculate indexLength and verticesLength
	if (geometries.length > 0 ){
		for (i = 0; i < geometries.length; i++) {
			length_index.push(indexLength);
			vertex_index.push(verticesLength);
			attributesKeys = Object.keys(geometries[i].attributes);
			if ( geometries[i].attributes[attributesKeys[0]] != undefined ) {
				geometryInfo = {
					indexed: geometries[i].index !== null,
					vertices: geometries[i].attributes[attributesKeys[0]].count
				};
				geometriesInfos.push(geometryInfo);
				if (geometryInfo.indexed) {
					indexLength += geometries[i].index.count;
				} else {
					indexLength += geometryInfo.vertices;
				}
				verticesLength += geometryInfo.vertices;
				for (j = 0; j < attributesKeys.length; j++) {
					if (referenceAttributesKeys.indexOf(attributesKeys[j]) === -1) {
						referenceAttributesKeys.push(attributesKeys[j]);
						attributesInfos[attributesKeys[j]] = {
							array: null,
							constructor: geometries[i].attributes[attributesKeys[j]].array.constructor,
							itemSize: geometries[i].attributes[attributesKeys[j]].itemSize
						};
					}
				}
			}
		}
		
		// prepare the new BufferGeometry and its attributes
		var newGeometry = new THREE.BufferGeometry();
		
		indexArray = verticesLength > 0xFFFF ? new Uint32Array(indexLength) : new Uint16Array(indexLength);
		for (i = 0; i < referenceAttributesKeys.length; i++) {
			attributesInfos[referenceAttributesKeys[i]].array = new (attributesInfos[referenceAttributesKeys[i]].constructor)(
				verticesLength * attributesInfos[referenceAttributesKeys[i]].itemSize
			);
			newGeometry.addAttribute(referenceAttributesKeys[i], new THREE.BufferAttribute(
				attributesInfos[referenceAttributesKeys[i]].array,
				attributesInfos[referenceAttributesKeys[i]].itemSize
			));
		}
		// copy all the data in the new BufferGeometry
		var offsetIndices = 0,
			offsetVertices = 0,
			offsetAttribute;
		for (i = 0; i < geometries.length; i++) {
			geometryInfo = geometriesInfos[i];
			if (geometryInfo != undefined) {
				if (geometryInfo.indexed) {
					for (j = 0; j < geometries[i].index.count; j++) {
						indexArray[offsetIndices + j] = offsetVertices + geometries[i].index.array[j];
					}
					offsetIndices += geometries[i].index.count;
				} else {
					for (j = 0; j < geometryInfo.vertices; j++) {
						indexArray[offsetIndices + j] = offsetVertices + j;
					}
					offsetIndices += geometryInfo.vertices;
				}
				for (j = 0; j < referenceAttributesKeys.length; j++) {
					offsetAttribute = offsetVertices * attributesInfos[referenceAttributesKeys[j]].itemSize;
					if (geometries[i].attributes[referenceAttributesKeys[j]]) {
						attributesInfos[referenceAttributesKeys[j]].array.set(geometries[i].attributes[referenceAttributesKeys[j]].array, offsetAttribute);
					}
				}
				offsetVertices += geometryInfo.vertices;
			}
		}
		newGeometry.setIndex(new THREE.BufferAttribute(indexArray, 1));
		for (i=0; i<geometries.length; i++){
			geometries[i].dispose();
		}
		geometries = [];
		//newGeometry.mergeVertices()
		
		//newGeometry.computeFaceNormals();
		//newGeometry.computeVertexNormals();
		//newGeometry.computeTangents()
		return newGeometry;
	} else {
		return new THREE.BufferGeometry();
	}
}

Best regards

Mugen87 · February 15, 2019, 9:53pm

Maybe it’s better to use the code from the official repo. You can find BufferGeometryUtils right here:

github.com

mrdoob/three.js/blob/dev/examples/js/utils/BufferGeometryUtils.js

/**
 * @author mrdoob / http://mrdoob.com/
 */

THREE.BufferGeometryUtils = {

	computeTangents: function ( geometry ) {

		var index = geometry.index;
		var attributes = geometry.attributes;

		// based on http://www.terathon.com/code/tangent.html
		// (per vertex tangents)

		if ( index === null ||
			 attributes.position === undefined ||
			 attributes.normal === undefined ||
			 attributes.uv === undefined ) {

			console.warn( 'THREE.BufferGeometry: Missing required attributes (index, position, normal or uv) in BufferGeometry.computeTangents()' );

This file has been truncated. show original

Alejandro_Insua · October 9, 2020, 4:04pm

Hi.

I have been fighting setDrawRange and I can confirm that it doesn’t work as expected.

M2815049900600-FLX02_B.glb (28.6 KB)

I attach this model which is composed of 28 meshes ordered by size.
The order can be get by the name of the mesh.

I have tried to merge these meshes taking their geometries in a ordered array and then I merged them using BufferGeometryUtils.mergeBufferGeometries and it doesn’t work:

Here the scne opened in threejs.editor:
1. 0: Mesh {uuid: “3A9D7170-FD5E-4FB1-9C2A-52EF9DC3EC91”, name: “003”, type: “Mesh”, parent: Object3D, children: Array(0), …}
2. 1: Mesh {uuid: “E1F1868F-DF86-4971-87AF-DA3D3D9BAAD2”, name: “008”, type: “Mesh”, parent: Object3D, children: Array(0), …}
3. 2: Mesh {uuid: “06AEF7EC-476D-4F9A-BAF0-9C2BB31288EB”, name: “009”, type: “Mesh”, parent: Object3D, children: Array(0), …}
4. 3: Mesh {uuid: “D410DCAA-D41D-4BAB-B3E9-F9D8B71BFBA8”, name: “013”, type: “Mesh”, parent: Object3D, children: Array(0), …}
5. 4: Mesh {uuid: “F0904008-9D03-4C6E-B3FE-DB5FEB103344”, name: “014”, type: “Mesh”, parent: Object3D, children: Array(0), …}
6. 5: Mesh {uuid: “DBF5D1F5-FB9E-47CF-9EB0-1315CD25EE3D”, name: “018”, type: “Mesh”, parent: Object3D, children: Array(0), …}
7. 6: Mesh {uuid: “6C5D9B9E-FE37-475C-B0DB-E31A46B27865”, name: “004”, type: “Mesh”, parent: Object3D, children: Array(0), …}
8. 7: Mesh {uuid: “A0251AAF-9607-4B01-A8D0-A2DA4B1BCB7D”, name: “023”, type: “Mesh”, parent: Object3D, children: Array(0), …}
9. 8: Mesh {uuid: “E6BCF7D4-8A41-4F6C-9089-6D509AF65A71”, name: “024”, type: “Mesh”, parent: Object3D, children: Array(0), …}
10. 9: Mesh {uuid: “0E0AB326-0169-46D7-8B35-977741AC8E81”, name: “007”, type: “Mesh”, parent: Object3D, children: Array(0), …}
11. 10: Mesh {uuid: “A721F225-864C-44E7-9553-B4080202E3EE”, name: “012”, type: “Mesh”, parent: Object3D, children: Array(0), …}
12. 11: Mesh {uuid: “781622DA-C619-4ED7-9D6C-9B03DD26C1BB”, name: “017”, type: “Mesh”, parent: Object3D, children: Array(0), …}
13. 12: Mesh {uuid: “5A5EFA95-EBBA-4C5B-AD6E-34F97609A219”, name: “021”, type: “Mesh”, parent: Object3D, children: Array(0), …}
14. 13: Mesh {uuid: “6CA20DD6-43FF-496D-9743-BB775E59CBB5”, name: “027”, type: “Mesh”, parent: Object3D, children: Array(0), …}
15. 14: Mesh {uuid: “54299DA7-AE5D-4631-BCA9-592857A9B9B5”, name: “000”, type: “Mesh”, parent: Object3D, children: Array(0), …}
16. 15: Mesh {uuid: “7BC239A0-B8B6-4A49-B985-D27427A916A9”, name: “006”, type: “Mesh”, parent: Object3D, children: Array(0), …}
17. 16: Mesh {uuid: “5720AFF1-BEE3-4E87-9F3F-5DC64B11D9E7”, name: “011”, type: “Mesh”, parent: Object3D, children: Array(0), …}
18. 17: Mesh {uuid: “C243E2C0-D311-42CD-B78E-F631DB0C2191”, name: “016”, type: “Mesh”, parent: Object3D, children: Array(0), …}
19. 18: Mesh {uuid: “D2FF9549-C4F0-48BA-A595-6F216C62ECAD”, name: “020”, type: “Mesh”, parent: Object3D, children: Array(0), …}
20. 19: Mesh {uuid: “9EFC4BC3-E9B5-4B9A-92F4-B1504B31526F”, name: “025”, type: “Mesh”, parent: Object3D, children: Array(0), …}
21. 20: Mesh {uuid: “0274B73E-6395-4BE3-BC93-3043366D9E3B”, name: “026”, type: “Mesh”, parent: Object3D, children: Array(0), …}
22. 21: Mesh {uuid: “DF3C6F17-8C80-4F6A-97E3-84D1855BC779”, name: “001”, type: “Mesh”, parent: Object3D, children: Array(0), …}
23. 22: Mesh {uuid: “26BB373B-E1B1-4AB3-A89E-51FC03A156CE”, name: “002”, type: “Mesh”, parent: Object3D, children: Array(0), …}
24. 23: Mesh {uuid: “CD7D21D5-C99C-4C7F-A7E0-A2DEE54BF353”, name: “005”, type: “Mesh”, parent: Object3D, children: Array(0), …}
25. 24: Mesh {uuid: “641B383F-F28E-4E15-87A5-7BCED99BD237”, name: “010”, type: “Mesh”, parent: Object3D, children: Array(0), …}
26. 25: Mesh {uuid: “B9DB6A25-349B-4D88-92AB-21045F3205BC”, name: “015”, type: “Mesh”, parent: Object3D, children: Array(0), …}
27. 26: Mesh {uuid: “F399DF41-11E5-4374-A2AC-7E441F1774BF”, name: “019”, type: “Mesh”, parent: Object3D, children: Array(0), …}
28. 27: Mesh {uuid: “7EDD7944-7C2C-43C5-9D79-B90FDE0D9F25”, name: “022”, type: “Mesh”, parent: Object3D, children: Array(0), …}

You can easily order the meshes, merge them an play with mergedGeometry.setDrawRange (start, Infinity)

My idea was to use a distanceFactor from camera to boundingBox of the geometry and set start value on setDrawRange accordingly.

The meshes are ordered from smalest to biggest

To be honest I am fully lost.

Here I attach the same scene having merged geometries in order:
M2815049900600-FLX02_B.glb (4.2 KB)

Maybe the problem is on GLTFExporter or GLTFLoader()?

I have realized that thew order of my meshes is not the same as the order when I exported to glb using GLTFExporter, maybe it does something with indices?

Best regards

Alejandro_Insua · October 9, 2020, 5:01pm

Finaly I found where the problem is.

The problem is on gltf-pipeline. I am using a convertor based on nodejs and uses
var gltfPipeline = require('gltf-pipeline');

It seems that this module reorders the index information and my previously sort is not valid on DracoCompresed glb file.

Is there any workarround for this issue?

Best regards