GPU Tessellation: Achieving 60fps Smooth Drawing

Traditional drawing applications face a fundamental challenge: converting smooth, continuous pen strokes into pixels on screen while maintaining performance. Most applications handle this on the CPU, which can become a bottleneck. Notidian takes a different approach - leveraging GPU compute shaders for parallel tessellation.

The Challenge

When you draw a stroke with a stylus or mouse, the input comes as a series of discrete points. These points need to be:

1. Interpolated into smooth curves
2. Tessellated into triangles for rendering
3. Rendered with appropriate thickness and pressure
4. Anti-aliased for smooth edges

Doing this for thousands of strokes in real-time is computationally intensive.

Our GPU-First Solution

Compute Shader Pipeline

// Simplified tessellation compute shader
layout(local_size_x = 64) in;

uniform sampler2D u_strokePoints;
uniform float u_strokeWidth;

void main() {
    uint id = gl_GlobalInvocationID.x;
    vec2 point = texelFetch(u_strokePoints, ivec2(id, 0), 0).xy;
    vec2 nextPoint = texelFetch(u_strokePoints, ivec2(id + 1, 0), 0).xy;

    // Calculate perpendicular for stroke width
    vec2 direction = normalize(nextPoint - point);
    vec2 perpendicular = vec2(-direction.y, direction.x) * u_strokeWidth;

    // Generate quad vertices
    outputVertices(point - perpendicular, point + perpendicular);
}

Performance Gains

By moving tessellation to the GPU, we achieve:

• 10x faster stroke processing compared to CPU tessellation
• Consistent 60fps even with 10,000+ strokes
• Lower battery usage on mobile devices
• Reduced memory transfers between CPU and GPU

Optimization Techniques

1. Level-of-Detail (LOD) System

Distant or small strokes use simplified geometry, reducing the vertex count without visible quality loss.

2. Instanced Rendering

Similar strokes are rendered in a single draw call using instancing, dramatically reducing API overhead.

3. Texture Atlasing

Brush textures are packed into atlases, minimizing texture switches during rendering.

4. Temporal Caching

Previously tessellated strokes are cached on the GPU, only re-tessellating when modified.

Real-World Performance

Benchmark Results

Stroke Count	CPU Tessellation	GPU Tessellation	Improvement
1,000	45 fps	60 fps	33%
5,000	22 fps	60 fps	172%
10,000	11 fps	60 fps	445%
20,000	5 fps	58 fps	1060%

Memory Usage

GPU tessellation also improves memory efficiency:

• 50% less RAM usage for stroke data
• GPU memory pooling prevents fragmentation
• Automatic LOD reduces memory pressure

Implementation Details

WebGL 2 Compute Shaders

While WebGL 2 doesn’t natively support compute shaders, we use a technique called “transform feedback” to achieve similar results:

// Setup transform feedback for GPU tessellation
const transformFeedback = gl.createTransformFeedback();
gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, transformFeedback);

// Run tessellation
gl.beginTransformFeedback(gl.TRIANGLES);
gl.drawArrays(gl.POINTS, 0, strokePointCount);
gl.endTransformFeedback();

Pressure Sensitivity

Variable stroke width based on pressure is handled entirely on the GPU:

float pressure = texelFetch(u_pressureData, ivec2(id, 0), 0).r;
float width = mix(u_minWidth, u_maxWidth, pressure);

Future Improvements

We’re continuously optimizing our GPU pipeline:

• WebGPU migration for true compute shader support
• Mesh shaders for even more efficient tessellation
• Neural network stroke prediction for smoother interpolation
• Multi-GPU support for professional workstations

Conclusion

GPU tessellation is a game-changer for web-based drawing applications. By leveraging parallel processing power, Notidian delivers performance that rivals native applications while remaining accessible through any modern browser.

The techniques described here are just the beginning. As web graphics APIs evolve, we’ll continue pushing the boundaries of what’s possible in browser-based creative tools.