To support real-time brainstorming and diagramming on an infinite canvas, Atlassian engineered a custom WebGL graphics pipeline in Confluence whiteboards that uses triangulation and linear transformations to efficiently render thousands of scalable shapes and connectors with smooth rounded edges.
- Custom WebGL pipeline enables scalable, smooth shapes
- Triangulation converts complex forms into GPU-friendly triangles
- Linear transformations adapt standard shapes for rounded edges
What happened
Atlassian introduced a new rendering approach within Confluence whiteboards to handle an infinite collaborative canvas filled with sticky notes, complex shapes, and connectors. Unlike traditional static shapes, these elements require dynamic resizing, rounded corners, and smooth edges to maintain visual appeal and usability during real-time user interactions.
To deliver this, the engineering team developed a custom WebGL graphics pipeline that converts all shapes into triangle meshes using triangulation. This approach allows the GPU to efficiently render thousands of shapes at a stable 60+ frames per second, enabling smooth panning and zooming even on large whiteboards packed with graphical elements.
Why it matters
Collaborative diagramming tools like Confluence whiteboards demand both flexibility and performance as users expect seamless, interactive experiences across varying device capabilities. Standard web technologies such as HTML and CSS could not meet performance benchmarks without sacrificing graphic fidelity or responsiveness.
By embracing GPU-based geometry rendering and mathematical techniques like linear transformations to approximate complex shapes and rounded corners, Atlassian significantly improved rendering efficiency. This innovation ensures that teams can work together on expansive, rich visual content without lag or jitter, enhancing productivity and collaboration.
What to watch next
Atlassian's work represents a step forward in the use of GPU acceleration for real-time SaaS collaboration tools. Future developments may include further optimization of shape complexity versus rendering cost, more advanced user-driven customizations of shapes, and integration of additional graphical elements without compromising performance.
It will also be important to monitor how this WebGL-based pipeline scales on different browsers and lower-end hardware, and whether Atlassian expands these graphical innovations across other products in its suite to create similarly smooth, high-performing user experiences.