この記事は グラフィックス全般 Advent Calendar 2025 9日目の記事です。
作者は個人でElectron＆Webなお絵かきアプリを制作中です（9年目）
今回の記事のソースコードはGitHubで公開しています。
動くデモはこちら。
背景
個人でお絵かきウェブアプリを作成しています。
2022年の投稿で、４点グラデーショングリッドの試作について紹介したことがあります。（去年だと思ってたのに3年前で驚愕しましたが、どうでもいいですね…
今年に入り、お絵描きアプリでグラデーション機能を作ることにしました。ただ、2022年のままだと格子模様がもろに出るため実用にはどうもなーと思いました。
そこで、一つの方法としてグリッドを細分割してなめらかにする手法を検討しました。
Catmull–Clark subdivision
細分割といえば、もはや説明不要の Catmull–Clark！
アルゴリズムはさっぱり理解できなかったのですが、今回はAIが作ってくれました。
しかも単にCatmull–Clarkを実装するだけでなく、グリッドグラデーションの実装に合わせて色を補間する処理まで全部AIがやってくれました。なのでコードの説明はできません…たぶん動いてます。
Blenderでメッシュを作成
Catmull–Clarkはグリッドだけでなく任意のメッシュに適用できるため、色々な形状のメッシュをBlenderで作り、JSONファイルを出力するスクリプトをAIに書かせて出力しました。
できたもの
せっかくなので色を塗ってみました。滑らか～
終わりに
なんというか、やり方が決まってることならAIが全てを解決してくれるって感じ…
この記事の方法は、実はまだ実際にアプリで使用していません。また別の方法で実現したものを採用しています。それはできればまた別の記事で紹介させていただきたいと思います。