MaterialX in WebGPU

CMakeLists.txt

@@ -72,4 +72,4 @@ if (PXR_BUILD_DOCUMENTATION)
     endif()
 endif()   
 
-pxr_toplevel_epilogue()
+pxr_toplevel_epilogue()

README.md

@@ -16,6 +16,9 @@ It reuses the existing shaders that are converted to SPIR-V by [Shaderc](https:/
 and then WGSL by [Tint](https://dawn.googlesource.com/tint), finally consumed by a browser with WebGPU feature 
 enabled.
 
+Features:
+ - **MaterialX** supported with the WebGPU HdStorm renderer as of 1.39.4 (?).
+
 #### Getting Started with HgiWebGPU
 
 As we worked on a WebGPU based backend, we developed 2 solutions for different scenarios according 
@@ -31,10 +34,15 @@ export HDX_ENABLE_OIT=0
 export HGI_ENABLE_WEBGPU=1
 ```
 
-- **Wasm-based**: It is used for rendering and viewing on a web browser.
+**WebAssembly (Wasm) Examples:**
+- **usdviewweb** : Used for rendering and viewing on a web browser.
 The WebAssembly content can be tested using [usdviewweb](./pxr/usdImaging/bin/usdviewweb/README.md). For running an example on the browser, please follow the instructions [under usdviewweb folder](./pxr/usdImaging/bin/usdviewweb/README.md).
 Please build USD with `--build-target wasm` option. 
 
+- **usdweb** : Example using HdStorm rendering controlled by JavaScript USD commands 
+in a web browser.  See [extras/usd/web/README.md](./extras/usd/web/README.md) for more information.
+
+
 **Limitations**
 
 - OIT is disabled due to missing support of GLSL `atomicAdd` and binding of a 

build_scripts/build_usd.py

@@ -1638,22 +1638,45 @@ def InstallDraco(context, force, buildArgs):
 MATERIALX_URL = "https://github.com/AcademySoftwareFoundation/MaterialX/archive/v1.39.3.zip"
 
 def InstallMaterialX(context, force, buildArgs):
+    if context.targetWasm:
+        # For Wasm WebGPU/WGSL shader generation for MaterialX, 
+        # MaterialX as of 6/9/2025 needs to be used with the 
+        # "WGSL/WebGPU GLSL ShaderGenerator" pull request integrated.
+        # The full MaterialX release with this enhancement should be 
+        # the pending version 1.39.4.
+        global MATERIALX_URL
+        #MATERIALX_URL = 'https://github.com/AcademySoftwareFoundation/MaterialX/archive/8eaf80cf7b6a27c1a7b3eeb8c9bc8872fddb4d60.zip'
+        MATERIALX_URL = 'https://github.com/scotbrew/MaterialX/archive/refs/heads/brews/feature/wgsl_texsampler_code_replace.zip'
     with CurrentWorkingDirectory(DownloadURL(MATERIALX_URL, context, force)):
         cmakeOptions = ['-DMATERIALX_BUILD_SHARED_LIBS=ON',
-                        '-DMATERIALX_BUILD_TESTS=OFF'
+                        '-DMATERIALX_BUILD_TESTS=OFF',
         ]
 
         if context.targetWasm:
             cmakeOptions.extend([
-                '-DCMAKE_CXX_FLAGS="' + EMSCRIPTEN_CMAKE_CXX_FLAGS + '"',
-                '-DCMAKE_C_FLAGS="'+ EMSCRIPTEN_CMAKE_CXX_FLAGS + ' "',
-                '-DCMAKE_EXE_LINKER_FLAGS="' + EMSCRIPTEN_CMAKE_EXE_LINKER_FLAGS + '"',
+                 # For Wasm
+                '-DCMAKE_CXX_FLAGS="' + EMSCRIPTEN_CMAKE_CXX_FLAGS + '"', # removed:  + ' -s SIDE_MODULE=1"',
+                '-DCMAKE_C_FLAGS="'   + EMSCRIPTEN_CMAKE_CXX_FLAGS + '"', # removed:  + ' -s SIDE_MODULE=1"',
+                '-DCMAKE_EXE_LINKER_FLAGS="' + EMSCRIPTEN_CMAKE_EXE_LINKER_FLAGS + ' -s MAIN_MODULE=1"',
+                '-DBUILD_SHARED_LIBS=OFF',
+                # MaterialX config
                 '-DMATERIALX_BUILD_JS=OFF', # We don't need the js bindings
                 '-DMATERIALX_BUILD_TESTS=OFF',
                 '-DMATERIALX_BUILD_RENDER=ON',
                 '-DMATERIALX_BUILD_RENDER_PLATFORMS=OFF',
                 '-DMATERIALX_BUILD_GEN_OSL=OFF',
-                '-DMATERIALX_BUILD_GEN_MDL=OFF'])
+                '-DMATERIALX_BUILD_GEN_MDL=OFF',
+                '-DMATERIALX_BUILD_GEN_GLSL=ON',
+                '-DMATERIALX_BUILD_GEN_MSL=OFF',
+                ])
+            # MaterialX/source/MaterialXRenderGlsl/CMakeLists.txt will error if compiling 
+            # on MacOS and APPLE=ON is not set.
+            # Consider change to MaterialX to move find_package(OpenGL REQUIRED) outside of the platform
+            # if(APPLE/UNIX) block
+            # Note: USD requires -DMATERIALX_BUILD_RENDER=ON tools for materialXFilter.cpp
+            #       so we cannot just disable that compiler flag.
+            if MacOS():
+                cmakeOptions.append('-DAPPLE=ON')
 
 
         elif MacOSTargetEmbedded(context):
@@ -2164,6 +2187,9 @@ def InstallUSD(context, force, buildArgs):
 
         if context.buildMaterialX:
             extraArgs.append('-DPXR_ENABLE_MATERIALX_SUPPORT=ON')
+            if context.targetWasm:
+                # build is failing without this being set
+                extraArgs.append(f'-DMaterialX_DIR="{context.instDir}/lib/cmake/MaterialX"')
         else:
             extraArgs.append('-DPXR_ENABLE_MATERIALX_SUPPORT=OFF')
 
@@ -2190,6 +2216,7 @@ def InstallUSD(context, force, buildArgs):
         extraArgs += buildArgs
 
         if context.targetWasm:
+            extraArgs.append('-DPXR_ENABLE_METAL_SUPPORT=OFF')
 
             if context.buildJsBindings:
                 extraArgs.append('-DPXR_ENABLE_JS_BINDINGS_SUPPORT=ON')
@@ -2394,15 +2421,6 @@ def InstallUSD(context, force, buildArgs):
                        help=("Enable code signing for macOS builds "
                              "(defaults to enabled on Apple Silicon)"))
 
-group.add_argument("--webgpu", dest="buildWebGPU", action="store_true",
-                    help="Build WebGPU Hgi")
-
-subgroup = group.add_mutually_exclusive_group()
-subgroup.add_argument("--js-bindings", dest="buildJsBindings", action="store_true",
-                    default=True, help="Build with JavaScript bindings")
-subgroup.add_argument("--no-js-bindings", dest="buildJsBindings", action="store_false",
-                    help="Do not build with JavaScript bindings")
-
 if Linux():
     group.add_argument("--use-cxx11-abi", type=int, choices=[0, 1],
                        help=("Use C++11 ABI for libstdc++. (see docs above)"))
@@ -2632,6 +2650,15 @@ def InstallUSD(context, force, buildArgs):
                       dest="build_animx_tests", action="store_false",
                       help="Do not build AnimX spline tests (default)")
 
+group = parser.add_argument_group(title="Web")
+group.add_argument("--webgpu", dest="buildWebGPU", action="store_true",
+                    help="Build WebGPU Hgi")
+subgroup = group.add_mutually_exclusive_group()
+subgroup.add_argument("--js-bindings", dest="buildJsBindings", action="store_true",
+                    default=True, help="Build with JavaScript bindings")
+subgroup.add_argument("--no-js-bindings", dest="buildJsBindings", action="store_false",
+                    help="Do not build with JavaScript bindings")
+
 args = parser.parse_args()
 
 class InstallContext:
@@ -2712,7 +2739,7 @@ def __init__(self, args):
 
         self.ignorePaths = args.ignore_paths or []
         # Build target and code signing
-        self.targetWasm = (args.build_target == TARGET_WASM or args.build_target == TARGET_WASM_NODE or args.build_target == TARGET_WASM64)
+        self.targetWasm = ( args.build_target in (TARGET_WASM, TARGET_WASM_NODE, TARGET_WASM64) ) # bool
         self.targetWasm64 = (args.build_target == TARGET_WASM64)
 
         self.targetWasmNode = (args.build_target == TARGET_WASM_NODE)
@@ -3163,11 +3190,13 @@ def _JoinVersion(v):
       AnimX Tests:              {buildAnimXTests}
     Examples                    {buildExamples}
     Tutorials                   {buildTutorials}
-    WebGPU                      {buildWebGPU}
     Tools                       {buildTools}
     Alembic Plugin              {buildAlembic}
       HDF5 support:             {enableHDF5}
     Draco Plugin                {buildDraco}
+    Web
+      Javascript Bindings       {buildJsBindings}
+      WebGPU                    {buildWebGPU}
 
   Dependencies                  {dependencies}"""
 

cmake/defaults/Options.cmake

@@ -29,6 +29,9 @@ option(PXR_BUILD_PYTHON_DOCUMENTATION "Generate Python documentation" OFF)
 option(PXR_BUILD_HTML_DOCUMENTATION "Generate HTML documentation if PXR_BUILD_DOCUMENTATION is ON" ON)
 option(PXR_ENABLE_PYTHON_SUPPORT "Enable Python based components for USD" ON)
 option(PXR_ENABLE_JS_BINDINGS_SUPPORT "Enable Javascript bindings for USD" ON)
+option(PXR_BUILD_JS_USDWEB "[Experimental] Build extras/usd/web " ON)
+option(PXR_BUILD_JS_STANDALONE "[Experimental] Build extras/usd/js_bindings" ON)
+option(PXR_BUILD_JS_USDVIEWWEB "[Experimental] Build pxr/usdImaging/bin/usdviewweb" ON)
 if (NOT EMSCRIPTEN)
     set(PXR_ENABLE_JS_BINDINGS_SUPPORT OFF)
 endif()
@@ -187,6 +190,31 @@ message(STATUS
     set(PXR_ENABLE_WEBGPU_SUPPORT "ON" CACHE BOOL "" FORCE)
 endif()
 
+if (${PXR_BUILD_JS_STANDALONE})
+    if (NOT ${PXR_ENABLE_JS_BINDINGS_SUPPORT})
+        message(STATUS
+            "Setting PXR_BUILD_JS_STANDALONE=OFF because "
+            "PXR_ENABLE_JS_BINDINGS_SUPPORT=OFF")
+        set(PXR_BUILD_JS_STANDALONE "OFF" CACHE BOOL "" FORCE)
+    endif()
+endif()
+if (${PXR_BUILD_JS_USDWEB})
+    if (NOT ${PXR_ENABLE_WEBGPU_SUPPORT})
+        message(STATUS
+            "Setting PXR_BUILD_JS_USDWEB=OFF because "
+            "PXR_ENABLE_WEBGPU_SUPPORT=OFF")
+        set(PXR_BUILD_JS_USDWEB "OFF" CACHE BOOL "" FORCE)
+    endif()
+endif()
+if (${PXR_BUILD_JS_USDVIEWWEB})
+    if (NOT ${PXR_ENABLE_WEBGPU_SUPPORT})
+        message(STATUS
+            "Setting PXR_BUILD_JS_USDVIEWWEB=OFF because "
+            "PXR_ENABLE_WEBGPU_SUPPORT=OFF")
+        set(PXR_BUILD_JS_USDVIEWWEB "OFF" CACHE BOOL "" FORCE)
+    endif()
+endif()
+
 if (${PXR_ENABLE_GL_SUPPORT} OR ${PXR_ENABLE_METAL_SUPPORT} OR ${PXR_ENABLE_VULKAN_SUPPORT} OR ${PXR_ENABLE_WEBGPU_SUPPORT})
     set(PXR_BUILD_GPU_SUPPORT "ON")
 else()

extras/usd/CMakeLists.txt

@@ -4,6 +4,9 @@ endif()
 if (PXR_BUILD_EXAMPLES)
     add_subdirectory(examples)
 endif()
-if (PXR_ENABLE_JS_BINDINGS_SUPPORT)
+if (PXR_BUILD_JS_STANDALONE)
   add_subdirectory(js_bindings)
 endif()
+if (PXR_BUILD_JS_USDWEB)
+  add_subdirectory(web)
+endif()

extras/usd/js_bindings/CMakeLists.txt

@@ -50,6 +50,11 @@ install(
 )
 # Install files for npm package
 
+# ================
+# REVISIT: This install DESTINATION appears to be cluttering the source folders
+#     Resulting and intermediate files should go into the target build folders
+#     under ${CMAKE_INSTALL_PREFIX}
+# ================
 install(
     FILES
       ${BUILD_FILES}

extras/usd/web/CMakeLists.txt

@@ -0,0 +1,161 @@
+set(PXR_PREFIX pxr/usdweb)
+set(PXR_PACKAGE usdweb)
+
+pxr_cpp_bin(${PXR_PACKAGE}
+    LIBRARIES
+        usdImagingGL
+        hdStorm
+        usdShaders
+        usdUtils
+        hdSt
+        usdMtlx
+        sdrGlslfx
+
+    INCLUDE_DIRS
+        ${TBB_INCLUDE_DIRS}
+
+    PRIVATE_CLASSES
+        debugCodes
+)
+
+set(APP_CPPFILES
+    usdweb.cpp
+    freeCameraGL.cpp
+)
+
+set(ICON_FILES
+    USDLogoUnsized.svg
+)
+
+file(GLOB ASSET_FILES "assets/*.usd*" "assets/*.png" "assets/*.exr")
+
+# ==============================
+# EMSCRIPTEN_USE_CONTRIB_GLFW
+# This feature is a WIP (work in progress)
+# It can be enabled by adding -DEMSCRIPTEN_USE_CONTRIB_GLFW3=ON
+#
+# Sample build setup:
+#     build_scripts/build_usd.py --cmake-build-args "-DEMSCRIPTEN_USE_CONTRIB_GLFW3=ON"
+#
+# ==============================
+
+if (EMSCRIPTEN)
+
+    # Determine which GLFW3 to use through Emscripten
+    if (EMSCRIPTEN_USE_CONTRIB_GLFW3)
+        set(EMSCRIPTEN_GLFW_BUILD_FLAGS "--use-port=contrib.glfw3 -DEMSCRIPTEN_USE_CONTRIB_GLFW3")
+    else()
+        set(EMSCRIPTEN_GLFW_BUILD_FLAGS "-s USE_GLFW=3")
+    endif()
+
+    list(APPEND RESOURCE_PARAMETERS "--preload-file ${PROJECT_BINARY_DIR}/plugins_plugInfo.json@/usd/plugInfo.json")
+    list(APPEND RESOURCE_PARAMETERS "--preload-file ${PROJECT_BINARY_DIR}/plugins_plugInfo.json@/plugin/usd/plugInfo.json")
+
+    # TODO: Add in MaterialX to the RESOURCE_PARAMETERS for target_link_options or target_link_libraries
+
+    # XXX: We manually set the libraries instead of using the LIBRARIES argument pxr_cpp_bin due to
+    # problems with the tbb library.
+    target_link_libraries(${PXR_PACKAGE}
+            ${RESOURCE_PARAMETERS}
+            ${TBB_tbb_LIBRARY}
+    )
+    set(BUILD_FILES
+            ${CMAKE_CURRENT_BINARY_DIR}/${PXR_PACKAGE}.js
+            ${CMAKE_CURRENT_BINARY_DIR}/${PXR_PACKAGE}.wasm
+            ${CMAKE_CURRENT_BINARY_DIR}/${PXR_PACKAGE}.data
+            ${CMAKE_CURRENT_SOURCE_DIR}/scripts/wasm-server.py
+            ${CMAKE_CURRENT_SOURCE_DIR}/${PXR_PACKAGE}.html
+        )
+
+    set(CMAKE_EXE_LINKER_FLAGS_USDVIEWWEB " --tracing ${DEBUG_OPTIONS} \
+        ${EMSCRIPTEN_GLFW_BUILD_FLAGS} -pthread   \
+        -s ENVIRONMENT=web,worker \
+        -s MAXIMUM_MEMORY=4GB \
+        -s PTHREAD_POOL_SIZE=8 \
+        -s WASM_BIGINT \
+        -s NO_EXIT_RUNTIME=1 \
+        -s SHARED_MEMORY=1 \
+    ")
+    if(PXR_WASM_NODE)
+        target_link_options(${PXR_PACKAGE} PRIVATE "SHELL:-s NODERAWFS=0")
+    endif ()
+    if (PXR_ENABLE_JS_BINDINGS_SUPPORT)
+        set(CMAKE_EXE_LINKER_FLAGS_USDVIEWWEB "${CMAKE_EXE_LINKER_FLAGS_USDVIEWWEB} --bind")
+    endif()
+
+    # GLFW OPTIONS
+    #   -s USE_GLFW=3             This is the older Javascript version of GLFW, hardcoded to Module["canvas"]
+    #   --use-port=contrib.glfw3  This is more modern, supports multiple windows, and is faster
+    #                             It is an Emscripten port of GLFW written in C++ for the web/wasm
+    #                             platform.  It currently supports GLFW API 3.4.
+    #                             See  https://github.com/pongasoft/emscripten-glfw
+    #                             It is referred to in https://emscripten.org/docs/compiling/Contrib-Ports.html
+    # If using --use-port=contrib.glfw3, consider:
+    #       disableWebGL2
+    #
+    # Taking out: -s FULL_ES3 \
+    #             -s USE_WEBGPU=1 \   (since now using Dawn)
+    target_link_options(${PXR_PACKAGE} PRIVATE "SHELL:${CMAKE_EXE_LINKER_FLAGS_USDVIEWWEB} \
+        ${EMSCRIPTEN_GLFW_BUILD_FLAGS} -pthread   \
+        -s MAX_WEBGL_VERSION=2 \
+        -O0 \
+        -s ALLOW_MEMORY_GROWTH \
+    ")
+
+    # Add the following to the local web filesystem
+    #   * /webgpu-env-settings
+    #   * /libraries/           Required for MaterialX
+    #
+    # Note that -pthread automatically sets -mbulk-memory -matomics and SHARED_ARRAY_BUFFER
+    #
+    target_compile_options(${PXR_PACKAGE} PRIVATE "SHELL:${CMAKE_EXE_LINKER_FLAGS_USDVIEWWEB} ${EMSCRIPTEN_GLFW_BUILD_FLAGS} -pthread  -sMODULARIZE=0 -O0")
+    target_link_options(${PXR_PACKAGE} PRIVATE "SHELL: \
+        ${EMSCRIPTEN_GLFW_BUILD_FLAGS} -pthread   \
+        --preload-file ${CMAKE_CURRENT_SOURCE_DIR}/resources/webgpu-env-settings@/webgpu-env-settings \
+        --embed-file ${CMAKE_INSTALL_PREFIX}/libraries@/libraries/ \
+        --pre-js ${CMAKE_CURRENT_SOURCE_DIR}/resources/preload.js \ 
+        --profiling-funcs \
+        ")
+
+    if(CMAKE_BUILD_TYPE MATCHES "(Debug|DEBUG|debug|RelWithDebInfo|RELWITHDEBINFO|relwithdebinfo)")
+        message("Building with debug information")
+        # See https://developer.chrome.com/blog/faster-wasm-debugging#debug_fission
+        # Note: -g is set automatically so we're just adding some additional flags
+        target_link_options(${PXR_PACKAGE} PRIVATE "SHELL: -gseparate-dwarf -s ERROR_ON_WASM_CHANGES_AFTER_LINK")
+        target_compile_options(${PXR_PACKAGE} PRIVATE "SHELL: -gdwarf-5 -gsplit-dwarf -gpubnames")
+        add_custom_command(
+                TARGET ${PXR_PACKAGE}
+                POST_BUILD
+                COMMAND emstrip --no-strip-all --remove-section=name ${CMAKE_CURRENT_BINARY_DIR}/${PXR_PACKAGE}.wasm && emdwp -e ${CMAKE_CURRENT_BINARY_DIR}/${PXR_PACKAGE}.wasm.debug.wasm -o ${CMAKE_CURRENT_BINARY_DIR}/${PXR_PACKAGE}.wasm.debug.wasm.dwp
+                COMMENT "Currently reduces the debug build from 332M to 85M while keeping debug information in separate files"
+        )
+        list(APPEND
+                BUILD_FILES
+                ${CMAKE_CURRENT_BINARY_DIR}/${PXR_PACKAGE}.wasm.debug.wasm
+        )
+    endif()
+
+    install(
+        FILES
+        ${BUILD_FILES}
+        DESTINATION ${CMAKE_INSTALL_PREFIX}/bin
+    )
+endif()
+
+# Install icon files to the bin directory
+install(
+    FILES
+    ${ICON_FILES}
+    DESTINATION ${CMAKE_INSTALL_PREFIX}/bin
+)
+
+# Install asset files to the bin/assets directory
+install(
+    FILES
+    ${ASSET_FILES}
+    DESTINATION ${CMAKE_INSTALL_PREFIX}/bin/assets
+)
+
+target_sources(${PXR_PACKAGE} PRIVATE
+    ${APP_CPPFILES}
+)