Table of Contents

Rendering Canvas on Web Service Application

Overview

In the HiNC-2025-webapi example project, the 3D canvas rendering is handled through a WebSocket-based architecture using SignalR Hub connections.

Core Component

The primary component for 3D canvas rendering:

  • Location: wwwroot/disp/rendering-canvas.js
  • Purpose: Manages all 3D canvas rendering operations

Connection Management

SignalR Hub Connection

  • Components using WebSocket (corresponding to SignalR Hub) receive a unique Hub connectionId
  • The rendering-canvas component maintains a primary connectionId
  • This ID serves as the index for all canvas data stream operations

Connection ID Naming Convention

In other components, the connection ID may be referenced with different naming patterns:

  • renderingConnectionId
  • rendering-connectionId
  • Similar variations

Naming Convention Examples

Different components may reference the connection ID with various naming patterns:

  • player-panel component: uses renderingConnectionId (wwwroot/player/player-panel.js)
  • Other components may use similar variations like rendering-connectionId

Data Flow Architecture

Frontend Responsibilities

  • The rendering-canvas component handles data stream transmission via WebSocket
  • Manages real-time rendering updates through the connection ID

Backend Integration

Multiple backend controllers can specify content to be rendered on the rendering-canvas. The architecture is designed to be flexible and reusable across different features.

Example: Player Controller

One example of backend integration:

  • File: Players/PlayerController.cs
  • Method: InitializePlayer
  • Purpose: Initializes player-specific rendering content

This is just one example - any controller in the application can interact with the rendering canvas using the same connection ID mechanism to display different types of 3D content

Key Points

  • All canvas data stream operations are indexed by the connection ID
  • The WebSocket connection enables real-time rendering updates
  • The architecture separates rendering logic (frontend) from content specification (backend)