nanovg Compositor + context.filter blur

Apps/Playground/Scripts/experience.js

@@ -148,6 +148,13 @@ CreateBoxAsync(scene).then(function () {
                 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) => {
@@ -248,7 +255,6 @@ CreateBoxAsync(scene).then(function () {
         });
     }, undefined, undefined, true);
 
-
     // This creates and positions a free camera (non-mesh)
     scene.createDefaultCamera(true, true, true);
     scene.activeCamera.alpha += Math.PI;

Polyfills/Canvas/CMakeLists.txt

@@ -95,6 +95,8 @@ set(SOURCES
     "Source/Canvas.cpp"
     "Source/Canvas.h"
     "Source/Colors.h"
+    "Source/FrameBufferPool.cpp"
+    "Source/FrameBufferPool.h"
     "Source/Image.cpp"
     "Source/Image.h"
     "Source/ImageData.cpp"
@@ -115,6 +117,8 @@ set(SOURCES
     "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")

Polyfills/Canvas/Source/Canvas.cpp

@@ -159,17 +159,27 @@ namespace Babylon::Polyfills::Internal
             std::array<bgfx::Attachment, textures.size()> attachments{};
             for (size_t idx = 0; idx < attachments.size(); ++idx)
             {
-                attachments[idx].init(textures[idx]);
+                std::array<bgfx::TextureHandle, 1> textures{
+                   bgfx::createTexture2D(m_width, m_height, false, 1, bgfx::TextureFormat::RGBA8, BGFX_TEXTURE_RT) };
+
+                std::array<bgfx::Attachment, textures.size()> attachments{};
+                for (size_t idx = 0; idx < attachments.size(); ++idx)
+                {
+                    attachments[idx].init(textures[idx]);
+                }
+                auto handle = bgfx::createFrameBuffer(static_cast<uint8_t>(attachments.size()), attachments.data(), true);
+                assert(handle.idx != bgfx::kInvalidHandle);
+                m_frameBuffer = std::make_unique<Graphics::FrameBuffer>(m_graphicsContext, handle, m_width, m_height, false, false, false);
+                m_dirty = false;
+
+                if (m_texture)
+                {
+                    m_texture.reset();
+                }
             }
-            auto handle = bgfx::createFrameBuffer(static_cast<uint8_t>(attachments.size()), attachments.data(), true);
-            assert(handle.idx != bgfx::kInvalidHandle);
-            m_frameBuffer = std::make_unique<Graphics::FrameBuffer>(m_graphicsContext, handle, m_width, m_height, false, false, false);
-            m_dirty = false;
 
-            if (m_texture)
-            {
-                m_texture.reset();
-            }
+            m_frameBufferPool.Clear();
+            m_frameBufferPool.SetGraphicsContext(&m_graphicsContext);
 
             return true;
         }
@@ -200,6 +210,7 @@ namespace Babylon::Polyfills::Internal
     {
         m_frameBuffer.reset();
         m_texture.reset();
+        m_frameBufferPool.Clear();
     }
 
     void NativeCanvas::Dispose(const Napi::CallbackInfo& /*info*/)

Polyfills/Canvas/Source/Canvas.h

@@ -6,6 +6,8 @@
 #include <Babylon/Graphics/FrameBuffer.h>
 #include <Babylon/Graphics/Texture.h>
 
+#include "FrameBufferPool.h"
+
 namespace Babylon::Polyfills
 {
     class Canvas::Impl final : public std::enable_shared_from_this<Canvas::Impl>
@@ -67,6 +69,7 @@ namespace Babylon::Polyfills::Internal
         // returns true if frameBuffer size has changed
         bool UpdateRenderTarget();
         Babylon::Graphics::FrameBuffer& GetFrameBuffer() { return *m_frameBuffer; }
+        FrameBufferPool m_frameBufferPool;
 
         Graphics::DeviceContext& GetGraphicsContext()
         {

Polyfills/Canvas/Source/Context.cpp

@@ -80,6 +80,7 @@ namespace Babylon::Polyfills::Internal
                 InstanceAccessor("lineCap", &Context::GetLineCap, &Context::SetLineCap),
                 InstanceAccessor("lineJoin", &Context::GetLineJoin, &Context::SetLineJoin),
                 InstanceAccessor("miterLimit", &Context::GetMiterLimit, &Context::SetMiterLimit),
+                InstanceAccessor("filter", &Context::GetFilter, &Context::SetFilter),
                 InstanceAccessor("font", &Context::GetFont, &Context::SetFont),
                 InstanceAccessor("letterSpacing", &Context::GetLetterSpacing, &Context::SetLetterSpacing),
                 InstanceAccessor("strokeStyle", &Context::GetStrokeStyle, &Context::SetStrokeStyle),
@@ -173,6 +174,16 @@ namespace Babylon::Polyfills::Internal
         }
     }
 
+    void Context::SetFilterStack()
+    {
+        if (m_filter.length())
+        {
+            nanovg_filterstack filterStack;
+            filterStack.ParseString(m_filter);
+            nvgFilterStack(*m_nvg, filterStack); // sets filterStack on nanovg
+        }
+    }
+
     void Context::FillRect(const Napi::CallbackInfo& info)
     {
         auto left = info[0].As<Napi::Number>().FloatValue();
@@ -188,7 +199,8 @@ namespace Babylon::Polyfills::Internal
         nvgRect(*m_nvg, left, top, width, height);
 
         BindFillStyle(info, left, top, width, height);
-
+
+        SetFilterStack();
         nvgFill(*m_nvg);
         SetDirty();
     }
@@ -249,6 +261,8 @@ namespace Babylon::Polyfills::Internal
 
     void Context::Fill(const Napi::CallbackInfo& info)
     {
+        SetFilterStack();
+
         const NativeCanvasPath2D* path = info.Length() >= 1 && info[0].IsObject()
             ? NativeCanvasPath2D::Unwrap(info[0].As<Napi::Object>())
             : nullptr;
@@ -429,6 +443,7 @@ namespace Babylon::Polyfills::Internal
         const auto height = info[3].As<Napi::Number>().FloatValue();
 
         nvgRect(*m_nvg, left, top, width, height);
+        SetFilterStack();
         nvgStroke(*m_nvg);
         SetDirty();
     }
@@ -505,6 +520,7 @@ namespace Babylon::Polyfills::Internal
             SetDirty();
         }
 
+        SetFilterStack();
         nvgStroke(*m_nvg);
         SetDirty();
     }
@@ -571,6 +587,13 @@ namespace Babylon::Polyfills::Internal
         {
             BindFillStyle(info, 0.f, 0.f, x, y);
 
+            if (m_filter.length())
+            {
+                nanovg_filterstack filterStack;
+                filterStack.ParseString(m_filter);
+                nvgFilterStack(*m_nvg, filterStack); // sets filterStack on nanovg
+            }
+
             nvgText(*m_nvg, x, y, text.c_str(), nullptr);
             SetDirty();
         }
@@ -605,10 +628,35 @@ namespace Babylon::Polyfills::Internal
                 const auto width = m_canvas->GetWidth();
                 const auto height = m_canvas->GetHeight();
 
+                for (auto& buffer : m_canvas->m_frameBufferPool.GetPoolBuffers())
+                {
+                    // sanity check no buffers should have been acquired yet
+                    assert(buffer.isAvailable == true);
+                }
+                std::function<Babylon::Graphics::FrameBuffer*()> acquire = [this, encoder]() -> Babylon::Graphics::FrameBuffer* {
+                    Babylon::Graphics::FrameBuffer *frameBuffer = this->m_canvas->m_frameBufferPool.Acquire();
+                    frameBuffer->Bind(*encoder);
+                    return frameBuffer;
+                };
+                std::function<void(Babylon::Graphics::FrameBuffer*)> release = [this, encoder](Babylon::Graphics::FrameBuffer* frameBuffer) -> void {
+                    // clear framebuffer when released
+                    frameBuffer->Clear(*encoder, BGFX_CLEAR_COLOR, 0, 0, 0);
+                    this->m_canvas->m_frameBufferPool.Release(frameBuffer);
+                    frameBuffer->Unbind(*encoder);
+                };
+
                 nvgBeginFrame(*m_nvg, float(width), float(height), 1.0f);
                 nvgSetFrameBufferAndEncoder(*m_nvg, frameBuffer, encoder);
+                nvgSetFrameBufferPool(*m_nvg, { acquire, release });
                 nvgEndFrame(*m_nvg);
                 frameBuffer.Unbind(*encoder);
+
+                for (auto& buffer : m_canvas->m_frameBufferPool.GetPoolBuffers())
+                {
+                    // sanity check no unreleased buffers
+                    assert(buffer.isAvailable == true);
+                }
+
                 m_dirty = false;
             }).then(arcana::inline_scheduler, *m_cancellationSource, [this, cancellationSource{m_cancellationSource}](const arcana::expected<void, std::exception_ptr>& result) {
                 if (!cancellationSource->cancelled() && result.has_error())
@@ -669,6 +717,7 @@ namespace Babylon::Polyfills::Internal
 
             nvgRect(*m_nvg, dx, dy, width, height);
             nvgFillPaint(*m_nvg, imagePaint);
+            SetFilterStack();
             nvgFill(*m_nvg);
             SetDirty();
         }
@@ -688,6 +737,7 @@ namespace Babylon::Polyfills::Internal
 
             nvgRect(*m_nvg, dx, dy, dWidth, dHeight);
             nvgFillPaint(*m_nvg, imagePaint);
+            SetFilterStack();
             nvgFill(*m_nvg);
             SetDirty();
         }
@@ -713,6 +763,7 @@ namespace Babylon::Polyfills::Internal
 
             nvgRect(*m_nvg, dx, dy, dWidth, dHeight);
             nvgFillPaint(*m_nvg, imagePaint);
+            SetFilterStack();
             nvgFill(*m_nvg);
             SetDirty();
         }
@@ -853,6 +904,21 @@ namespace Babylon::Polyfills::Internal
         SetDirty();
     }
 
+    Napi::Value Context::GetFilter(const Napi::CallbackInfo& info)
+    {
+        return Napi::Value::From(Env(), m_filter);
+    }
+
+    void Context::SetFilter(const Napi::CallbackInfo& info, const Napi::Value& value)
+    {
+        std::string filterString = value.As<Napi::String>().Utf8Value();
+        // Keep existing filter if the new one is invalid
+        if (nanovg_filterstack::ValidString(filterString))
+        {
+            m_filter = filterString;
+        }
+    }
+
     Napi::Value Context::GetFont(const Napi::CallbackInfo& info)
     {
         return Napi::Value::From(Env(), static_cast<std::string>(m_font));

Polyfills/Canvas/Source/Context.h

@@ -6,6 +6,7 @@
 #include "Image.h"
 #include "Path2D.h"
 #include "Font.h"
+#include "nanovg/nanovg_filterstack.h"
 
 struct NVGcontext;
 
@@ -68,6 +69,8 @@ namespace Babylon::Polyfills::Internal
         void SetLineJoin(const Napi::CallbackInfo&, const Napi::Value& value);
         Napi::Value GetMiterLimit(const Napi::CallbackInfo&);
         void SetMiterLimit(const Napi::CallbackInfo&, const Napi::Value& value);
+        Napi::Value GetFilter(const Napi::CallbackInfo& info);
+        void SetFilter(const Napi::CallbackInfo& info, const Napi::Value& value);
         Napi::Value GetFont(const Napi::CallbackInfo&);
         void SetFont(const Napi::CallbackInfo&, const Napi::Value& value);
         Napi::Value GetLetterSpacing(const Napi::CallbackInfo&);
@@ -97,6 +100,7 @@ namespace Babylon::Polyfills::Internal
         std::string m_strokeStyle{};
         std::string m_lineCap{};  // 'butt', 'round', 'square'
         std::string m_lineJoin{}; // 'round', 'bevel', 'miter'
+        std::string m_filter{};
         float m_miterLimit{0.f};
         float m_lineWidth{0.f};
         float m_globalAlpha{1.f};
@@ -123,6 +127,7 @@ namespace Babylon::Polyfills::Internal
         void BindFillStyle(const Napi::CallbackInfo& info, float left, float top, float width, float height);
         void FlushGraphicResources() override;
         void PlayPath2D(const NativeCanvasPath2D* path);
+        void SetFilterStack();
 
         friend class Canvas;
     };

Polyfills/Canvas/Source/FrameBufferPool.cpp

@@ -0,0 +1,105 @@
+#include <array>
+#include <vector>
+#include <stdexcept>
+
+#include <bimg/bimg.h>
+#include <bgfx/bgfx.h>
+#include "FrameBufferPool.h"
+
+namespace Babylon::Polyfills
+{
+    const std::vector<FrameBufferPool::PoolBuffer>& FrameBufferPool::GetPoolBuffers()
+    {
+        return mPoolBuffers;
+    }
+
+    // sets graphics context to be used for creating framebuffers
+    void FrameBufferPool::SetGraphicsContext(Graphics::DeviceContext* graphicsContext)
+    {
+        m_graphicsContext = graphicsContext;
+    }
+
+    void FrameBufferPool::Add(int nBuffers)
+    {
+        if (m_graphicsContext == nullptr)
+        {
+            throw std::runtime_error("Cannot add framebuffer to pool. Graphics context is not set.");
+        }
+
+        for (int i = 0; i < nBuffers; ++i)
+        {
+            bgfx::FrameBufferHandle TextBuffer{bgfx::kInvalidHandle};
+            Graphics::FrameBuffer* FrameBuffer;
+            int width(256), height(256);
+
+            // make sure render targets are filled with 0 : https://registry.khronos.org/webgl/specs/latest/1.0/#TEXIMAGE2D
+            bgfx::ReleaseFn releaseFn{[](void*, void* userData) {
+                bimg::imageFree(static_cast<bimg::ImageContainer*>(userData));
+            }};
+
+            bimg::ImageContainer* image = bimg::imageAlloc(&Babylon::Graphics::DeviceContext::GetDefaultAllocator(), bimg::TextureFormat::RGBA8, width, height, 1 /*depth*/, 1, false /*cubeMap*/, false /*hasMips*/);
+            const bgfx::Memory* mem = bgfx::makeRef(image->m_data, image->m_size, releaseFn, image);
+            bx::memSet(image->m_data, 0, image->m_size);
+
+            std::array<bgfx::TextureHandle, 1> textures{
+                bgfx::createTexture2D(width, height, false, 1, bgfx::TextureFormat::RGBA8, BGFX_TEXTURE_RT, mem)};
+
+            std::array<bgfx::Attachment, textures.size()> attachments{};
+            for (size_t idx = 0; idx < attachments.size(); ++idx)
+            {
+                attachments[idx].init(textures[idx]);
+            }
+            TextBuffer = bgfx::createFrameBuffer(static_cast<uint8_t>(attachments.size()), attachments.data(), true);
+
+            FrameBuffer = new Graphics::FrameBuffer(*m_graphicsContext, TextBuffer, width, height, false, false, false);
+            m_available++;
+            mPoolBuffers.push_back({FrameBuffer, true});
+        }
+    }
+
+    void FrameBufferPool::Clear()
+    {
+        for (auto& buffer : mPoolBuffers)
+        {
+            if (buffer.frameBuffer)
+            {
+                buffer.frameBuffer->Dispose();
+            }
+        }
+        m_available = 0;
+        mPoolBuffers.clear();
+    }
+
+    Graphics::FrameBuffer* FrameBufferPool::Acquire()
+    {
+        // no buffers in pool, add one
+        if (m_available == 0)
+        {
+            Add(1);
+        }
+
+        for (auto& buffer : mPoolBuffers)
+        {
+            if (buffer.isAvailable)
+            {
+                buffer.isAvailable = false;
+                m_available--;
+                return buffer.frameBuffer;
+            }
+        }
+
+        throw std::runtime_error("No available frame buffer in pool.");
+    }
+
+    void FrameBufferPool::Release(Graphics::FrameBuffer* frameBuffer)
+    {
+        for (auto& buffer : mPoolBuffers)
+        {
+            if (buffer.frameBuffer == frameBuffer)
+            {
+                buffer.isAvailable = true;
+                return;
+            }
+        }
+    }
+}