Support rendering web content in layers

fixtures/html/images.html

@@ -20,7 +20,7 @@
       flex-direction: column;
       align-items: center;
       justify-content: center;
-      gap: 20px;
+      gap: 40px;
     }
 
     #svg-image:hover {

src/client/builtin_scene/client_renderer.cpp

@@ -88,44 +88,81 @@ namespace builtin_scene
     }
   }
 
-  void RenderSystem::renderPass(vector<EntityId> &roots,
-                                RenderPass renderPass,
-                                optional<XRRenderTarget> renderTarget)
+  struct RenderableMeshEntity
+  {
+    EntityId id;
+    shared_ptr<Mesh3d> meshComponent;
+    shared_ptr<MeshMaterial3d> materialComponent;
+  };
+
+  void RenderSystem::renderPass(vector<EntityId> &roots, RenderPass renderPass, optional<XRRenderTarget> renderTarget)
   {
     assert(roots.size() > 0 && "The roots must not be empty.");
 
-    // TODO(yorkie): support other render passes like particles, post-processing, etc.
-    if (renderPass != RenderPass::kOpaques)
-      return;
+    vector<RenderableMeshEntity> entities; // TODO(yorkie): cache this?
+    auto addRenderableItem = [this, &renderPass, &entities](EntityId entity) -> bool
+    {
+      // Render the mesh if it exists
+      auto mesh = getComponent<Mesh3d>(entity);
+      if (mesh != nullptr)
+      {
+        // If the mesh exists but rendering is disabled, we need to skip its rendering and its children.
+        if (mesh->isRenderingDisabled())
+          return false;
+
+        auto material = getComponent<MeshMaterial3d>(entity);
+        assert(material != nullptr &&
+               "The material component must be valid on renderable mesh");
+
+        if (material->matchesPass(renderPass))
+          entities.push_back({entity, mesh, material});
+      }
+
+      // TODO: support other renderable components (e.g., particles, etc.)
+      return true;
+    };
 
-    renderVolumeMask(renderPass, renderTarget);
-    onBeforeRender(renderTarget);
+    // Search for renderable items in the hierarchy
     for (const auto &root : roots)
-      traverseAndRender(root, renderPass, renderTarget);
-    onAfterRender(renderTarget);
+      traverse(root, addRenderableItem);
+
+    // Render items
+    if (entities.size() > 0)
+    {
+      renderVolumeMask(renderPass, renderTarget);
+      onBeforeRender(renderTarget);
+      for (const auto &entity : entities)
+      {
+        renderMesh(entity.id,
+                   entity.meshComponent,
+                   entity.materialComponent,
+                   renderPass,
+                   renderTarget);
+      }
+      onAfterRender(renderTarget);
+    }
   }
 
   void RenderSystem::renderVolumeMask(RenderPass renderPass, optional<XRRenderTarget> renderTarget)
   {
     if (renderer_->isVolumeMaskEnabled())
     {
-      renderer_->addVolumeMask([this, &renderPass, &renderTarget](ecs::EntityId entity, SceneRenderer &renderer)
-                               { renderMesh(entity, getComponent<Mesh3d>(entity), renderPass, renderTarget); });
+      auto renderVolume = [this, &renderPass, &renderTarget](ecs::EntityId entity, SceneRenderer &renderer)
+      {
+        auto meshComponent = getComponent<Mesh3d>(entity);
+        auto materialComponent = getComponent<MeshMaterial3d>(entity);
+        renderMesh(entity, meshComponent, materialComponent, renderPass, renderTarget);
+      };
+      renderer_->addVolumeMask(renderVolume);
     }
   }
 
-  void RenderSystem::renderMesh(EntityId &entity,
+  void RenderSystem::renderMesh(const EntityId &entity,
                                 shared_ptr<Mesh3d> meshComponent,
+                                shared_ptr<MeshMaterial3d> materialComponent,
                                 RenderPass renderPass,
                                 optional<XRRenderTarget> renderTarget)
   {
-    auto materialComponent = getComponent<MeshMaterial3d>(entity);
-    if (TR_UNLIKELY(materialComponent == nullptr))
-    {
-      assert(false && "The material component must be valid.");
-      return;
-    }
-
     if (!meshComponent->initialized())
       renderer_->initializeMesh3d(meshComponent);
     if (!materialComponent->initialized())
@@ -174,29 +211,10 @@ namespace builtin_scene
     }
   }
 
-  void RenderSystem::traverseAndRender(EntityId root, RenderPass renderPass, optional<XRRenderTarget> renderTarget)
-  {
-    auto renderEntity = [this, &renderPass, &renderTarget](EntityId entity) -> bool
-    {
-      // Render the mesh if it exists
-      auto mesh = getComponent<Mesh3d>(entity);
-      if (mesh != nullptr)
-      {
-        // If the mesh exists but rendering is disabled, we need to skip its rendering and its children.
-        if (mesh->isRenderingDisabled())
-          return false;
-        renderMesh(entity, mesh, renderPass, renderTarget);
-      }
-
-      // TODO: support other renderable components (e.g., particles, etc.)
-      return true;
-    };
-    return traverse(root, renderEntity);
-  }
-
-  void RenderSystem::traverseAndUpdate(ecs::EntityId root, std::optional<XRRenderTarget> renderTarget)
+  size_t RenderSystem::traverseAndUpdate(ecs::EntityId root, std::optional<XRRenderTarget> renderTarget)
   {
-    auto updateEntity = [this, &renderTarget](EntityId entity) -> bool
+    size_t num = 0;
+    auto updateEntity = [this, &renderTarget, &num](EntityId entity) -> bool
     {
       auto mesh = getComponent<Mesh3d>(entity);
       if (mesh != nullptr)
@@ -209,10 +227,14 @@ namespace builtin_scene
         // TODO(yorkie): update transformation matrix here?
         if (mesh->isInstancedMesh())
           updateInstancedMeshData(*mesh, renderTarget);
+
+        num++;
       }
       return true; // Continue traversing children
     };
-    return traverse(root, updateEntity);
+
+    traverse(root, updateEntity);
+    return num;
   }
 
   glm::mat4 RenderSystem::getTransformationMatrix(ecs::EntityId id)

src/client/builtin_scene/client_renderer.hpp

@@ -61,27 +61,22 @@ namespace builtin_scene
      *
      * @param entity The entity to render.
      * @param meshComponent The mesh component to render.
+     * @param materialComponent The mesh material component to use for rendering.
      * @param renderPass The render pass to use, which can be used to filter the objects or instances to render.
      * @param renderTarget The XR render target.
      */
-    void renderMesh(ecs::EntityId &, std::shared_ptr<Mesh3d>, RenderPass, std::optional<XRRenderTarget>);
-    /**
-     * Execute this before rendering the scene.
-     *
-     * @param renderTarget The XR render target.
-     */
+    void renderMesh(const ecs::EntityId &,
+                    std::shared_ptr<Mesh3d>,
+                    std::shared_ptr<MeshMaterial3d>,
+                    const RenderPass,
+                    std::optional<XRRenderTarget>);
+
     void onBeforeRender(std::optional<XRRenderTarget>);
-    /**
-     * Execute this after rendering the scene.
-     *
-     * @param renderTarget The XR render target.
-     */
     void onAfterRender(std::optional<XRRenderTarget>);
 
     // Traverse the entity hierarchy in pre-order and execute the given function for each entity.
     void traverse(ecs::EntityId root, std::function<bool(ecs::EntityId)> &&);
-    void traverseAndUpdate(ecs::EntityId root, std::optional<XRRenderTarget>);
-    void traverseAndRender(ecs::EntityId root, RenderPass, std::optional<XRRenderTarget>);
+    size_t traverseAndUpdate(ecs::EntityId root, std::optional<XRRenderTarget>);
 
     glm::mat4 getTransformationMatrix(ecs::EntityId);
     void updateInstancedMeshData(const Mesh3d &, std::optional<XRRenderTarget>);

src/client/builtin_scene/instanced_mesh.cpp

@@ -368,7 +368,7 @@ namespace builtin_scene
       InstanceFilter::kTransparent, transparentVao, transparentInstanceVbo);
   }
 
-  void InstancedMeshBase::updateRenderQueues(bool ignoreDirty)
+  void InstancedMeshBase::updateInstancesList(bool ignoreDirty)
   {
     if (!isDirty_ && !ignoreDirty)
       return;

src/client/builtin_scene/instanced_mesh.hpp

@@ -370,11 +370,11 @@ namespace builtin_scene
                std::shared_ptr<client_graphics::WebGLVertexArray> transparentVao,
                std::shared_ptr<client_graphics::WebGLBuffer> transparentInstanceVao);
     /**
-     * Update the internal `idToInstanceMap_` into the opaque and transparent `RenderableInstancesList` the queues.
+     * Update the internal `idToInstanceMap_` into the opaque and transparent `RenderableInstancesList`.
      *
      * @param ignoreDirty Whether to ignore the dirty flag, `true` means force update.
      */
-    void updateRenderQueues(bool ignoreDirty = false);
+    void updateInstancesList(bool ignoreDirty = false);
 
   private:
     inline void markAsDirty()

src/client/builtin_scene/material_base.hpp

@@ -64,6 +64,10 @@ namespace builtin_scene
     Material()
     {
     }
+    Material(bool isOpaque)
+        : isOpaque_(isOpaque)
+    {
+    }
     virtual ~Material() = default;
 
   public:

src/client/builtin_scene/materials/web_content_instanced.cpp

@@ -17,14 +17,13 @@ namespace builtin_scene::materials
   using namespace client_graphics;
 
   WebContentInstancedMaterial::WebContentInstancedMaterial()
-      : Material()
+      : Material(false)
       , width_(0.0f)
       , height_(0.0f)
       , textureAtlas_(nullptr)
       , textureOffset_(0.0f, 0.0f)
       , textureScale_(1.0f, 1.0f)
   {
-    this->isOpaque_ = true;
   }
 
   bool WebContentInstancedMaterial::initialize(shared_ptr<WebGL2Context> glContext,

src/client/builtin_scene/mesh_material.hpp

@@ -1,11 +1,13 @@
 #pragma once
 
 #include <memory>
+#include <cassert>
 #include <concepts>
 #include <client/graphics/webgl_context.hpp>
 
 #include "./ecs.hpp"
 #include "./material_base.hpp"
+#include "./renderer/render_pass.hpp"
 
 namespace builtin_scene
 {
@@ -53,13 +55,32 @@ namespace builtin_scene
     {
       return program_;
     }
-    /**
-     * @returns Whether the material is opaque.
-     */
+
     inline bool isOpaque() const
     {
       return material_->isOpaque();
     }
+    inline bool isTransparent() const
+    {
+      return !isOpaque();
+    }
+
+    /**
+     * Check if the material matches the given render pass.
+     *
+     * @param pass The render pass to check against.
+     * @returns Whether the material matches the render pass.
+     */
+    inline bool matchesPass(const RenderPass &pass) const
+    {
+      assert(pass == RenderPass::kOpaques || pass == RenderPass::kTransparents);
+      if (pass == RenderPass::kOpaques)
+        return isOpaque();
+      else if (pass == RenderPass::kTransparents)
+        return isTransparent();
+      else
+        return false;
+    }
     /**
      * Initialize the `MeshMaterial3d` instance with the given WebGL context and program.
      *

src/client/builtin_scene/renderer/render_pass.hpp

@@ -1,5 +1,8 @@
 #pragma once
 
+#include <string>
+#include <ostream>
+
 namespace builtin_scene
 {
   enum class RenderPass
@@ -8,4 +11,19 @@ namespace builtin_scene
     kTransparents,
     kPostProcessing,
   };
+
+  inline std::ostream &operator<<(std::ostream &os, RenderPass pass)
+  {
+    switch (pass)
+    {
+    case RenderPass::kOpaques:
+      return os << "RenderPass(Opaques)";
+    case RenderPass::kTransparents:
+      return os << "RenderPass(Transparents)";
+    case RenderPass::kPostProcessing:
+      return os << "RenderPass(PostProcessing)";
+    default:
+      return os << "RenderPass(Unknown)";
+    }
+  }
 }