Add local glTF viewer and visual coverage

Amp-Thread-ID: https://ampcode.com/threads/T-01a02d1c-27fc-7761-9f51-ed97b2dd4e3e
Co-authored-by: Heaust Azure <heaust.azure@gmail.com>

addons/handles/src/importers/gltf.ts

@@ -1,5 +1,8 @@
 import { Mesh } from "../Mesh";
 import type { Scene } from "../Scene";
+import { DirectionalLight } from "../lights/DirectionalLight";
+import { PointLight } from "../lights/PointLight";
+import { SpotLight } from "../lights/SpotLight";
 import { PBRMaterial } from "../materials/PBRMaterial";
 import { Texture } from "../materials/Texture";
 
@@ -49,12 +52,20 @@ export async function importGltf(scene: Scene, url: string | URL) {
     for (const material of result.materials) {
       if (material.baseColorTexture >= 0) srgb.add(material.baseColorTexture);
       if (material.emissiveTexture >= 0) srgb.add(material.emissiveTexture);
+      if (material.flags & 16 && material.metallicRoughnessTexture >= 0)
+        srgb.add(material.metallicRoughnessTexture);
+      if (material.specularColorTexture >= 0)
+        srgb.add(material.specularColorTexture);
     }
     textures = result.textures.map(
-      ({ image }: { image: ImageBitmap }, index: number) =>
+      (
+        { image, sampler }: { image: ImageBitmap; sampler: any },
+        index: number,
+      ) =>
         new Texture(scene, {
           source: image,
           format: srgb.has(index) ? "rgba8unorm-srgb" : "rgba8unorm",
+          sampler,
         }),
     );
     await Promise.all(textures.map((texture: Texture) => texture.ready));
@@ -63,10 +74,19 @@ export async function importGltf(scene: Scene, url: string | URL) {
         new PBRMaterial(scene, {
           ...options,
           baseColorTexture: textures[options.baseColorTexture],
-          metallicRoughnessTexture:
-            textures[options.metallicRoughnessTexture],
+          metallicRoughnessTexture: textures[options.metallicRoughnessTexture],
           normalTexture: textures[options.normalTexture],
           emissiveTexture: textures[options.emissiveTexture],
+          occlusionTexture: textures[options.occlusionTexture],
+          transmissionTexture: textures[options.transmissionTexture],
+          thicknessTexture: textures[options.thicknessTexture],
+          clearcoatTexture: textures[options.clearcoatTexture],
+          iridescenceTexture: textures[options.iridescenceTexture],
+          iridescenceThicknessTexture:
+            textures[options.iridescenceThicknessTexture],
+          anisotropyTexture: textures[options.anisotropyTexture],
+          specularTexture: textures[options.specularTexture],
+          specularColorTexture: textures[options.specularColorTexture],
         }),
     );
     await Promise.all(materials.map((material: PBRMaterial) => material.ready));
@@ -83,12 +103,20 @@ export async function importGltf(scene: Scene, url: string | URL) {
             ...(primitive.normals ? { normals: primitive.normals } : {}),
             ...(primitive.tangents ? { tangents: primitive.tangents } : {}),
             ...(primitive.uvs ? { uvs: primitive.uvs } : {}),
+            ...(primitive.uvs2 ? { uvs2: primitive.uvs2 } : {}),
             ...(primitive.colors ? { colors: primitive.colors } : {}),
           },
         }),
     );
     await Promise.all(meshes.map((mesh) => mesh.ready));
-    return meshes;
+    const lights = (result.lights ?? []).map((options: any) => {
+      if (options.type === "directional")
+        return new DirectionalLight(scene, options);
+      if (options.type === "spot") return new SpotLight(scene, options);
+      return new PointLight(scene, options);
+    });
+    await Promise.all(lights.map((light: any) => light.ready));
+    return Object.assign(meshes, { camera: result.camera });
   });
   await Promise.all(
     result.textures.map((_: unknown, index: number) =>