Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add skinning support to glTF exporter #7197

Merged
merged 5 commits into from
Dec 16, 2024
Merged

Add skinning support to glTF exporter #7197

Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1b3cb44
Add skinning support to glTF exporter
willeastcott Dec 15, 2024
c3e9a2f
Move writeSkins function up a bit
willeastcott Dec 15, 2024
df4adf6
Lint fixes
willeastcott Dec 15, 2024
8c0b883
Remove skin property from geometry
willeastcott Dec 15, 2024
ee1c850
Use getComponentType
willeastcott Dec 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 53 additions & 0 deletions src/extras/exporters/gltf-exporter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,6 +139,7 @@ class GltfExporter extends CoreExporter {
cameras: [],
entities: [],
materials: [],
skins: [],
textures: [],

// entry: { node, meshInstances}
Expand Down Expand Up @@ -200,6 +201,11 @@ class GltfExporter extends CoreExporter {
if (buffers.indexOf(indexBuffer) < 0) {
buffers.push(indexBuffer);
}

// Collect skin
if (mesh.skin && resources.skins.indexOf(mesh.skin) < 0) {
resources.skins.push(mesh.skin);
}
});
};

Expand Down Expand Up @@ -472,6 +478,12 @@ class GltfExporter extends CoreExporter {
const entityMeshInstance = resources.entityMeshInstances.find(e => e.node === entity);
if (entityMeshInstance) {
node.mesh = resources.entityMeshInstances.indexOf(entityMeshInstance);

// Add skin reference if this node has a skinned mesh
const meshInstance = entityMeshInstance.meshInstances[0];
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Slight problem here is that the engine supports different skin for each mesh instance in the array here, but glTF does not.
We should check all meshInstances in this array, and they must point to the same skin. If they point to different skins, or some do not link to any skin, we should probably log a warning and skip skinning.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm. Any objection to opening a new issue on this and fixing it in a follow up PR? I want to keep this PR reasonably simple and there might be some nuance to how we want to deal with the case you mention.

if (meshInstance && meshInstance.mesh.skin) {
node.skin = resources.skins.indexOf(meshInstance.mesh.skin);
}
}

if (entity.children.length > 0) {
Expand Down Expand Up @@ -622,6 +634,46 @@ class GltfExporter extends CoreExporter {
return primitive;
}

writeSkins(resources, json) {
if (resources.skins.length > 0) {
json.skins = resources.skins.map((skin) => {
// Create float32 array for inverse bind matrices
const matrices = new Float32Array(skin.inverseBindPose.length * 16);
for (let i = 0; i < skin.inverseBindPose.length; i++) {
const ibm = skin.inverseBindPose[i];
matrices.set(ibm.data, i * 16);
}

// Create buffer view for matrices
const matrixBuffer = matrices.buffer;
GltfExporter.writeBufferView(resources, json, matrixBuffer);
resources.buffers.push(matrixBuffer);
const bufferView = resources.bufferViewMap.get(matrixBuffer);

// Create accessor for inverse bind matrices
const accessor = {
bufferView: bufferView[0],
componentType: 5126, // FLOAT
willeastcott marked this conversation as resolved.
Show resolved Hide resolved
count: skin.inverseBindPose.length,
type: 'MAT4'
};
const accessorIndex = json.accessors.push(accessor) - 1;

// Find joint nodes by bone names
const joints = skin.boneNames.map((boneName) => {
const node = resources.entities.find(entity => entity.name === boneName);
return resources.entities.indexOf(node);
});

// Create skin
return {
inverseBindMatrices: accessorIndex,
joints: joints
};
});
}
}

convertTextures(srcTextures, options) {

const textureOptions = {
Expand Down Expand Up @@ -761,6 +813,7 @@ class GltfExporter extends CoreExporter {
this.writeMeshes(resources, json, options);
this.writeMaterials(resources, json);
this.writeNodes(resources, json, options);
this.writeSkins(resources, json);
await this.writeTextures(resources, textureCanvases, json, options);

// delete unused properties
Expand Down
Loading