TechPrufer
Get started
Atlassian
Atlassian logoAtlassian · Feature trail

GPU Rendering for Confluence Whiteboards

3 posts · Aug 2023 – Nov 2023

What this trail covers

Confluence whiteboards leverage a WebGL graphics pipeline for efficient rendering of shapes and connectors, including polygon triangulation, dynamic resizing, rendering hollow shapes, and dynamic connectors with smoothly rendered arcs.

All Atlassian trails
  1. Triangles at work: GPU rendering shapes and connectors in Confluence whiteboardsThis post details the implementation of a WebGL graphics pipeline for Confluence whiteboards, focusing on efficient rendering of shapes and connectors. It covers polygon triangulation for rendering various shapes with rounded corners, handling shape resizing by scaling corners based on angle changes using vertex shaders, and rendering hollow shapes by triangulating the geometry between outer and inner outlines derived from normal vectors. The post also introduces the rendering of dynamic connectors with seamlessly smooth arcs.
  2. Triangles at work: GPU rendering shapes and connectors in Confluence whiteboardsThis post details the technical implementation of rendering shapes and connectors in Confluence whiteboards using a WebGL graphics pipeline. It explains the challenges of rendering rounded shapes, the concept of polygon triangulation, and the specific techniques used for defining and rounding shape corners. It also covers how shapes are resized by scaling corners based on interior angle changes, utilizing vertex shaders for GPU-based transformations. The post further elaborates on rendering hollow shapes by using normal vectors to define the inner hole geometry and introduces the rendering of dynamic connectors with smoothly rendered arcs.
  3. Rendering like Butter - a Confluence Whiteboards StoryThis post details the engineering challenges in building Confluence whiteboards, focusing on a homegrown rendering engine called Canvas. It covers achieving scale (5K elements, 50 collaborators) and performance (≥ 60 FPS) through a uni-directional, multi-phase rendering engine executed over a persistent game loop. Key components include a centralized input capture system, a performance-optimized Finite State Machine (FSM) for interaction management, and an Entity Component System (ECS) for state updates. The rendering phase utilizes WebGL for fast rendering and visibility culling with virtual tiling.