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

Jump to bottom

feat(packages/view): support to render MorphTargets #1427

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

feat(packages/view): support to render MorphTargets #1427

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a5afe24
feat(packages/view): support to render MorphTargets
Jun 3, 2024
5393ca2
refactor(packages/view): move the morph target code to the createValu…
Jun 4, 2024
ec4b92e
Merge branch 'donmccurdy:main' into transform-view/morphtargets
prince7688 Jul 12, 2024
df39d43
Merge branch 'donmccurdy:main' into transform-view/morphtargets
prince7688 Aug 5, 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
6 changes: 6 additions & 0 deletions packages/view/src/subjects/NodeSubject.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,12 @@ export class NodeSubject extends Subject<NodeDef, Object3D> {
this.skin.update(def.getSkin());
this.light.update(def.getExtension('KHR_lights_punctual'));
this.instancedMesh.update(def.getExtension('EXT_mesh_gpu_instancing'));

const meshValue = this.mesh.value as Group;

if (meshValue && !(this.value as Mesh).morphTargetInfluences) {
(this.value as Mesh).morphTargetInfluences = (meshValue.children?.[0] as Mesh)?.morphTargetInfluences;
}
Comment on lines +127 to +131
Copy link
Owner

Choose a reason for hiding this comment

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

I'd expect this.value to have either type THREE.Object3D or THREE.Bone here, depending on context — any THREE.Mesh types would be nested two levels down. Are you sure this part works as it should?

A unit test in NodeSubject.test.ts would be very welcome, though not required. :)

Copy link
Author

Choose a reason for hiding this comment

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

@donmccurdy The thing is, we need the morphTargetInfluences on the node object for the Animation (with Weights target path) to work properly. When THREE.JS applies the AnimationClip, it searches for the morphTargetInfluences property on that particular node that has the animation. I don't know if there's any other way to do this, but I've tested it with my current project, and it works properly. I've also added a test case in the NodeSubject.test.ts.

}

dispose() {
Expand Down
39 changes: 38 additions & 1 deletion packages/view/src/subjects/PrimitiveSubject.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
Mesh,
Points,
SkinnedMesh,
TypedArray,
} from 'three';
import { Accessor as AccessorDef, Material as MaterialDef, Primitive as PrimitiveDef } from '@gltf-transform/core';
import type { DocumentViewSubjectAPI } from '../DocumentViewImpl.js';
Expand All @@ -27,10 +28,46 @@ export class PrimitiveSubject extends Subject<PrimitiveDef, MeshLike> {
protected attributes = new RefMapObserver<AccessorDef, BufferAttribute>('attributes', this._documentView);

constructor(documentView: DocumentViewSubjectAPI, def: PrimitiveDef) {
// Add Morph Targets
const geometry = new BufferGeometry();

// Convert geometry attributes
for (const accessor of def.listAttributes()) {
const array = accessor.getArray() as TypedArray;
geometry.setAttribute(accessor.getName(), new BufferAttribute(array, accessor.getElementSize()));
}

// Convert indices if available
if (def.getIndices()) {
const accessor = def.getIndices() as AccessorDef;
const array = accessor.getArray() as TypedArray;
geometry.setIndex(new BufferAttribute(array, 1));
}
Copy link
Owner

Choose a reason for hiding this comment

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

Attributes and indices are set up below, with a subscription callback to update them when definitions change — is it required to set them up a second time here?

Copy link
Author

Choose a reason for hiding this comment

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

@donmccurdy You're right, there is no need to set them up a second time. I didn't look at the subscription callback; I've removed the code for Attributes and indices. Thanks.


// Convert morph targets
const targets = def.listTargets();
if (targets.length > 0) {
geometry.morphAttributes = {};

for (const [index, target] of targets.entries()) {
for (const semantic of target.listSemantics()) {
const attriName = semantic.toLowerCase();
if (!geometry.morphAttributes[attriName]) {
geometry.morphAttributes[attriName] = [];
}
const accessor = target.getAttribute(semantic) as AccessorDef;
const array = accessor.getArray() as TypedArray;
geometry.morphAttributes[attriName][index] = new BufferAttribute(array, accessor.getElementSize());
}
}

geometry.morphTargetsRelative = true;
}
Copy link
Owner

Choose a reason for hiding this comment

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

At some point, it will probably be necessary to create a PrimitiveTargetSubject class that handles listening for changes to each morph target definition, and emits events so that the BufferGeometry can be updated when things change.

It's OK with me if the morph targets are readonly (just one-time setup, no live updates) for now though. Perhaps this code for adding targets to the geometry could just be moved into PrimitiveSubject.createValue, or a helper function, to keep the constructor concise?

Copy link
Author

Choose a reason for hiding this comment

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

@donmccurdy For now, I've moved the code to PrimitiveSubject.createValue.


super(
documentView,
def,
PrimitiveSubject.createValue(def, new BufferGeometry(), DEFAULT_MATERIAL, documentView.primitivePool),
PrimitiveSubject.createValue(def, geometry, DEFAULT_MATERIAL, documentView.primitivePool),
documentView.primitivePool,
);

Expand Down