Enable fgviewer for android remote debugging (#8483)

* Enable fgviewer for the users * Fix incorrect position * Update * Support remote debug server * Enable fgviewer on android * Link and include fgviewer_resources * Adjust js to show untitled view
google · Mar 6, 2025 · d9e3046 · d9e3046
1 parent 075743e
commit d9e3046
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 20 deletions.
diff --git a/android/build.gradle b/android/build.gradle
@@ -71,10 +71,9 @@ buildscript {
             .gradleProperty("com.google.android.filament.include-webgpu")
             .isPresent()
 
-    // TODO: Uncomment below when fgviewer is ready
-    // def fgviewer = providers
-    //         .gradleProperty("com.google.android.filament.fgviewer")
-    //         .isPresent()
+    def fgviewer = providers
+                 .gradleProperty("com.google.android.filament.fgviewer")
+                 .isPresent()
 
     def matdbg = providers
             .gradleProperty("com.google.android.filament.matdbg")
@@ -131,8 +130,7 @@ buildscript {
         "-DFILAMENT_DIST_DIR=${filamentPath}".toString(),
         "-DFILAMENT_SUPPORTS_VULKAN=${excludeVulkan ? 'OFF' : 'ON'}".toString(),
         "-DFILAMENT_SUPPORTS_WEBGPU=${includeWebGPU ? 'ON' : 'OFF'}".toString(),
-        // TODO: Uncomment below when fgviewer is ready
-        // "-DFILAMENT_ENABLE_FGVIEWER=${fgviewer ? 'ON' : 'OFF'}".toString(),
+        "-DFILAMENT_ENABLE_FGVIEWER=${fgviewer ? 'ON' : 'OFF'}".toString(),
         "-DFILAMENT_ENABLE_MATDBG=${matdbg ? 'ON' : 'OFF'}".toString(),
         "-DFILAMENT_DISABLE_MATOPT=${matnopt ? 'ON' : 'OFF'}".toString()
     ]

diff --git a/android/filament-android/CMakeLists.txt b/android/filament-android/CMakeLists.txt
@@ -2,8 +2,7 @@ cmake_minimum_required(VERSION 3.19)
 project(filament-android)
 
 option(FILAMENT_SUPPORTS_VULKAN "Enables Vulkan on Android" OFF)
-# TODO: Uncomment below when fgviewer is ready
-# option(FILAMENT_ENABLE_FGVIEWER "Enables Frame Graph Viewer" OFF)
+option(FILAMENT_ENABLE_FGVIEWER "Enables Frame Graph Viewer" OFF)
 option(FILAMENT_ENABLE_MATDBG "Enables Material debugger" OFF)
 option(FILAMENT_DISABLE_MATOPT "Disables material optimizations" OFF)
 option(FILAMENT_SUPPORTS_WEBGPU "Enables WebGPU on Android" OFF)
@@ -60,12 +59,11 @@ add_library(smol-v STATIC IMPORTED)
 set_target_properties(smol-v PROPERTIES IMPORTED_LOCATION
         ${FILAMENT_DIR}/lib/${ANDROID_ABI}/libsmol-v.a)
 
-# TODO: Uncomment below when fgviewer is ready
-# if (FILAMENT_ENABLE_FGVIEWER)
-#     add_library(fgviewer STATIC IMPORTED)
-#     set_target_properties(fgviewer PROPERTIES IMPORTED_LOCATION
-#             ${FILAMENT_DIR}/lib/${ANDROID_ABI}/libfgviewer.a)
-# endif()
+ if (FILAMENT_ENABLE_FGVIEWER)
+     add_library(fgviewer STATIC IMPORTED)
+     set_target_properties(fgviewer PROPERTIES IMPORTED_LOCATION
+             ${FILAMENT_DIR}/lib/${ANDROID_ABI}/libfgviewer.a)
+ endif()
 
 if (FILAMENT_ENABLE_MATDBG)
     add_library(matdbg STATIC IMPORTED)
@@ -133,8 +131,7 @@ target_link_libraries(filament-jni
     # libgeometry is PUBLIC because gltfio uses it.
     PUBLIC geometry
 
-    # TODO: Uncomment below when fgviewer is ready
-    # $<$<STREQUAL:${FILAMENT_ENABLE_FGVIEWER},ON>:fgviewer>
+    $<$<STREQUAL:${FILAMENT_ENABLE_FGVIEWER},ON>:fgviewer>
     $<$<STREQUAL:${FILAMENT_ENABLE_MATDBG},ON>:matdbg>
     $<$<STREQUAL:${FILAMENT_ENABLE_MATDBG},ON>:filamat>
     $<$<STREQUAL:${FILAMENT_SUPPORTS_VULKAN},ON>:bluevk>

diff --git a/android/gradle.properties b/android/gradle.properties
@@ -30,4 +30,5 @@ com.google.android.filament.abis=all
 #com.google.android.filament.include-webgpu
 
 #com.google.android.filament.matdbg
+#com.google.android.filament.fgviewer
 #com.google.android.filament.matnopt
diff --git a/libs/fgviewer/CMakeLists.txt b/libs/fgviewer/CMakeLists.txt
@@ -26,16 +26,47 @@ set(SRCS
     src/JsonWriter.cpp
 )
 
+# ==================================================================================================
+# Resources
+# ==================================================================================================
+
+set(RESOURCE_DIR ${CMAKE_CURRENT_BINARY_DIR})
+
+set(RESOURCE_BINS
+        ${CMAKE_CURRENT_SOURCE_DIR}/web/api.js
+        ${CMAKE_CURRENT_SOURCE_DIR}/web/app.js
+        ${CMAKE_CURRENT_SOURCE_DIR}/web/index.html
+)
+
+get_resgen_vars(${RESOURCE_DIR} fgviewer_resources)
+
+add_custom_command(
+        OUTPUT ${RESGEN_OUTPUTS}
+        COMMAND resgen -t ${RESGEN_FLAGS} ${RESOURCE_BINS}
+        DEPENDS resgen ${RESOURCE_BINS}
+)
+
+if (DEFINED RESGEN_SOURCE_FLAGS)
+    set_source_files_properties(${RESGEN_SOURCE} PROPERTIES COMPILE_FLAGS ${RESGEN_SOURCE_FLAGS})
+endif()
+
+set(DUMMY_SRC "${RESOURCE_DIR}/dummy.c")
+add_custom_command(OUTPUT ${DUMMY_SRC} COMMAND echo "//" > ${DUMMY_SRC})
+
+add_library(fgviewer_resources ${DUMMY_SRC} ${RESGEN_SOURCE})
+set_target_properties(fgviewer_resources PROPERTIES FOLDER Libs)
+
 # ==================================================================================================
 # Include and target definitions
 # ==================================================================================================
 
-include_directories(${PUBLIC_HDR_DIR})
+include_directories(${PUBLIC_HDR_DIR} ${RESOURCE_DIR})
 
 add_library(${TARGET} STATIC ${PUBLIC_HDRS} ${SRCS})
 
 target_link_libraries(${TARGET} PUBLIC
         civetweb
+        fgviewer_resources
         utils
 )
 
@@ -57,11 +88,12 @@ endif()
 # Installation
 # ==================================================================================================
 
-# matdbg has dependencies on non-installed libraries. Here we bundle them all together into a single
+# fgviewer has dependencies on non-installed libraries. Here we bundle them all together into a single
 # library that gets copied into the installation folder so users are only required to link against
-# matdbg.
+# fgviewer.
 set(FGVIEWER_DEPS
     fgviewer
+    fgviewer_resources
     civetweb
     )
 

diff --git a/libs/fgviewer/src/DebugServer.cpp b/libs/fgviewer/src/DebugServer.cpp
@@ -30,9 +30,26 @@
 
 namespace filament::fgviewer {
 
+// If set to 0, this serves HTML from a resgen resource. Use 1 only during local development, which
+// serves files directly from the source code tree.
+#define SERVE_FROM_SOURCE_TREE 0
+
+#if SERVE_FROM_SOURCE_TREE
 namespace {
 std::string const BASE_URL = "libs/fgviewer/web";
 } // anonymous
+#else
+#include "fgviewer_resources.h"
+#include <unordered_map>
+
+namespace {
+struct Asset {
+    std::string_view mime;
+    std::string_view data;
+};
+std::unordered_map<std::string_view, Asset> ASSET_MAP;
+} // anonymous
+#endif // SERVE_FROM_SOURCE_TREE
 
 using namespace utils;
 
@@ -56,10 +73,21 @@ class FileRequestHandler : public CivetHandler {
             uri = "/index.html";
         }
 
+#if SERVE_FROM_SOURCE_TREE
         if (uri == "/index.html" || uri == "/app.js" || uri == "/api.js") {
             mg_send_file(conn, (BASE_URL + uri).c_str());
             return true;
         }
+#else
+        auto const& asset_itr = ASSET_MAP.find(uri);
+        if (asset_itr != ASSET_MAP.end()) {
+            auto const& mime = asset_itr->second.mime;
+            auto const& data = asset_itr->second.data;
+            mg_printf(conn, kSuccessHeader.data(), mime.data());
+            mg_write(conn, data.data(), data.size());
+            return true;
+        }
+#endif
         slog.e << "[fgviewer] DebugServer: bad request at line " <<  __LINE__ << ": " << uri << io::endl;
         return false;
     }
@@ -68,6 +96,21 @@ class FileRequestHandler : public CivetHandler {
 };
 
 DebugServer::DebugServer(int port) {
+#if !SERVE_FROM_SOURCE_TREE
+    ASSET_MAP["/index.html"] = {
+        .mime = "text/html",
+        .data = {(char const*) FGVIEWER_RESOURCES_INDEX_DATA},
+    };
+    ASSET_MAP["/app.js"] = {
+        .mime = "text/javascript",
+        .data = {(char const*) FGVIEWER_RESOURCES_APP_DATA},
+    };
+    ASSET_MAP["/api.js"] = {
+        .mime = "text/javascript",
+        .data = {(char const*) FGVIEWER_RESOURCES_API_DATA},
+    };
+#endif
+
     // By default the server spawns 50 threads so we override this to 10. According to the civetweb
     // documentation, "it is recommended to use num_threads of at least 5, since browsers often
     /// establish multiple connections to load a single web page, including all linked documents

diff --git a/libs/fgviewer/web/app.js b/libs/fgviewer/web/app.js
@@ -16,7 +16,7 @@
 
 import {LitElement, html, css, unsafeCSS, nothing} from "https://unpkg.com/lit@2.8.0?module";
 
-const kUntitledPlaceholder = "untitled";
+const kUntitledPlaceholder = "Untitled View";
 
 // CSS constants
 const FOREGROUND_COLOR = '#fafafa';