Exporting an indexed geometry with a draw range using GLTFExporter in Three.js: What's the best approach?

Question

Exporting an indexed geometry with a draw range using GLTFExporter in Three.js: What's the best approach?

I am encountering a specific issue where I need to export an indexed geometry with a draw range. Unfortunately, the GLTFExporter does not support this feature, as indicated by the comment in the code:

// @TODO Indexed buffer geometry with drawRange not supported yet

You can find this information in the GLTFExporter file on line 564 at the following link: https://github.com/mrdoob/three.js/blob/master/examples/js/exporters/GLTFExporter.js

After investigating the commit history, it seems like this functionality has not been updated for 3 months, indicating it may not be addressed anytime soon. I attempted to work around this by removing the index buffer and adjusting the position buffer attribute array based on the draw range, but unfortunately, this approach did not work and caused my geometry to break. Can anyone suggest a workaround or provide guidance on how to proceed with my geometry?

Any help would be greatly appreciated. Thank you.

EDIT:

As a temporary solution, I have opted to "de-index" my geometry for the export process and maintain the draw range, as this workaround is supported by the exporter. While this method involves creating a new geometry with new BufferAttributes, it only applies to the export process and can be done asynchronously. I am hopeful for a more efficient solution in the future.

javascript typescript three.js gltf

Answer 1

Answer №1

Concerning the two variables, I plan to incorporate them into the WebGLUtils in an upcoming pull request. It is inefficient for each instance requiring these constants to repeatedly redefine them.

Answer 2

Concerning the two variables, I plan to incorporate them into the WebGLUtils in an upcoming pull request. It is inefficient for each instance requiring these constants to repeatedly redefine them.

Answer 3

Answer №2

My issue was resolved by eliminating the indexing of my geometry; although not an ideal solution, it served its purpose for this specific export operation. Here is the approach I took:

// original attributes
const vertices  = geometryTmp.getAttribute("position");
const normals  = geometryTmp.getAttribute("normal");
const uv  = geometryTmp.getAttribute("uv");

// new buffer arrays
let verticesTmp = new Float32Array(3 * geometryTmp.index.array.length);
let normalTmp = new Float32Array(3 * geometryTmp.index.array.length);
let uvTmp = new Float32Array(2 * geometryTmp.index.array.length);

let j = 0;
for(let i = 0; i < verticesTmp.length; i += 3) {
    let index = geometryTmp.index.array[j];
    verticesTmp[i] = vertices.getX(index);
    verticesTmp[i+1] = vertices.getY(index);
    verticesTmp[i+2] = vertices.getZ(index);

    normalTmp[i] = normals.getX(index);
    normalTmp[i+1] = normals.getY(index);
    normalTmp[i+2] = normals.getZ(index);
    j++;
}

j = 0;
for(let i = 0; i < uvTmp.length; i += 2) {
    let index = geometryTmp.index.array[j];
    uvTmp[i] = uv.getX(index);
    uvTmp[i+1] = uv.getY(index);
    j++;
}

let newGeomtry = new THREE.BufferGeometry();
newGeomtry.addAttribute( 'position', new THREE.BufferAttribute( verticesTmp, 3 ) );
newGeomtry.addAttribute( 'normal', new THREE.BufferAttribute( normalTmp, 3 ) );
newGeomtry.addAttribute( 'uv', new THREE.BufferAttribute( uvTmp, 2 ) );

newGeomtry.drawRange = geometryTmp.drawRange;
mesh.geometry = newGeomtry;  

// This process was repeated for all the necessary meshes, which were then added to a new THREE.Scene for exporting with truncateDrawRange set to true

Hopefully, this solution proves helpful to others facing a similar challenge.

Answer 4

My issue was resolved by eliminating the indexing of my geometry; although not an ideal solution, it served its purpose for this specific export operation. Here is the approach I took:

// original attributes
const vertices  = geometryTmp.getAttribute("position");
const normals  = geometryTmp.getAttribute("normal");
const uv  = geometryTmp.getAttribute("uv");

// new buffer arrays
let verticesTmp = new Float32Array(3 * geometryTmp.index.array.length);
let normalTmp = new Float32Array(3 * geometryTmp.index.array.length);
let uvTmp = new Float32Array(2 * geometryTmp.index.array.length);

let j = 0;
for(let i = 0; i < verticesTmp.length; i += 3) {
    let index = geometryTmp.index.array[j];
    verticesTmp[i] = vertices.getX(index);
    verticesTmp[i+1] = vertices.getY(index);
    verticesTmp[i+2] = vertices.getZ(index);

    normalTmp[i] = normals.getX(index);
    normalTmp[i+1] = normals.getY(index);
    normalTmp[i+2] = normals.getZ(index);
    j++;
}

j = 0;
for(let i = 0; i < uvTmp.length; i += 2) {
    let index = geometryTmp.index.array[j];
    uvTmp[i] = uv.getX(index);
    uvTmp[i+1] = uv.getY(index);
    j++;
}

let newGeomtry = new THREE.BufferGeometry();
newGeomtry.addAttribute( 'position', new THREE.BufferAttribute( verticesTmp, 3 ) );
newGeomtry.addAttribute( 'normal', new THREE.BufferAttribute( normalTmp, 3 ) );
newGeomtry.addAttribute( 'uv', new THREE.BufferAttribute( uvTmp, 2 ) );

newGeomtry.drawRange = geometryTmp.drawRange;
mesh.geometry = newGeomtry;  

// This process was repeated for all the necessary meshes, which were then added to a new THREE.Scene for exporting with truncateDrawRange set to true

Hopefully, this solution proves helpful to others facing a similar challenge.

Exporting an indexed geometry with a draw range using GLTFExporter in Three.js: What's the best approach?

Answer №1

Answer №2

Similar questions

Leveraging React Native's Async Storage to store and retrieve values consistently within the Render method

Tips for retrieving data using ajax with servlets:

The combination of Angular's ngrx and Router.Events within Rxjs does not seem to function as intended

Discovering the flaw in my programming that pertains to JSON parsing

Error: You can't call .text as a function in jQuery

Utilize the $setValidity function within ng-repeat to validate input fields

Vue: event triggers malfunctioning and components unresponsive

What is the method for extracting a variable from a URL using JavaScript?

The reason why JavaScript condenses two or more spaces into just one space

Double Marker Challenge in Brochure

Ways to prevent the "RangeError: Maximum call stack size exceeded" error

Angular: Assigning a key from one variable to a value in another

Exploring the concept of promise.reject() and the art of passing an object as a parameter

Encountering an error while trying to import JSON in TypeScript

The table appears to be fixed in place and will not scroll, even though the data

Looking for a three.js resource to enhance my project

designing a corner tab element

Error: Attempting to access 'config' property of undefined variable

The seamless merging of Angular2, TypeScript, npm, and gulp for enhanced development efficiency

What sets apart pixi.js WebGL from three.js?