initial success of tinyusdz wasm loader.

lighttransport · Aug 16, 2024 · 6cd6910 · 6cd6910
1 parent 1a5b5a2
commit 6cd6910
Show file tree

Hide file tree

Showing 6 changed files with 146 additions and 22 deletions.
diff --git a/sandbox/emscripten/embind/Makefile b/sandbox/emscripten/embind/Makefile
@@ -0,0 +1,4 @@
+EMCC=emcc
+
+all:
+	${EMCC} --bind -Os simple.cc -sMODULARIZE -sEXPORT_ES6=1 -s ALLOW_MEMORY_GROWTH=1 -o myloader.js
diff --git a/sandbox/emscripten/embind/index.html b/sandbox/emscripten/embind/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<title>My first three.js app</title>
+		<style>
+			body { margin: 0; }
+		</style>
+	</head>
+	<body>
+		<script>
+		</script>
+		<script type="module" src="/main.js"></script>
+	</body>
+</html>
diff --git a/sandbox/emscripten/embind/package.json b/sandbox/emscripten/embind/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "simple-loader",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@types/three": "^0.160.0",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.8",
+    "@types/bun": "latest"
+  },
+  "dependencies": {
+    "gsap": "^3.12.4",
+    "lil-gui": "^0.19.1",
+    "stats.js": "^0.17.0",
+    "three": "^0.160.0"
+  },
+  "module": "index.ts"
+}
diff --git a/sandbox/emscripten/embind/simple.cc b/sandbox/emscripten/embind/simple.cc
@@ -0,0 +1,40 @@
+#include <emscripten/bind.h>
+
+#include <vector>
+
+using namespace emscripten;
+
+///
+/// Simple C++ wrapper class for Emscripten
+///
+class MyLoader {
+ public:
+  MyLoader(const std::string &binary) {
+    binary_ = binary;
+  }
+  ~MyLoader() {}
+
+  bool ok() const { return binary_.size(); }
+
+  const std::string error() const { return error_; }
+
+ private:
+  std::string binary_;
+  std::string warn_;
+  std::string error_;
+
+};
+
+// Register STL
+EMSCRIPTEN_BINDINGS(stl_wrappters) {
+  register_vector<float>("VectorFloat");
+  register_vector<int>("VectorInt");
+  register_vector<uint32_t>("VectorUInt");
+}
+
+EMSCRIPTEN_BINDINGS(myloader_module) {
+  class_<MyLoader>("MyLoader")
+      .constructor<const std::string &>()
+      .function("ok", &MyLoader::ok)
+      .function("error", &MyLoader::error);
+}
diff --git a/sandbox/threejs/CMakeLists.txt b/sandbox/threejs/CMakeLists.txt
@@ -1,7 +1,7 @@
 # Assume this project is invoked by emcmake.
 cmake_minimum_required(VERSION 3.5.1)
 
-set(BUILD_TARGET "tinyusdzjs")
+set(BUILD_TARGET "tinyusdz")
 
 if (NOT EMSCRIPTEN)
   message(FATAL "Must be compiled with emscripten")
@@ -30,6 +30,9 @@ list(
 
 add_executable(${BUILD_TARGET} ${SOURCES})
 add_sanitizers(${BUILD_TARGET})
+
+set(EXT_COMPILE_OPTIONS "-sTOTAL_MEMORY=1024MB")
+
 target_compile_options(${BUILD_TARGET} PRIVATE ${EXT_COMPILE_OPTIONS})
 
 # tinyusdz dir
@@ -43,7 +46,15 @@ target_link_libraries(${BUILD_TARGET} PRIVATE tinyusdz::tinyusdz_static
 source_group("Source Files" FILES ${SOURCES})
 
 if (EMSCRIPTEN)
-    set(CMAKE_EXECUTABLE_SUFFIX ".html")
+    set_target_properties(
+        ${BUILD_TARGET}
+        PROPERTIES OUTPUT_NAME tinyusdz
+                   SUFFIX ".js"
+                   RUNTIME_OUTPUT_DIRECTORY ${PROJECT_SOURCE_DIR}/dist)
+    #set(CMAKE_EXECUTABLE_SUFFIX ".html")
 endif()
 
-set_target_properties(${BUILD_TARGET} PROPERTIES LINK_FLAGS " --bind")
+set_target_properties(${BUILD_TARGET} PROPERTIES LINK_FLAGS "-s INITIAL_MEMORY=128MB -s TOTAL_MEMORY=1GB -sTOTAL_STACK=256MB -sASSERTIONS -s ALLOW_MEMORY_GROWTH=1 -s WASM=1 -sMODULARIZE -sEXPORT_ES6=1 --bind")
+
+# ENVIRONMENT=web
+# SINGLE_FILE=1
diff --git a/sandbox/threejs/simple/main.js b/sandbox/threejs/simple/main.js
@@ -1,30 +1,60 @@
 import * as THREE from 'three';
 
-import * as TinyUSDZLoader from './TinyUSDZLoader'
+import initTinyUSDZ from './tinyusdz.js';
 
-const usd = TinyUSDZLoader.TinyUSDZLoader();
-//const usd = new TinyUSDZLoader.TinyU( )
+const USDZ_FILEPATH = './suzanne.usdc';
+//const USDZ_FILEPATH = './cube.usdz';
+//const USDZ_FILEPATH = './texture-cat-plane.usda';
+//const USDZ_FILEPATH = './LemonMeringuePie.usdz';
+//const USDZ_FILEPATH = './robot.usda';
+//const USDZ_FILEPATH = './teapot.usdz';
+//const USDZ_FILEPATH = './DamagedHelmet.usdz';
 
-const scene = new THREE.Scene();
-const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
+const usd_res = await fetch(USDZ_FILEPATH);
+const usd_data = await usd_res.arrayBuffer();
 
-const renderer = new THREE.WebGLRenderer();
-renderer.setSize( window.innerWidth, window.innerHeight );
-renderer.setAnimationLoop( animate );
-document.body.appendChild( renderer.domElement );
+const usd_binary = new Uint8Array(usd_data);
 
-const geometry = new THREE.BoxGeometry( 1, 1, 1 );
-const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
-const cube = new THREE.Mesh( geometry, material );
-scene.add( cube );
+initTinyUSDZ().then(function(TinyUSDZLoader) {
 
-camera.position.z = 5;
+  const usd = new TinyUSDZLoader.TinyUSDZLoader(usd_binary);
+  console.log(usd.numMeshes());
 
-function animate() {
+  const scene = new THREE.Scene();
+  const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
 
-	cube.rotation.x += 0.01;
-	cube.rotation.y += 0.01;
+  const renderer = new THREE.WebGLRenderer();
+  renderer.setSize( window.innerWidth, window.innerHeight );
+  renderer.setAnimationLoop( animate );
+  document.body.appendChild( renderer.domElement );
 
-	renderer.render( scene, camera );
+  // First mesh only
+  const mesh = usd.getMesh(0);
+  console.log(mesh);
 
-}
+  //const geometry = new THREE.BoxGeometry( 1, 1, 1 );
+  const geometry = new THREE.BufferGeometry();
+  geometry.setAttribute( 'position', new THREE.BufferAttribute( mesh.points, 3 ) );
+  // TODO: set normal from mesh
+
+  // Assume triangulated indices.
+  geometry.setIndex( new THREE.Uint32BufferAttribute(mesh.faceVertexIndices, 1) );
+
+  geometry.computeVertexNormals();
+
+  //const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
+  const material = new THREE.MeshNormalMaterial();
+  const cube = new THREE.Mesh( geometry, material );
+  scene.add( cube );
+
+  camera.position.z = 5;
+
+  function animate() {
+
+    cube.rotation.x += 0.01;
+    cube.rotation.y += 0.01;
+
+    renderer.render( scene, camera );
+
+  }
+});