gpu-curtains/dist/esm/core/shaders/chunks/vertex/body/get-vertex-output.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.

const getVertexOutput = ({ geometry }) => {
  let output = (
    /* wgsl */
    `
  vsOutput.position = camera.projection * camera.view * worldPosition;
  vsOutput.normal = normal;
  vsOutput.worldPosition = worldPosition.xyz / worldPosition.w;
  vsOutput.viewDirection = camera.position - vsOutput.worldPosition;
  vsOutput.modelScale = vec3(
    length(modelMatrix[0].xyz),
    length(modelMatrix[1].xyz),
    length(modelMatrix[2].xyz)
  );
  `
  );
  const tangentAttribute = geometry.getAttributeByName("tangent");
  if (tangentAttribute) {
    output += /* wgsl */
    `
  vsOutput.tangent = normalize(modelMatrix * tangent);
  vsOutput.bitangent = cross(vsOutput.normal, vsOutput.tangent.xyz) * vsOutput.tangent.w;
    `;
  }
  output += geometry.vertexBuffers.map(
    (vertexBuffer) => vertexBuffer.attributes.filter((attr) => attr.name !== "normal" && attr.name !== "position" && attr.name !== "tangent").map((attribute) => {
      return (
        /* wgsl */
        `
  vsOutput.${attribute.name} = ${attribute.name};`
      );
    }).join("")
  ).join("\n");
  return output;
};

export { getVertexOutput };