Phil Gearphilgear.dev
creativeHackathon Exploration
Published: 2024-02-15

Wacom Inkathon: Digital Ink Framework

Pressure-Sensitive Digital Ink Pipeline & Collaborative WebGL Canvas

Hackathon exploration of pressure-sensitive digital inking, real-time stroke smoothing, and collaborative WebGL canvas architecture using Wacom WILL.

Input FrameworkWacom WILL SDK
Stroke Latency Target< 16ms (60-120Hz)
Canvas EngineHardware-Accelerated WebGL
Interpolation MathHermite Spline Smoothing
#Digital Ink#Wacom WILL#WebGL#Creative Tech#Hackathon Exploration#GLSL#WebSockets

Architecture Highlights

  • •WILL (Wacom Ink Layer Language) stroke smoothing and predictive stroke interpolation.
  • •Low-latency WebGL canvas rendering tuned for high-refresh stylus displays (Apple Pencil, Wacom Pro Pen).
  • •Collaborative vector stroke synchronization over WebSockets with delta compression.
  • •Custom GLSL fragment shaders simulating variable ink wetness, paper grain dispersion, and velocity tapering.

Engineering Hurdles Solved

  • •Eliminating pointer event coalescing lag across consumer styluses without sacrificing high-frequency curve accuracy.
  • •Handling asynchronous multi-user stroke merging without visual vector tearing or undo-stack corruption.
Vector Stroke Physics and Tool Mechanics
Fig 1.0 —Tactile tool physics modeling: translating physical craftsman tool force vectors, stylus tilt angles, and velocity tapering into dynamic WebGL brush strokes.

Overview

Developed during the Wacom Inkathon, this project explored the boundaries of real-time digital inking on the modern web. By pairing Wacom’s WILL (Wacom Ink Layer Language) engine with hardware-accelerated WebGL shader rendering, the prototype explored natural pressure dynamics, predictive stroke smoothing, and real-time multi-user canvas collaboration.

Traditional browser canvas drawing APIs (CanvasRenderingContext2D) introduce noticeable input lag and jagged raster stepping because they execute synchronously on the main JavaScript thread. This framework bypasses browser event queuing by piping raw stylus pointer events directly into GPU vertex and fragment shaders.

Hermite Spline Predictive Interpolation

Stylus hardware reports coordinate and pressure samples at discrete intervals (typically 120Hz to 240Hz). To achieve fluid, calligraphic strokes at 60–120 FPS without polyline angularity, the engine computes cubic Hermite spline interpolations in real time:

P(t) = (2t^3 - 3t^2 + 1)P_0 + (t^3 - 2t^2 + t)M_0 + (-2t^3 + 3t^2)P_1 + (t^3 - t^2)M_1

Predictive stroke extension algorithms estimate the stylus arrival vector for the next 16ms frame, eliminating the psychological sensation of ink “dragging” behind the pen tip.

Technical Pipeline

[STYLUS HARDWARE] (Wacom / Apple Pencil)
       │ (x, y, pressure, tilt_x, tilt_y, twist)
       ▼
[POINTER EVENT BUFFER] ──► PointerEvent.getCoalescedEvents() & Predicted Events
       │
       ▼
[WILL VECTOR INTERPOLATOR] ──► Hermite Spline Calculation & Velocity Tapering
       │
       ▼
[WEBGL GLSL SHADER PIPELINE] ──► Dynamic Particle Blending & Wet Ink Dispersion
       │
       ▼
[WEBSOCKET SYNC BUS] ──► Delta-encoded binary vector frames to collaborators

Key Breakthroughs

  1. Velocity-Sensitive Width Tapering: Simulates authentic fountain pen nib dynamics where rapid strokes thin into delicate hairlines, while lingering strokes swell with ink pooling.
  2. Sub-16ms Glass-to-Glass Latency: By utilizing OffscreenCanvas inside dedicated Web Workers, drawing operations remain completely immune to DOM reflows and garbage collection pauses.
  3. Lossless Vector Serialisation: Strokes are stored as compact parametric vector points rather than raster bitmaps, enabling infinite resolution zooming and crisp SVG export.

Explore More Systems

View full portfolio of AI architectures, creative technology, and open systems.

All Projects