Canvas plugin

.github/jobs/test_install_win32.yml

@@ -41,7 +41,6 @@ jobs:
 
       # BGFX_CONFIG_MAX_FRAME_BUFFERS is set so enough Framebuffers are available before V8 starts disposing unused ones
       - script: |
-          # BGFX_CONFIG_MAX_FRAME_BUFFERS is set so enough Framebuffers are available before V8 starts disposing unused ones
           cmake -G "Visual Studio 17 2022" -B build${{ variables.solutionName }} -A ${{ parameters.platform }} ${{ variables.jsEngineDefine }} -D BX_CONFIG_DEBUG=ON -D GRAPHICS_API=${{ parameters.graphics_api }} -D CMAKE_UNITY_BUILD=$(UNITY_BUILD) -D BGFX_CONFIG_MAX_FRAME_BUFFERS=256 -D BABYLON_DEBUG_TRACE=ON
         displayName: 'Generate ${{ variables.solutionName }} solution'
 

Apps/Playground/Scripts/config.json

@@ -1,6 +1,13 @@
 {
     "root": "https://cdn.babylonjs.com",
     "tests": [
+        {
+            "title": "Native Canvas",
+            "playgroundId": "#TKVFSA#2",
+            "referenceImage": "native-canvas.png",
+            "excludedGraphicsApis": [ "D3D12" ],
+            "comment": "2D Path not rendered with D3D12"
+        },
         {
             "title": "EXR Loader",
             "playgroundId": "#4RN0VF#151",
@@ -129,7 +136,7 @@
             "title": "Dynamic Texture context clip",
             "playgroundId": "#FU0ES5#47",
             "referenceImage": "dynamicTextureClip.png",
-            "excludedGraphicsApis": ["D3D12" ],
+            "excludedGraphicsApis": [ "D3D12" ],
             "comment": "D3D12/CI: Incorrect rendering of clipped texture"
         },
         {

CMakeLists.txt

@@ -186,6 +186,6 @@ if(BABYLON_NATIVE_BUILD_APPS)
 endif()
 
 # no install for glslang compiled for shaderc
-if(BABYLON_NATIVE_INSTALL AND NOT BGFX_BUILD_TOOLS)
+if(BABYLON_NATIVE_INSTALL)
     include(Install/Install.cmake)
 endif()

Polyfills/Canvas/CMakeLists.txt

@@ -1,124 +1,48 @@
+include(${CMAKE_CURRENT_LIST_DIR}/shaderc.cmake)
 
-function(add_bgfx_shader FILE FOLDER)
-    get_filename_component(FILENAME "${FILE}" NAME_WE)
-    string(SUBSTRING "${FILENAME}" 0 2 TYPE)
-    if("${TYPE}" STREQUAL "fs")
-        set(TYPE "FRAGMENT")
-    elseif("${TYPE}" STREQUAL "vs")
-        set(TYPE "VERTEX")
-    elseif("${TYPE}" STREQUAL "cs")
-        set(TYPE "COMPUTE")
-    else()
-        set(TYPE "")
-    endif()
-
-    if(NOT "${TYPE}" STREQUAL "")
-        set(COMMON FILE ${FILE} ${TYPE} INCLUDES ${CMAKE_CURRENT_SOURCE_DIR}/Source/Shaders ${BGFX_DIR}/src)
-        set(OUTPUTS "")
-        set(OUTPUTS_PRETTY "")
-
-        # dx11
-        set(DX11_OUTPUT ${CMAKE_CURRENT_SOURCE_DIR}/Source/Shaders/dx11/${FILENAME}.h)
-        if(NOT "${TYPE}" STREQUAL "COMPUTE")
-            _bgfx_shaderc_parse(
-                DX11 ${COMMON} WINDOWS
-                PROFILE s_5_0
-                O 3
-                OUTPUT ${DX11_OUTPUT}
-                BIN2C "${FILENAME}_dx11"
-            )
-        else()
-            _bgfx_shaderc_parse(
-                DX11 ${COMMON} WINDOWS
-                PROFILE s_5_0
-                O 1
-                OUTPUT ${DX11_OUTPUT}
-                BIN2C "${FILENAME}_dx11"
-            )
-        endif()
-        list(APPEND OUTPUTS "DX11")
-        set(OUTPUTS_PRETTY "${OUTPUTS_PRETTY}DX11, ")
-
-        # metal
-        set(METAL_OUTPUT ${CMAKE_CURRENT_SOURCE_DIR}/Source/Shaders/metal/${FILENAME}.h)
-        _bgfx_shaderc_parse(METAL ${COMMON} OSX PROFILE metal OUTPUT ${METAL_OUTPUT} BIN2C "${FILENAME}_mtl")
-        list(APPEND OUTPUTS "METAL")
-        set(OUTPUTS_PRETTY "${OUTPUTS_PRETTY}Metal, ")
-
-        # essl
-        if(NOT "${TYPE}" STREQUAL "COMPUTE")
-            set(ESSL_OUTPUT ${CMAKE_CURRENT_SOURCE_DIR}/Source/Shaders/essl/${FILENAME}.h)
-            _bgfx_shaderc_parse(ESSL ${COMMON} ANDROID PROFILE 100_es OUTPUT ${ESSL_OUTPUT} BIN2C "${FILENAME}_essl")
-            list(APPEND OUTPUTS "ESSL")
-            set(OUTPUTS_PRETTY "${OUTPUTS_PRETTY}ESSL, ")
-        endif()
-
-        # glsl
-        set(GLSL_OUTPUT ${CMAKE_CURRENT_SOURCE_DIR}/Source/Shaders/glsl/${FILENAME}.h)
-        if(NOT "${TYPE}" STREQUAL "COMPUTE")
-            _bgfx_shaderc_parse(GLSL ${COMMON} LINUX PROFILE 140 OUTPUT ${GLSL_OUTPUT} BIN2C "${FILENAME}_glsl")
-        else()
-            _bgfx_shaderc_parse(GLSL ${COMMON} LINUX PROFILE 430 OUTPUT ${GLSL_OUTPUT} BIN2C "${FILENAME}_glsl")
-        endif()
-        list(APPEND OUTPUTS "GLSL")
-        set(OUTPUTS_PRETTY "${OUTPUTS_PRETTY}GLSL, ")
-
-        # spirv
-        if(NOT "${TYPE}" STREQUAL "COMPUTE")
-            set(SPIRV_OUTPUT ${CMAKE_CURRENT_SOURCE_DIR}/Source/Shaders/spirv/${FILENAME}.h)
-            _bgfx_shaderc_parse(SPIRV ${COMMON} LINUX PROFILE spirv OUTPUT ${SPIRV_OUTPUT} BIN2C "${FILENAME}_spv")
-            list(APPEND OUTPUTS "SPIRV")
-            set(OUTPUTS_PRETTY "${OUTPUTS_PRETTY}SPIRV")
-            set(OUTPUT_FILES "")
-            set(COMMANDS "")
-        endif()
-
-        foreach(OUT ${OUTPUTS})
-            list(APPEND OUTPUT_FILES ${${OUT}_OUTPUT})
-            list(APPEND COMMANDS COMMAND "bgfx::shaderc" ${${OUT}})
-            get_filename_component(OUT_DIR ${${OUT}_OUTPUT} DIRECTORY)
-            file(MAKE_DIRECTORY ${OUT_DIR})
-        endforeach()
-
-        file(RELATIVE_PATH PRINT_NAME ${CMAKE_CURRENT_SOURCE_DIR}/Source/Shaders ${FILE})
-        add_custom_command(
-            MAIN_DEPENDENCY ${FILE} OUTPUT ${OUTPUT_FILES} ${COMMANDS}
-            COMMENT "Compiling shader ${PRINT_NAME} for ${OUTPUTS_PRETTY}"
-        )
-    endif()
-endfunction()
+if(NOT IOS AND NOT VISIONOS AND NOT ANDROID)
+    set(SHADERC_PATH "" CACHE FILEPATH "Optional full path to shaderc built from bgfx.")
+endif()
 
 set(SOURCES
     "Include/Babylon/Polyfills/Canvas.h"
     "Source/Canvas.cpp"
     "Source/Canvas.h"
     "Source/Colors.h"
+    "Source/FrameBufferPool.cpp"
+    "Source/FrameBufferPool.h"
     "Source/Image.cpp"
     "Source/Image.h"
     "Source/ImageData.cpp"
     "Source/ImageData.h"
+    "Source/Path2D.cpp"
+    "Source/Path2D.h"
+    "Source/LineCaps.h"
     "Source/Context.cpp"
     "Source/Context.h"
     "Source/MeasureText.cpp"
     "Source/MeasureText.h"
-    "Source/nanovg_babylon.cpp"
-    "Source/nanovg_babylon.h"
+    "Source/Gradient.cpp"
+    "Source/Gradient.h"
+    "Source/Font.cpp"
+    "Source/Font.h"
+    "Source/nanosvg.h"
+    "Source/nanovg/nanovg.cpp"
+    "Source/nanovg/nanovg.h"
+    "Source/nanovg/nanovg_babylon.cpp"
+    "Source/nanovg/nanovg_babylon.h"
+    "Source/nanovg/nanovg_filterstack.cpp"
+    "Source/nanovg/nanovg_filterstack.h"
     )
 
 file(GLOB SHADERS "Source/Shaders/*.sc" "Source/Shaders/*.sh")
 
-file(GLOB FONT_SOURCES ${BGFX_DIR}/examples/common/font/*.cpp)
-file(GLOB NANOVG_SOURCES ${BGFX_DIR}/examples/common/nanovg/nanovg.cpp)
-set(ATLAS_SOURCES ${BGFX_DIR}/examples/common/cube_atlas.cpp)
-
-add_library(Canvas ${SOURCES} ${FONT_SOURCES} ${ATLAS_SOURCES} ${NANOVG_SOURCES} ${SHADERS})
+add_library(Canvas ${SOURCES} ${SHADERS})
 
 target_include_directories(Canvas
     PUBLIC "Include"
     PRIVATE "Source"
-    PRIVATE "${BGFX_DIR}/3rdparty"
-    PRIVATE "${BGFX_DIR}/examples/common"
-    PRIVATE "${BGFX_DIR}/examples/common/nanovg")
+    PRIVATE "${BGFX_DIR}/3rdparty")
 
 target_link_libraries(Canvas
     PUBLIC napi
@@ -130,17 +54,20 @@ target_link_libraries(Canvas
     PRIVATE UrlLib
     PRIVATE base-n)
 
-if(BGFX_BUILD_TOOLS AND BGFX_BUILD_TOOLS_SHADER)
-    if(NOT IOS AND NOT VISIONOS AND NOT ANDROID)
-        foreach(SHADER ${SHADERS})
-            add_bgfx_shader(${SHADER} "")
-        endforeach()
+if(SHADERC_PATH AND NOT IOS AND NOT VISIONOS AND NOT ANDROID)
+    if(EXISTS "${SHADERC_PATH}")
+        message(STATUS "Using shaderc from: ${SHADERC_PATH}")
+    else()
+        message(FATAL_ERROR " '${SHADERC_PATH}' does not exist.")
     endif()
-    add_dependencies(Canvas shaderc)
+
+    foreach(SHADER ${SHADERS})
+        add_bgfx_shader(${SHADER} "")
+    endforeach()
 endif()
 
 set_property(TARGET Canvas PROPERTY FOLDER Polyfills)
 source_group(TREE ${CMAKE_CURRENT_SOURCE_DIR} FILES ${SOURCES})
-source_group("3rd party Sources" ${CMAKE_CURRENT_SOURCE_DIR} FILES ${FONT_SOURCES} ${NANOVG_SOURCES} ${ATLAS_SOURCES})
+source_group("3rd party Sources" ${CMAKE_CURRENT_SOURCE_DIR} FILES ${FONT_SOURCES} ${ATLAS_SOURCES})
 source_group("Shaders" ${CMAKE_CURRENT_SOURCE_DIR} FILES ${SHADERS})
-target_compile_definitions(Canvas PRIVATE _CRT_SECURE_NO_WARNINGS)
+target_compile_definitions(Canvas PRIVATE _CRT_SECURE_NO_WARNINGS)

Polyfills/Canvas/Readme.md

@@ -1,24 +1,29 @@
 # Canvas
 Implements parts of the 2D Canvas API using bgfx. Still a very early WIP; many methods are not yet implemented.
 
+# Nanovg
+This project contains a fork of Nanovg code and shaders found in bgfx repo. This fork features new filters stack to allow shadow, blur to be enabled in nanovg rendering (nanovg_filterstack.*).
+Also, the rendering backend of Nanovg is defined in nanovg_babylon.*. It implements nanovg rendering using bgfx with an extension to allow blending of 2 textures (used for gradient mixing) whereas default implementation only allow 1 texture. Shaders are modified accordingly.
+
 # Nanovg Shader Integration in Babylon.js
 Nanovg utilizes shaders that are independent of Babylon.js. These shaders are written in the bgfx shading language, which is derived from GLSL, and are compiled into various target languages (SPIR-V, GLSL, Metal, DX, ESSL) during the build process.
 
 ## Precompiled Shaders:
 
-A precompiled version of the shaders is provided, eliminating the need to compile shaderc and individual shaders with each application build. This saves time, as shaderc compilation can be time-consuming.
+A set of precompiled shaders is included, so you don’t need to build shaderc or recompile individual shaders every time you build the application. This significantly reduces build time, since compiling shaders with shaderc can be quite slow.
 
-## Shader Modification:
+## Shader Modification and Compilation
 
-To modify Canvas shaders, enable the CMake options `BGFX_BUILD_TOOLS` and `BGFX_BUILD_TOOLS_SHADER`.
-CMake script will add custom steps to build .sc shader files with shaderc executable in that case.
-Make the necessary shader changes and build the Canvas polyfill. The shader cache will be automatically generated.
-Revert the CMake flags after the modifications are complete. The Playground can then be run with the updated shaders.
+If you modify any shader, you’ll need shaderc — the bgfx shader compiler — to rebuild them. Shaderc can generate shaders targeting MSL, GLSL, HLSL, or SPIR-V.
 
-## Shader Compilation:
+To obtain shaderc:
+- Clone bgfx.cmake and generate and build the project 
+  Or follow these instructions: https://bkaradzic.github.io/bgfx/build.html
+- Once built, locate the `shaderc` executable in the output directory.
+- Set the full path to this executable in CMake using the variable `SHADERC_PATH`.
 
-The current forks of glslang in bgfx and BabylonNative make it challenging to consolidate into a single version.
-The shader pipeline is currently specific to Canvas. If needed for other projects, a more generic solution will be required.
+If `SHADERC_PATH` is set but does not point to a valid executable, CMake will display a fatal error during project generation.
+When correctly configured, the BabylonNative project will automatically use shaderc to compile all .sc shader files.
 
 ## Embedding Shaders: