How do i get the underlying interleaved buffer(view)?

[christjt]

Hey,

I am trying to use this lib to load a .glb model for a web-viewer. The model uses the "EXT_mesh_gpu_instancing" extension and contains nodes that links to some instanced attributes that are structured in an interleaved buffer defined by some bufferView. When using the accessor.getArray() method I only seem to load the typed array for that specific attribute. How do I go about fetching the underlying buffer that containes all my interleaved data. I need this because the buffer should be uploaded to the GPU as an interleaved buffer (not with each attribute in a separate buffer).

Any help would be appreciated . Thanks!

[donmccurdy]

Hi! Because this project is primarily meant for enabling modifications to glTF data, it does de-interleave accessors during the loading process. This allows changes to individual accessors to be simpler and faster, rather than maintaining a strict buffer layout at each stage of the processing. Accessors can (optionally) be re-interleaved when writing back to a glTF file.

If you'd like to interleave the attributes without exporting the whole file, you can find example code for that here:

glTF-Transform/packages/core/src/io/writer.ts

Lines 93 to 168 in 0b244d4

	/**
	* Pack a group of accessors into an interleaved buffer view. Appends accessor and buffer
	* view definitions to the root JSON lists. Buffer view target is implicitly attribute data.
	*
	* References:
	* - [Apple • Best Practices for Working with Vertex Data](https://developer.apple.com/library/archive/documentation/3DDrawing/Conceptual/OpenGLES_ProgrammingGuide/TechniquesforWorkingwithVertexData/TechniquesforWorkingwithVertexData.html)
	* - [Khronos • Vertex Specification Best Practices](https://www.khronos.org/opengl/wiki/Vertex_Specification_Best_Practices)
	*
	* @param accessors Accessors to be included.
	* @param bufferIndex Buffer to write to.
	* @param bufferByteOffset Offset into the buffer, accounting for other buffer views.
	*/
	function interleaveAccessors(
	accessors: Accessor[],
	bufferIndex: number,
	bufferByteOffset: number): BufferViewResult {
	const vertexCount = accessors[0].getCount();
	let byteStride = 0;
	// Create accessor definitions, determining size and stride of final buffer view.
	for (const accessor of accessors) {
	const accessorDef = context.createAccessorDef(accessor);
	accessorDef.bufferView = json.bufferViews!.length;
	accessorDef.byteOffset = byteStride;
	const elementSize = accessor.getElementSize();
	const componentSize = accessor.getComponentSize();
	byteStride += BufferUtils.padNumber(elementSize * componentSize);
	context.accessorIndexMap.set(accessor, json.accessors!.length);
	json.accessors!.push(accessorDef);
	}
	// Allocate interleaved buffer view.
	const byteLength = vertexCount * byteStride;
	const buffer = new ArrayBuffer(byteLength);
	const view = new DataView(buffer);
	// Write interleaved accessor data to the buffer view.
	for (let i = 0; i < vertexCount; i++) {
	let vertexByteOffset = 0;
	for (const accessor of accessors) {
	const elementSize = accessor.getElementSize();
	const componentSize = accessor.getComponentSize();
	const componentType = accessor.getComponentType();
	const array = accessor.getArray()!;
	for (let j = 0; j < elementSize; j++) {
	const viewByteOffset =
	i * byteStride + vertexByteOffset + j * componentSize;
	const value = array[i * elementSize + j];
	switch (componentType) {
	case Accessor.ComponentType.FLOAT:
	view.setFloat32(viewByteOffset, value, true);
	break;
	case Accessor.ComponentType.BYTE:
	view.setInt8(viewByteOffset, value);
	break;
	case Accessor.ComponentType.SHORT:
	view.setInt16(viewByteOffset, value, true);
	break;
	case Accessor.ComponentType.UNSIGNED_BYTE:
	view.setUint8(viewByteOffset, value);
	break;
	case Accessor.ComponentType.UNSIGNED_SHORT:
	view.setUint16(viewByteOffset, value, true);
	break;
	case Accessor.ComponentType.UNSIGNED_INT:
	view.setUint32(viewByteOffset, value, true);
	break;
	default:
	throw new Error('Unexpected component type: ' + componentType);
	}
	}
	vertexByteOffset += BufferUtils.padNumber(elementSize * componentSize);
	}
	}

[christjt]

Thanks for the reply! Yeah I guess the main use case for this lib isn't being a generic loader, but I found that it is so well done and fantastic to use that I prefer it to other js/ts gltf loaders out there. And as a bonus, if I ever want to transform my gltfs pre-parsing, that would be very easy to do with this lib.

In addition I also found that this lib was a little bit faster than f.ex threejs's gltf loader even though this lib de-interleaves the data (which was unexpected) when parsing large amount of data (~1000 glb files).

In any case, great job on this. Really awesome and intuitive to use, and thanks for the code snippet.