Canvas test

.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 -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/experience.js

@@ -21,7 +21,7 @@ const imageTracking = false;
 const readPixels = false;
 
 function CreateBoxAsync(scene) {
-    BABYLON.Mesh.CreateBox("box1", 0.2, scene);
+    //BABYLON.Mesh.CreateBox("box1", 0.2, scene);
     return Promise.resolve();
 }
 
@@ -64,6 +64,202 @@ CreateBoxAsync(scene).then(function () {
 //BABYLON.SceneLoader.AppendAsync("https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/ClearCoatTest/glTF/ClearCoatTest.gltf").then(function () {
     BABYLON.Tools.Log("Loaded");
 
+    var textureGround;
+
+    BABYLON.Tools.LoadFile("https://raw.githubusercontent.com/CedricGuillemet/dump/master/droidsans.ttf", (data) => {
+        _native.Canvas.loadTTFAsync("droidsans", data).then(function () {
+            var ground = BABYLON.MeshBuilder.CreateGround("ground1", { width: 0.5, height: 0.5, subdivisions: 2 }, scene);
+            ground.rotation.x = -Math.PI * 0.5;
+            ground.rotation.y = Math.PI;
+
+            var texSize = 512;
+            var dynamicTexture = new BABYLON.DynamicTexture("dynamic texture", texSize, scene);
+
+            var materialGround = new BABYLON.StandardMaterial("Mat", scene);
+            materialGround.diffuseTexture = dynamicTexture;
+            ground.material = materialGround;
+            materialGround.backFaceCulling = false;
+            dynamicTexture.clear();
+            var context = dynamicTexture.getContext();
+
+            // Text with gradient
+            const gradientText = context.createLinearGradient(0, 0, 256, 0);
+            gradientText.addColorStop(0, "magenta");
+            gradientText.addColorStop(0.5, "blue");
+            gradientText.addColorStop(1.0, "red");
+
+            // gradient
+            let gradient = context.createLinearGradient(0, 0, 200, 0);
+            gradient.addColorStop(0, "green");
+            gradient.addColorStop(0.7, "white");
+            gradient.addColorStop(1, "pink");
+
+            var t = 0;
+            scene.onBeforeRenderObservable.add(() => {
+                // animated shape
+                context.save();
+                context.fillStyle = "DarkRed";
+                context.fillRect(0, 0, texSize, texSize);
+                const left = 0;
+                const top = texSize - (texSize * 0.25);
+                const width = 0.25 * texSize;
+                const height = 0.25 * texSize;
+                const offsetU = ((Math.sin(t) * 0.5) + 0.5) * (texSize - (texSize * 0.25));
+                const offsetV = ((Math.sin(t) * 0.5) + 0.5) * (-texSize + (texSize * 0.25));
+                const rectangleU = width * 0.5 + left;
+                const rectangleV = height * 0.5 + top;
+                context.translate(rectangleU + offsetU, rectangleV + offsetV);
+                context.rotate(t);
+                context.fillStyle = "DarkOrange";
+                context.transform(1, t, 0.8, 1, 0, 0);
+                context.fillRect(-width * 0.5, -height * 0.5, width, height);
+                context.restore();
+
+                // curve
+                context.beginPath();
+                context.moveTo(75 * 2, 25 * 2);
+                context.quadraticCurveTo(25 * 2, 25 * 2, 25 * 2, 62.5 * 2);
+                context.quadraticCurveTo(25 * 2, 100 * 2, 50 * 2, 100 * 2);
+                context.quadraticCurveTo(50 * 2, 120 * 2, 30 * 2, 125 * 2);
+                context.quadraticCurveTo(60 * 2, 120 * 2, 65 * 2, 100 * 2);
+                context.quadraticCurveTo(125 * 2, 100 * 2, 125 * 2, 62.5 * 2);
+                context.quadraticCurveTo(125 * 2, 25 * 2, 75 * 2, 25 * 2);
+                context.fillStyle = "blue";
+                context.fill();
+
+                // text
+                var scale = Math.sin(t) * 0.5 + 0.54;
+                context.save();
+                context.translate(Math.cos(t) * 100, 246);
+                context.font = `bold ${scale * 200}px monospace`;
+                context.strokeStyle = "Green";
+                context.lineWidth = scale * 16;
+                context.strokeText("BabylonNative", 0, 0);
+                context.fillStyle = "White";
+                context.fillText("BabylonNative", 0, 0);
+                context.restore();
+
+                // Draw guides
+                context.strokeStyle = "#09f";
+                context.beginPath();
+                context.moveTo(10, 10);
+                context.lineTo(140, 10);
+                context.moveTo(10, 140);
+                context.lineTo(140, 140);
+                context.stroke();
+
+                // filter blur text
+                context.filter = "blur(1.25px)";
+                context.fillStyle = "White";
+                context.font = `bold ${50}px monospace`;
+                context.fillText("BLUR TEST BLUR TEST", 100, 246);
+                context.filter = "none";
+
+                // Draw lines
+                context.strokeStyle = "black";
+                ["butt", "round", "square"].forEach((lineCap, i) => {
+                    context.lineWidth = 15;
+                    context.lineCap = lineCap;
+                    context.beginPath();
+                    context.moveTo(25 + i * 50, 10);
+                    context.lineTo(25 + i * 50, 140);
+                    context.stroke();
+                });
+
+                // line join
+                context.lineWidth = 10;
+                var offset = 200;
+                ["round", "bevel", "miter"].forEach((join, i) => {
+                    context.lineJoin = join;
+                    context.beginPath();
+                    context.moveTo(-5 + offset, 15 + i * 40);
+                    context.lineTo(35 + offset, 55 + i * 40);
+                    context.lineTo(75 + offset, 15 + i * 40);
+                    context.lineTo(115 + offset, 55 + i * 40);
+                    context.lineTo(155 + offset, 15 + i * 40);
+                    context.stroke();
+                });
+
+                // rect with gradient
+                context.fillStyle = gradient;
+                context.fillRect(10, 310, 400, 60);
+
+                // Fill with gradient
+                context.fillStyle = gradientText;
+                context.font = "bold 60px monospace";
+                context.fillText("Gradient Text!", 10, 420);
+
+                context.lineWidth = 5;
+                // Rounded rectangle with zero radius (specified as a number)
+                context.strokeStyle = "red";
+                context.beginPath();
+                context.roundRect(10, 220, 150, 100, 0);
+                context.stroke();
+
+                // Rounded rectangle with 40px radius (single element list)
+                context.strokeStyle = "blue";
+                context.beginPath();
+                context.roundRect(10, 220, 150, 100, [40]);
+                context.stroke();
+
+                // Rounded rectangle with 2 different radii
+                context.strokeStyle = "orange";
+                context.beginPath();
+                context.roundRect(10, 350, 150, 100, [10, 40]);
+                context.stroke();
+
+                // Rounded rectangle with four different radii
+                context.strokeStyle = "green";
+                context.beginPath();
+                context.roundRect(200, 220, 200, 100, [0, 30, 50, 60]);
+                context.stroke();
+
+                // Same rectangle drawn backwards
+                context.strokeStyle = "magenta";
+                context.beginPath();
+                context.roundRect(400, 350, -200, 100, [0, 30, 50, 60]);
+                context.stroke();
+
+                // Path 2D stroke
+                context.strokeStyle = "black";
+                context.lineWidth = 2;
+                let heartPath = new engine.createCanvasPath2D("M390,30 A 20, 20 0, 0, 1 430, 30 A 20, 20 0, 0, 1 470, 30 Q 470, 60 430, 90 Q 390, 60 390, 30 z");
+                let squarePath = new engine.createCanvasPath2D("M380, 10 h100 v100 h-100 Z");
+                heartPath.addPath(squarePath, { a: 1, b: 0, c: 0, d: 1, e: 0, f: -5 }); // push square 5px up to center heart.
+                context.stroke(heartPath);
+
+                // Path 2D fill
+                context.fillStyle = "yellow";
+                let diamondPath = new engine.createCanvasPath2D();
+                diamondPath.moveTo(350, 200); // Start at the center
+                diamondPath.lineTo(375, 175); // Move to the top point
+                diamondPath.lineTo(400, 200); // Move to the right point
+                diamondPath.lineTo(375, 225); // Move to the bottom point
+                diamondPath.lineTo(350, 200); // Close back to the starting point
+                context.fill(diamondPath);
+
+                // Path 2D round rect
+                context.strokeStyle = "red";
+                let roundRectPath = new engine.createCanvasPath2D();
+                roundRectPath.roundRect(300, 150, 45, 70, [10, 35]);
+                context.stroke(roundRectPath);
+
+                // Draw clipped round rect
+                // TODO: this is currently broken, clipping area does not have round corners
+                context.beginPath();
+                context.roundRect(40, 450, 100, 50, 10);
+                context.clip();
+                context.fillStyle = "blue";
+                context.fillRect(0, 0, 1000, 1000);
+
+                // tick update
+                dynamicTexture.update();
+                t += 0.01;
+            });
+
+        });
+    }, undefined, undefined, true);
+
     // This creates and positions a free camera (non-mesh)
     scene.createDefaultCamera(true, true, true);
     scene.activeCamera.alpha += Math.PI;

Apps/UnitTests/Scripts/tests.js

@@ -1,4 +1,5 @@
-mocha.setup({ ui: "bdd", reporter: "spec", retries: 5 });
+"use strict";
+mocha.setup({ ui: "bdd", reporter: "spec", retries: 5 });
 
 const expect = chai.expect;
 
@@ -15,6 +16,20 @@ describe("RequestFile", function () {
     });
 });
 
+describe("CanvasAndContext", function () {
+    const engine = new BABYLON.NativeEngine();
+    const scene = new BABYLON.Scene(engine);
+
+    const texSize = 512;
+    const dynamicTexture = new BABYLON.DynamicTexture("dynamic texture", texSize, scene);
+    const context = dynamicTexture.getContext();
+    const otherContext = dynamicTexture.getContext();
+
+    expect(context).to.equal(context.canvas.getContext());
+    expect(context).to.equal(otherContext);
+    expect(context).to.equal(otherContext.canvas.getContext());
+});
+
 describe("ColorParsing", function () {
     expect(_native.Canvas.parseColor("")).to.equal(0);
     expect(_native.Canvas.parseColor("transparent")).to.equal(0);

Plugins/NativeEngine/CMakeLists.txt

@@ -33,21 +33,40 @@ target_include_directories(NativeEngine
     PUBLIC "Include"
     PRIVATE "${BIMG_DIR}/3rdparty")
 
-target_link_libraries(NativeEngine
-    PUBLIC napi
-    PRIVATE JsRuntime
-    PRIVATE GraphicsDevice
-    PRIVATE arcana
-    PRIVATE bgfx
-    PRIVATE bimg
-    PRIVATE bimg_encode
-    PRIVATE bimg_decode
-    PRIVATE bx
-    PRIVATE glslang
-    PRIVATE glslang-default-resource-limits
-    PRIVATE SPIRV
-    PRIVATE GraphicsDeviceContext)
-warnings_as_errors(NativeEngine)
+
+if(BGFX_BUILD_TOOLS)
+    target_link_libraries(NativeEngine
+        PUBLIC napi
+        PRIVATE JsRuntime
+        PRIVATE GraphicsDevice
+        PRIVATE arcana
+        PRIVATE bgfx
+        PRIVATE bimg
+        PRIVATE bimg_encode
+        PRIVATE bimg_decode
+        PRIVATE bx
+        PRIVATE glslang
+        PRIVATE spirv-opt
+        PRIVATE GraphicsDeviceContext)
+    target_compile_definitions(NativeEngine PRIVATE BGFX_BUILD_TOOLS)
+else()
+    target_link_libraries(NativeEngine
+        PUBLIC napi
+        PRIVATE JsRuntime
+        PRIVATE GraphicsDevice
+        PRIVATE arcana
+        PRIVATE bgfx
+        PRIVATE bimg
+        PRIVATE bimg_encode
+        PRIVATE bimg_decode
+        PRIVATE bx
+        PRIVATE glslang
+        PRIVATE glslang-default-resource-limits
+        PRIVATE SPIRV
+        PRIVATE GraphicsDeviceContext)
+
+    warnings_as_errors(NativeEngine)
+endif()
 
 if(TARGET spirv-cross-hlsl)
     target_link_libraries(NativeEngine

Plugins/NativeEngine/Source/ShaderCompilerMetal.cpp

@@ -5,6 +5,7 @@
 #include <bgfx/bgfx.h>
 #include <glslang/Public/ShaderLang.h>
 #include <glslang/Public/ResourceLimits.h>
+#include <glslang/MachineIndependent/localintermediate.h>
 #include <SPIRV/GlslangToSpv.h>
 #include <spirv_parser.hpp>
 #include <spirv_msl.hpp>

Plugins/NativeEngine/Source/ShaderCompilerTraversers.cpp

@@ -220,8 +220,11 @@ namespace Babylon::ShaderCompilerTraversers
                 // Create the symbol for the actual struct. The name of this symbol, "anon@0",
                 // mirrors the kinds of strings glslang generates automatically for these sorts
                 // of objects.
-                TIntermSymbol* structSymbol = intermediate->addSymbol(TIntermSymbol{ids.Next(), "anon@0", structType});
-
+#ifdef BGFX_BUILD_TOOLS
+                TIntermSymbol* structSymbol = intermediate->addSymbol(TIntermSymbol{ids.Next(), "anon@0", intermediate->getStage(), structType});
+#else
+                TIntermSymbol* structSymbol = intermediate->addSymbol(TIntermSymbol{ ids.Next(), "anon@0", structType });
+#endif
                 // Every affected symbol in the AST (except linker objects) must be replaced
                 // with a new operation to retrieve its value from the struct. This operation
                 // consists of a binary operation indexing into the struct at a specified
@@ -521,7 +524,11 @@ namespace Babylon::ShaderCompilerTraversers
 
                 TType newType{publicType};
                 newType.setBasicType(symbol->getType().getBasicType());
-                auto* newSymbol = intermediate->addSymbol(TIntermSymbol{ids.Next(), newName, newType});
+#ifdef BGFX_BUILD_TOOLS
+                auto* newSymbol = intermediate->addSymbol(TIntermSymbol{ids.Next(), newName, intermediate->getStage(), newType});
+#else
+                auto* newSymbol = intermediate->addSymbol(TIntermSymbol{ ids.Next(), newName, newType });
+#endif
                 originalNameToReplacement[name] = newSymbol;
                 replacementToOriginalName[newName] = name;
             }
@@ -794,7 +801,11 @@ namespace Babylon::ShaderCompilerTraversers
 
                         TType newType{publicType};
                         std::string newName = name + "Texture";
-                        newTexture = intermediate->addSymbol(TIntermSymbol{ids.Next(), newName.c_str(), newType});
+#ifdef BGFX_BUILD_TOOLS
+                        newTexture = intermediate->addSymbol(TIntermSymbol{ids.Next(), newName.c_str(), intermediate->getStage(), newType});
+#else
+                        newTexture = intermediate->addSymbol(TIntermSymbol{ ids.Next(), newName.c_str(), newType });
+#endif
                     }
 
                     // Create the new sampler symbol.
@@ -809,7 +820,11 @@ namespace Babylon::ShaderCompilerTraversers
                         publicType.sampler.sampler = true;
 
                         TType newType{publicType};
-                        newSampler = intermediate->addSymbol(TIntermSymbol{ids.Next(), name.c_str(), newType});
+#ifdef BGFX_BUILD_TOOLS
+                        newSampler = intermediate->addSymbol(TIntermSymbol{ids.Next(), name.c_str(), intermediate->getStage(), newType});
+#else
+                        newSampler = intermediate->addSymbol(TIntermSymbol{ ids.Next(), name.c_str(), newType });
+#endif
                     }
 
                     nameToNewTextureAndSampler[name] = std::pair<TIntermSymbol*, TIntermSymbol*>{newTexture, newSampler};