【WebGPU实时光追美少女】场景数据组织与合并

const model = this._model = await H.resource.load({type: 'gltf', name: 'scene.gltf', src: MODEL_SRC});
if (model.cameras.length) {
  this._camera = model.cameras[0];
}
_scene.rootNode.addChild(model.rootNode);

protected _buildAttributeBuffers = (meshes: Mesh[]) => {
  const {_materials} = this;

  let indexCount: number = 0;
  let vertexCount: number = 0;
  meshes.forEach(mesh => {
    vertexCount += mesh.geometry.vertexCount;
    indexCount += mesh.geometry.count;
  });

  const {value: indexes} = this._indexInfo = {
    value: new Uint32Array(indexCount)
  };

  const {position, texcoord_0, normal, meshMatIndex} = this._attributesInfo = {
    position: {
      // alignment of vec3 is 16bytes!
      value: new Float32Array(vertexCount * 4),
      length: 4,
      format: 'float32x3'
    },
    texcoord_0: {
      value: new Float32Array(vertexCount * 2),
      length: 2,
      format: 'float32x2'
    },
    normal: {
      // alignment of vec3 is 16bytes!
      value: new Float32Array(vertexCount * 4),
      length: 4,
      format: 'float32x3'
    },
    meshMatIndex: {
      value: new Uint32Array(vertexCount * 2),
      length: 2,
      format: 'uint32x2'
    }
  };

  let attrOffset: number = 0;
  let indexOffset: number = 0;

  for (let meshIndex = 0; meshIndex < meshes.length; meshIndex += 1) {
    const mesh = meshes[meshIndex];
    const {worldMat} = mesh;
    const quat = mat4.getRotation(new Float32Array(4), worldMat) as Float32Array;
    const {geometry, material} = mesh;
    const {indexData, vertexInfo, vertexCount, count} = geometry;

    if (material.effect.name !== 'rPBR') {
      throw new Error('Only support Effect rPBR!');
    }

    let materialIndex = _materials.indexOf(material);
    if (materialIndex < 0) {
      _materials.push(material);
      materialIndex = _materials.length - 1;
    }

    indexData.forEach((value: number, index: number) => {
      indexes[index + indexOffset] = value + attrOffset;
    });

    if (!vertexInfo.normal) {
      geometry.calculateNormals();
    }

    for (let index = 0; index < vertexCount; index += 1) {
      this._copyAttribute(vertexInfo.position, position, attrOffset, index, worldMat);
      this._copyAttribute(vertexInfo.texcoord_0, texcoord_0, attrOffset, index);
      this._copyAttribute(vertexInfo.normal, normal, attrOffset, index, quat, true);

      meshMatIndex.value.set([meshIndex, materialIndex], (attrOffset + index) * meshMatIndex.length);
    }

    indexOffset += count;
    attrOffset += vertexCount;
  }
}

protected _buildCommonUniforms = (materials: Material[]) => {
  const matId2TexturesId = new Int32Array(materials.length * 4).fill(-1);
  const baseColorFactors = new Float32Array(materials.length * 4).fill(1);
  const metallicRoughnessFactorNormalScaleMaterialTypes = new Float32Array(materials.length * 4).fill(1);
  const specularGlossinessFactors = new Float32Array(materials.length * 4).fill(1);
  const baseColorTextures: Texture[] = [];
  const normalTextures: Texture[] = [];
  const metalRoughOrSpecGlossTextures: Texture[] = [];

  materials.forEach((mat, index) => {
    const useGlass = mat.marcos['USE_GLASS'];
    const useSpecGloss = mat.marcos['USE_SPEC_GLOSS'];
    const baseColorFactor = mat.getUniform('u_baseColorFactor') as Float32Array;
    const metallicFactor = mat.getUniform('u_metallicFactor') as Float32Array;
    const roughnessFactor = mat.getUniform('u_roughnessFactor') as Float32Array;
    const specularFactor = mat.getUniform('u_specularFactor') as Float32Array;
    const glossinessFactor = mat.getUniform('u_glossinessFactor') as Float32Array;
    const normalScale = mat.getUniform('u_normalTextureScale') as Float32Array;
    const baseColorTexture = mat.getUniform('u_baseColorTexture') as Texture;
    const normalTexture = mat.getUniform('u_normalTexture') as Texture;
    const metallicRoughnessTexture = mat.getUniform('u_metallicRoughnessTexture') as Texture;
    const specularGlossinessTexture = mat.getUniform('u_specularGlossinessTexture') as Texture;

    const mid = index * 4;
    baseColorTexture !== buildinTextures.empty && this._setTextures(mid, baseColorTextures, baseColorTexture, matId2TexturesId);
    normalTexture !== buildinTextures.empty && this._setTextures(mid + 1, normalTextures, normalTexture, matId2TexturesId);
    baseColorFactor && baseColorFactors.set(baseColorFactor, index * 4);
    normalScale !== undefined && metallicRoughnessFactorNormalScaleMaterialTypes.set(normalScale.slice(0, 1), index * 4 + 2);

    if (useSpecGloss) {
      specularFactor !== undefined && specularGlossinessFactors.set(specularFactor.slice(0, 3), index * 4);
      glossinessFactor !== undefined && specularGlossinessFactors.set(glossinessFactor.slice(0, 1), index * 4 + 3);
      specularGlossinessTexture !== buildinTextures.empty && this._setTextures(mid + 2, metalRoughOrSpecGlossTextures, specularGlossinessTexture, matId2TexturesId);
      metallicRoughnessFactorNormalScaleMaterialTypes.set([useGlass ? EPBRMaterialType.GLASS_SPEC_GLOSS : EPBRMaterialType.SPEC_GLOSS], index * 4 + 3);
    } else {
      metallicFactor !== undefined && metallicRoughnessFactorNormalScaleMaterialTypes.set(metallicFactor.slice(0, 1), index * 4);
      roughnessFactor !== undefined && metallicRoughnessFactorNormalScaleMaterialTypes.set(roughnessFactor.slice(0, 1), index * 4 + 1);
      metallicRoughnessTexture !== buildinTextures.empty && this._setTextures(mid + 2, metalRoughOrSpecGlossTextures, metallicRoughnessTexture, matId2TexturesId);
      metallicRoughnessFactorNormalScaleMaterialTypes.set([useGlass ? EPBRMaterialType.GLASS_METAL_ROUGH : EPBRMaterialType.METAL_ROUGH], index * 4 + 3);
    }
  });

  this._commonUniforms = {
    matId2TexturesId,
    baseColorFactors,
    metallicRoughnessFactorNormalScaleMaterialTypes,
    specularGlossinessFactors,
    baseColorTextures: this._generateTextureArray(baseColorTextures),
    normalTextures: this._generateTextureArray(normalTextures),
    metalRoughOrSpecGlossTextures: this._generateTextureArray(metalRoughOrSpecGlossTextures)
  };
}

protected _generateTextureArray(textures: Texture[]): Texture {
  let width: number = 0;
  let height: number = 0;

  textures.forEach(tex => {
    width = Math.max(width, tex.width);
    height = Math.max(height, tex.height);
  });

  const images = textures.map(tex => {
    if (tex.width === width && tex.height === height) {
      return tex.source as TTextureSource;
    }

    if (!(tex.source instanceof ImageBitmap)) {
      throw new Error('Can only resize image bitmap!');
    }

    if (!RayTracingManager.RESIZE_CANVAS) {
      RayTracingManager.RESIZE_CANVAS = document.createElement('canvas');
      RayTracingManager.RESIZE_CANVAS.width = 2048;
      RayTracingManager.RESIZE_CANVAS.height = 2048;
      RayTracingManager.RESIZE_CTX = RayTracingManager.RESIZE_CANVAS.getContext('2d');
    }

    const ctx = RayTracingManager.RESIZE_CTX;
    ctx.drawImage(tex.source as ImageBitmap, 0, 0, width, height);

    return ctx.getImageData(0, 0, width, height).data.buffer;
  })

  return new Texture(
    width, height,
    images,
    textures[0].format
  );
}