推奨環境: 幅960px以上

    コンピュータグラフィクス論(2020) 課題

    第2回(Model-1)

    概要

    three.jsおよびその React 向けのAPIを提供するreact-three-fiberを用いて、様々な曲線を実装した。

    動作は macOS Catalina 10.15.3(19D76)上で動作する Google Chrome 81.0.4044.113 により確認した。

    ソースコードはGithubで閲覧可能である。この課題に特に関係のあるファイルとして、task.tskappa.tsR2Task.tsxが挙げられる。

    課題スライドに示されたものの中では、以下のものを実装した。

    • 2次ベジェ曲線
    • 制御点をマウスで追加
    • 一般のn次ベジェ曲線
    • ベジェ曲線の分割
    • 有理ベジェ曲線
    • 3次Catmull-Romスプライン
    • Catmull-Romスプラインのノット列の与え方(3通り)
    • Bスプライン、NURBS
    • 3D空間上のベジェ曲面
    • κ-Curves

    ベジェ曲線

    3次元空間上に一般のn次ベジェ曲線を描画した。計算方法は単純な多項式評価(, (3D(カメラ操作によりy座標を確認できる)))と de Casteljau のアルゴリズム()の双方を実装した。de Casteljau のアルゴリズムを使用している際には曲線の分割操作((例B3の曲線の t≦0.7 の切り取り))も可能である。

    さらに、有理ベジェ曲線も単純な多項式評価により実装した()。これにより円弧(の一部)を原理的には正確に描画できる(, 参考: id:metanest, メモ: 有理ベジェ曲線による円弧 - ksmakotoのhatenadiary)。

    Catmull-Rom スプライン

    3次元空間上の Catmull-Rom スプラインを実装した。ノット列として Uniform ()、Chordal ()、Centripetal ()の3種を実装した。

    NURBS

    3次元空間上の非一様有理 B-スプラインを実装した((一様), (開一様), (非一様), (非一様、有理、3D))。0除算エラーの対処は Alistair Buxton, computational geometry - Potential Division by zero in the construction of NURBS basis functions: how to handle? - Mathematics Stack Exchangeを参考にした。

    κ曲線

    講義で提示された @Rijicho_nl, UX最強のベジェ曲線「κ-Curves」を完全に理解する - Qiitaを参考に、3次元空間上の κ-Curves を実装した(, (3D、非ループ))。なお、現在は当該資料に JavaScript による実装(🐰)が掲載されているが、実装開始時にはなかったため、C# による実装を移植した。

    有理ベジェ曲面

    制御点をn(平方数)個与えたとき、それを √n 個ごとに区切ったものを用いた有理ベジェ曲面の描画を実装した(, (重みつき))。計算には de Casteljau のアルゴリズムではなく、単純な多項式評価を用いた。

    ↑ scrollable