@gradio/model3d 0.10.11 → 0.11.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @gradio/model3d
 
+## 0.11.0
+
+### Features
+
+- [#8687](https://github.com/gradio-app/gradio/pull/8687) [`bc1d45d`](https://github.com/gradio-app/gradio/commit/bc1d45d8745a677bbe2a32f8d7553fe0d4ef3fd7) - Model3D point cloud and wireframe display modes.  Thanks @dawoodkhan82!
+
+### Dependency updates
+
+- @gradio/atoms@0.7.6
+- @gradio/utils@0.5.1
+- @gradio/statustracker@0.7.1
+- @gradio/client@1.3.0
+- @gradio/upload@0.11.5
+- @gradio/icons@0.6.0
+
+## 0.10.12
+
+### Dependency updates
+
+- @gradio/upload@0.11.4
+- @gradio/client@1.2.1
+
 ## 0.10.11
 
 ### Dependency updates

package/Index.svelte

@@ -20,6 +20,7 @@
 	export let visible = true;
 	export let value: null | FileData = null;
 	export let root: string;
+	export let display_mode: "solid" | "point_cloud" | "wireframe" = "solid";
 	export let clear_color: [number, number, number, number];
 	export let loading_status: LoadingStatus;
 	export let label: string;
@@ -66,6 +67,7 @@
 			<Model3D
 				{value}
 				i18n={gradio.i18n}
+				{display_mode}
 				{clear_color}
 				{label}
 				{show_label}
@@ -105,6 +107,7 @@
 			{label}
 			{show_label}
 			{root}
+			{display_mode}
 			{clear_color}
 			{value}
 			{camera_position}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/model3d",
-  "version": "0.10.11",
+  "version": "0.11.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -12,16 +12,16 @@
     "babylonjs-loaders": "^4.2.1",
     "dequal": "^2.0.2",
     "gsplat": "^1.0.5",
-    "@gradio/atoms": "^0.7.5",
-    "@gradio/client": "^1.2.0",
-    "@gradio/icons": "^0.5.0",
-    "@gradio/statustracker": "^0.7.0",
-    "@gradio/upload": "^0.11.3",
-    "@gradio/utils": "^0.5.0",
+    "@gradio/client": "^1.3.0",
+    "@gradio/atoms": "^0.7.6",
+    "@gradio/icons": "^0.6.0",
+    "@gradio/upload": "^0.11.5",
+    "@gradio/utils": "^0.5.1",
+    "@gradio/statustracker": "^0.7.1",
     "@gradio/wasm": "^0.11.0"
   },
   "devDependencies": {
-    "@gradio/preview": "^0.10.0"
+    "@gradio/preview": "^0.10.1"
   },
   "main_changeset": true,
   "main": "./Index.svelte",

package/shared/Canvas3D.svelte

@@ -15,6 +15,7 @@
 	}
 
 	export let value: FileData;
+	export let display_mode: "solid" | "point_cloud" | "wireframe";
 	export let clear_color: [number, number, number, number];
 	export let camera_position: [number | null, number | null, number | null];
 	export let zoom_speed: number;
@@ -53,6 +54,7 @@
 	let canvas: HTMLCanvasElement;
 	let scene: BABYLON.Scene;
 	let engine: BABYLON.Engine;
+	let point_cloud_system: BABYLON.PointsCloudSystem | null = null;
 	let mounted = false;
 
 	onMount(() => {
@@ -91,6 +93,11 @@
 				mesh.dispose();
 			});
 
+			if (point_cloud_system) {
+				point_cloud_system.dispose();
+				point_cloud_system = null;
+			}
+
 			// Load the new model
 			if (url) {
 				BABYLON.SceneLoader.ShowLoadingScreen = false;
@@ -98,7 +105,15 @@
 					url,
 					"",
 					scene,
-					() => create_camera(scene, camera_position, zoom_speed, pan_speed),
+					() => {
+						if (display_mode === "point_cloud") {
+							create_point_cloud(scene);
+						} else if (display_mode === "wireframe") {
+							create_wireframe(scene);
+						} else {
+							create_camera(scene, camera_position, zoom_speed, pan_speed);
+						}
+					},
 					undefined,
 					undefined,
 					"." + value.path.split(".").pop()
@@ -145,6 +160,68 @@
 			create_camera(scene, camera_position, zoom_speed, pan_speed);
 		}
 	}
+
+	function create_point_cloud(scene: BABYLON.Scene): void {
+		const meshes = scene.meshes;
+		const pointPositions: BABYLON.Vector3[] = [];
+
+		meshes.forEach((mesh) => {
+			if (mesh instanceof BABYLON.Mesh) {
+				const positions = mesh.getVerticesData(
+					BABYLON.VertexBuffer.PositionKind
+				);
+				if (positions) {
+					for (let i = 0; i < positions.length; i += 3) {
+						pointPositions.push(
+							new BABYLON.Vector3(
+								positions[i],
+								positions[i + 1],
+								positions[i + 2]
+							)
+						);
+					}
+				}
+				mesh.setEnabled(false);
+			}
+		});
+
+		point_cloud_system = new BABYLON.PointsCloudSystem(
+			"point_cloud_system",
+			1,
+			scene
+		);
+
+		point_cloud_system.addPoints(
+			pointPositions.length,
+			(particle: BABYLON.CloudPoint, i: number) => {
+				particle.position = pointPositions[i];
+				particle.color = new BABYLON.Color4(
+					Math.random(),
+					Math.random(),
+					Math.random(),
+					1.0
+				);
+			}
+		);
+
+		point_cloud_system.buildMeshAsync().then((mesh) => {
+			mesh.alwaysSelectAsActiveMesh = true;
+			create_camera(scene, camera_position, zoom_speed, pan_speed);
+		});
+	}
+
+	function create_wireframe(scene: BABYLON.Scene): void {
+		scene.meshes.forEach((mesh) => {
+			if (mesh instanceof BABYLON.Mesh) {
+				mesh.material = new BABYLON.StandardMaterial(
+					"wireframeMaterial",
+					scene
+				);
+				mesh.material.wireframe = true;
+			}
+			create_camera(scene, camera_position, zoom_speed, pan_speed);
+		});
+	}
 </script>
 
 <canvas bind:this={canvas}></canvas>

package/shared/Model3D.svelte

@@ -8,6 +8,7 @@
 	import type Canvas3D from "./Canvas3D.svelte";
 
 	export let value: FileData | null;
+	export let display_mode: "solid" | "point_cloud" | "wireframe" = "solid";
 	export let clear_color: [number, number, number, number] = [0, 0, 0, 0];
 	export let label = "";
 	export let show_label: boolean;
@@ -101,6 +102,7 @@
 				bind:this={canvas3d}
 				bind:resolved_url
 				{value}
+				{display_mode}
 				{clear_color}
 				{camera_position}
 				{zoom_speed}

package/shared/Model3DUpload.svelte

@@ -9,6 +9,7 @@
 	import type Canvas3D from "./Canvas3D.svelte";
 
 	export let value: null | FileData;
+	export let display_mode: "solid" | "point_cloud" | "wireframe" = "solid";
 	export let clear_color: [number, number, number, number] = [0, 0, 0, 0];
 	export let label = "";
 	export let show_label: boolean;
@@ -121,6 +122,7 @@
 				this={Canvas3DComponent}
 				bind:this={canvas3d}
 				{value}
+				{display_mode}
 				{clear_color}
 				{camera_position}
 				{zoom_speed}