gpu-curtains/dist/esm/core/shaders/chunks/vertex/body/get-morph-targets.mjs

gpu-curtains is a 3D WebGPU rendering engine. It can be used as a standalone 3D engine, but also includes extra classes focused on mapping 3d objects to DOM elements; It allows users to synchronize values such as position, sizing, or scale between them.

import { BufferElement } from '../../../../bindings/bufferElements/BufferElement.mjs';

const getMorphTargets = ({ bindings = [], geometry }) => {
  let morphTargets = "";
  const morphTargetsBindings = bindings.filter((binding) => binding.name.includes("morphTarget"));
  morphTargetsBindings.forEach((binding) => {
    const morphAttributes = Object.values(binding.inputs).filter((input) => input.name !== "weight");
    morphAttributes.forEach((input) => {
      const bindingType = BufferElement.getType(input.type);
      const attribute = geometry.getAttributeByName(input.name);
      if (attribute) {
        const attributeType = attribute.type;
        const attributeBindingVar = morphAttributes.length === 1 ? `${binding.name}.${input.name}[attributes.vertexIndex]` : `${binding.name}.elements[attributes.vertexIndex].${input.name}`;
        if (bindingType === attributeType) {
          morphTargets += `${input.name} += ${binding.name}.weight * ${attributeBindingVar};
	`;
        } else {
          if (bindingType === "vec3f" && attributeType === "vec4f") {
            morphTargets += `${input.name} += ${binding.name}.weight * vec4(${attributeBindingVar}, 0.0);
	`;
          }
        }
      }
    });
  });
  return morphTargets;
};

export { getMorphTargets };