位相幾何学の絵本を描く：ブラウザで手描きハッチングされた3D曲面

グラフィックスには、ほとんどのウェブ開発者が触れることのない静かな一角があります。それは非写実的レンダリングです。その目標はリアリズムではなく、明瞭さと技巧です。新しいインタラクティブページ、A Topological Picture Book, Renderedは、その技巧をブラウザにもたらし、位相幾何学や微分幾何学の古典的な曲面を、まるで20世紀半ばの数学書の手描きイラストのように探求させてくれます。

このツールは、パラメトリック曲面と陰関数曲面（Boy曲面、Morin曲面、トーラス結び目など）を、ストロークベースのパイプラインで描画します。ピクセルではなく、出力は広いペン先を模したテーパー状のリボンの集合です。シルエットはメッシュ上のn・vのゼロ集合として計算され、滑らかな曲線に連鎖します。隠線はGPU可視性パスで処理され、破線または淡い線で描画されます。ハッチングは主曲率方向に従い、トーン用に3段階の密度があり、影の領域でのみクロスハッチングが行われます。

印象的なのは、古典的な技法への忠実さです。このページは、SIGGRAPHとEurographicsの論文の系譜—HertzmannとZorinのIllustrating Smooth Surfaces、Appelのハロー線効果、JobardとLeferの流線間隔—を引用し、それらを忠実に実装しています。その結果は、安っぽいフィルターではなく、Francisの1987年のTopological Picture Bookに見られる彫版スタイルの本物の再現です。

内部では、現代のウェブ技術と古典的なアルゴリズムが混在しています。陰関数曲面はマーチングテトラヘドラでポリゴン化されます。浸漬の二重点はレイと三角形の交差テストで見つけられます。主曲率方向はメッシュ上で計算され、流線は分離距離ルールでトレースされ、ハッチングを均一に保ちます。UIでは、ストローク間隔、ペン幅、手ぶれ、インクのにじみ、紙の質感まで、すべてを調整できます。

エンジニアにとって、これは30年前のグラフィックス研究パイプラインをインタラクティブなウェブアプリに変換するマスタークラスです。また、ブラウザが90年代にはワークステーションを必要としたリアルタイムNPRを現在可能にしていることを思い出させてくれます。コードはオープンで、数式、ハッチングロジック、レンダリングパスを調べることができます。ノイズの多いメッシュからきれいな線を引く方法を考えたことがあるなら、このページは解剖する価値があります。