Atlassian's Confluence whiteboards have introduced an advanced GPU rendering system that transforms complex shapes into triangles for high-performance display, supporting seamless user interactions even on large collaborative canvases.
- WebGL pipeline supports thousands of smooth, rounded shapes at 60+ FPS
- Shapes are triangulated to approximate rounded corners using linear transformations
- System outperforms standard HTML/CSS rendering for large-scale interactive boards
What happened
Atlassian has enhanced its Confluence whiteboards by building a custom WebGL graphics pipeline that leverages GPU capabilities for rendering shapes and connectors. Unlike traditional rendering methods using HTML and CSS, this new approach enables the display of thousands of shapes with rounded corners and edges without compromising performance.
To achieve this, Atlassian converts all shapes into triangles, a process called triangulation, which is the fundamental method GPUs use to render graphics. By approximating complex shapes, such as circles and triangles with smooth corners, through joined thin triangles and applying linear transformations, the system maintains consistent rendering at over 60 frames per second.
Why it matters
This development enables Confluence users to collaborate on expansive whiteboards filled with sticky notes, various shapes, and connectors fluidly and in real time. The ability to pan and zoom large canvases smoothly is crucial for effective brainstorming and diagramming sessions in fast-paced teamwork environments.
Prior attempts using standard web technologies could not provide the necessary responsiveness or visual appeal. By fully utilizing GPU hardware for rendering, Atlassian ensures that user experience remains seamless even as the complexity and size of whiteboards grow, setting a new performance standard for SaaS collaboration tools.
What to watch next
Future improvements may focus on optimizing triangle generation further to balance visual smoothness and performance costs, potentially allowing more complex shapes or higher-resolution curves without frame rate drops. Additional enhancements could include extending the pipeline to support texture effects or dynamic shading for richer visuals.
Monitoring user feedback on the system’s performance and visual quality will guide the product roadmap, potentially influencing broader adoption of GPU-accelerated rendering techniques across Atlassian's suite and other SaaS collaboration platforms aiming to deliver high-fidelity, real-time interaction experiences.