Fix web responsive issues

Kaweees · Kaweees · commit f4f7851fae26 · 2025-06-24T00:25:17.000-07:00
diff --git a/.justfile b/.justfile
@@ -15,6 +15,9 @@ alias f := format
 default:
   @just --list
 
+# Get the number of cores
+CORES := if os() == "macos" { `sysctl -n hw.ncpu` } else if os() == "linux" { `nproc` } else { "1" }
+
 # Run a package
 run *package='bunny':
   @./target/release/{{package}}
@@ -25,7 +28,7 @@ build *build_type='Release':
   @echo "Configuring the build system..."
   @cd build && cmake -S .. -B . -DCMAKE_BUILD_TYPE={{build_type}}
   @echo "Building the project..."
-  @cd build && cmake --build . -j$(nproc)
+  @cd build && cmake --build . -j{{CORES}}
 
 # Build the project for the web
 web *build_type='Release':
@@ -34,7 +37,7 @@ web *build_type='Release':
   @echo "Configuring the build system..."
   @cd build && emcmake cmake -S .. -B . -DCMAKE_BUILD_TYPE={{build_type}}
   @echo "Building the project..."
-  @cd build && cmake --build . -j$(nproc)
+  @cd build && cmake --build . -j{{CORES}}
   @mkdir -p public/assets/
   @# Find and copy WASM, JS and data files to the public directory
   @find target/release/web -name "*.wasm" -exec cp {} ./public/ \;
diff --git a/CMakeLists.txt b/CMakeLists.txt
@@ -85,6 +85,10 @@ else()
         GIT_PROGRESS TRUE
         GIT_SHALLOW TRUE)
       FetchContent_MakeAvailable(metal-cpp)
+
+      # Add metal-cpp include directories
+      target_include_directories(${PROJECT_NAME} INTERFACE ${metal-cpp_SOURCE_DIR})
+
       target_link_libraries(
         ${PROJECT_NAME} INTERFACE "-framework Metal" "-framework Foundation"
                                   "-framework QuartzCore" "-framework MetalKit")
@@ -140,7 +144,11 @@ else()
                              INTERFACE ${SDL3_SOURCE_DIR}/include)
 
   # Link SDL3 libraries
-  target_link_libraries(${PROJECT_NAME} INTERFACE SDL3::SDL3)
+  if(EMSCRIPTEN)
+    target_link_libraries(${PROJECT_NAME} INTERFACE SDL3::SDL3-static)
+  else()
+    target_link_libraries(${PROJECT_NAME} INTERFACE SDL3::SDL3)
+  endif()
 endif()
 
 # Examples
diff --git a/README.md b/README.md
@@ -74,7 +74,8 @@ To get a local copy of the project up and running on your machine, follow these
 2. Install the project dependencies
 
    ```sh
-   nix-shell
+   nix-shell --max-jobs $(nproc) # Linux / Windows (WSL)
+   nix-shell --max-jobs $(sysctl -n hw.ncpu) # macOS
    ```
 
 3. Build the project
diff --git a/include/kiwigl/graphics/display.hpp b/include/kiwigl/graphics/display.hpp
@@ -22,7 +22,10 @@
 #ifdef __CUDA__
 #include "display.cuh"
 #elif __METAL__
-#include "display.mm"
+#define NS_PRIVATE_IMPLEMENTATION
+#define MTL_PRIVATE_IMPLEMENTATION
+#include "Metal/Metal.hpp"
+
 #endif
 
 namespace kiwigl {
@@ -107,7 +110,7 @@ class Display {
       Triangle* d_projectedTriangles = nullptr;
       InitalizeCuda();
 #elif __METAL__
-      InitalizeMetal();
+      // InitalizeMetal();
 #endif
 
 #ifndef BENCHMARK_MODE
@@ -200,7 +203,7 @@ class Display {
 #ifdef __CUDA__
       LaunchCuda(frameBuffer->getWidth(), frameBuffer->getHeight());
 #elif __METAL__
-      LaunchMetal();
+      // LaunchMetal();
 #else
   for (int i = 0; i < mesh.faces.size(); i++) {
     // Transform the vertices of the face
@@ -300,14 +303,14 @@ class Display {
     // Method to launch CUDA
     virtual void LaunchCuda(int width, int height);
 #elif __METAL__
-    // Method to initialize Metal
-    virtual void InitalizeMetal();
+    // // Method to initialize Metal
+    // virtual void InitalizeMetal();
 
-    // Method to free Metal
-    virtual void FreeMetal();
+    // // Method to free Metal
+    // virtual void FreeMetal();
 
-    // Method to launch Metal
-    virtual void LaunchMetal();
+    // // Method to launch Metal
+    // virtual void LaunchMetal();
 #endif
 
     // Method to load a mesh
diff --git a/public/index.html b/public/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
     <style>
       html, body {
         margin: 0%;
