生成AIの支援によるCGプログラム作成

ＣＧ関連の基礎技術(約290）のプログラムコードを最近の生成ＡＩ（Copilot, Claude,Gemini,ChatGPT）で作成(JavaScript,一部WebGL)してみた。　 2024/11/3；2025/6/28更新(1個以上開発/日）)
殆どのプログラムはhtmlファイルにjsファイルが含まれてるので、AIが出力したhtmlファイルをクリックするのみで実行される(Ctrl uでソース表示)。　生成AIの知識不足のため結果が不正確なものも数個含まれてます。動くサイト、操作の動画集、目次、内容　[ 学生作品、曲線、フラクタル、流体、座標変換、画像処理] など多種多様 :代表例 1, 2,3,4,
　参考；学会発表 (2025/3/10)、　このファイル、ベジエクリッピングの例, CGARTS CG体験学習講義歴

　　　ｆ

CG基礎
ワイヤーフレーム表示	立方体の陰影表示　three.js	ドーナツ形状の表示（マウスで回転）three.js
Raytracing webGL	Zバッファー法で描画	レイトレーシング (3球）、 1球（映り込み＋影）
レイトレーシング	スムーズShading	スライダー制御の陰影表示
隠面消去：Zbuffer法	隠面消去：Painter's algorithm	隠面消去：raytracing（影付）
曲面のZバッファ法	パストレーシング法	最小レイトレーシング
隠面消去:NURBS　zソート法	隠面消去:Bezier raytracing	パーティクルシステム（アニメーション） three.js
レイマーチング法webGL	レンズ形状レイマーチング法　webGL	花火パーティクルシステム (マウスで点火)three.js
モーションブロー	立方体の表示法切り替えthree.js	球の表示法の切り替え three.js
レイマーチング法（屈折）　webGL	レイトレーシング法（屈折）	レイトレーシング法（屈折率指定）　 three.js
色の補間	多角形の走査変換	グローのスムーズシェーデイング
グリッドで三角形の塗りつぶし	SingleValuFunc	一価関数の３D表示
3次元メタボール	2次元メタボール	3Dmetaball
ワーピング	FFD(自由形状変形)	3次元FFD
レイマーチング法によるCSGモデル	サブサーフェススキャタリング	分散レイトレーシング法
Surfelsによる点群表示	CookTranceの金属反射モデル	微分レンダリング

ビル群の自動生成		ドローネ三角形利用モーフイング
	ボクセル描画	簡易版マーチングキューブ法
LOD	被写界深度	群衆シミュレーション
Shadow Map	アンチエリアシング	布のシミュレーション
スクラプティング	アンビエントオクルージョン	髪のシミュレーション
自然現象・大気散乱
ビルボード利用雲	ヴォリュームレンダリング雲	パーティクル雲
土星の環	ボリュームレンダリングによる地球大気	宇宙から見た地球
空の色と海	海の波	水中のコースティックス
ボリュームライト		<
3角形と点・曲線の交差判定・最近点検出
2次元；3角形とベジエ曲線の交差	３次元；3角形と直線の交差	３次元；3角形とベジエ曲線の交差　 3角形とベジエ曲線の交差/最近点
3角形と点の最短距離	３角形とベジエ曲線交差	3角形と点との最近距離
3角形とベジエ曲線の交差；アニメ	3角形とベジエ曲線の交差(座標表示)	3角形ベジエ関数の距離
コーネルボックスで各種レンダリング手法
コーネルボックス three.js	コーネルボックス点光源　 three.js	コーネルボックスPathtracer
コーネルボックス；パストレーシング（面光源）	コーネルボックス面光源 three.js	コーネルボックス間接光
コーネルボックスRaｙtracer　（影）	コーネルボックス；レイトレーシング（屈折、映り込み）	コーネルボックス；photonmap （集光効果）　300行
パストレーシング法
各種の形状ファイルのビジュアライザー
objファイルの描画>	obj-fileのワイヤフレーム	fbx-fileの表示
Glbファイルの描画	vrmﾌｧｲﾙの描画, 庭子, 西田ﾓﾃﾞﾙ　530行
座標変換
座標変換２D	座標変換３D	投影法
2次元アフイン変換
マッピング/テクスチャ生成

テクスチャーマッピング（ファイル選択) three.js	テクスチャーマッピング three.js	バンプマッピング three.js
立方体のソリッドテクスチャー	球や立方体へのディスプレースマッピング	バンプマッピング
バンプマッピング	手続き的テクスチャー生成	生成AI支援テクスチャー生成
ソリッドテクスチャー	遺伝的ｱﾙｺﾞﾘｽﾞﾑによるテクスチャー生成	遺伝的　テクスチャー生成
環境マッピング	UVマッピング	ミップマップ法
メッシィイング、サブデイビジョン・サーフェース
球のメッシュ化	球の三角形メッシュ化	catmull-clark-subdivision
Loopのサブデイビジョンサーフェース	Loopのサブデイビジョンサーフェース	catmull-clarkの再分割、線画
	球の三角形メッシュと交差判定
曲線/曲面
ベジエ曲線（マウス操作）	有理ベジエ曲線の分割	有理ベジエ曲線の分割(下部重み指定）
ベジエ曲線（次数指定、制御点移動） Bezier曲線の制御点の凸包、	Bezier曲線の制御点の凸包、	３D曲線の表示(マウスで変更)three.js
BezierSurface 2D	BezierSurface 3D(points)	3次元の3次Bezier曲面(shaded)
Bezier曲面	６ｘ４点の3次Nurbs曲面	3次元の3次Nurbs曲線
NURBS曲線	デボアの方法を用いたNURBS曲線	NURBS曲線の編集・分割
NURBS曲線Edit	２つのNURBS曲線（最短点）	３DーNURBS曲線の編集
2次有理Bezier曲線による1/3円弧	2次有理Bezier曲線による4分の１円弧	3次有理Bezier曲線による３D円
NURBS曲線によるスプリング	スパイラル曲線（三角関数表現）	NURBS曲面による球
ベジエ曲線の次数上げ	ニュートン法を用いた交点	ベジエクリッピングを用いた曲線交差
折れ線近似のNURBS曲線の交差	ベジエクリッピング（幅を交差する区間	円と曲線の衝突（アニメーション）
Bspline曲面	coons曲面	cutmal-Romスプライン曲線・ベジエ曲線に変換
ガウスニュートン法を用いたベジエ曲線の交点	3D曲線上をマウスクリック three.js	ベジエ曲線とベジエ曲面の交差
ベジエ曲面と球との距離	ベジエ曲面と線分の交差, 計算法選択版	ベジエ曲面とベジエ曲線との交差
ベジエ曲面と円柱の交差	ベジエ曲線の分割と包含円柱	ベジエ曲面と線分の最近点・交差、改訂版
ベジエ曲面と曲線の最短距離, 改訂版	6x6のNURBS曲面	circleのNURBS曲線
トーラス曲面のnurbs表現,	6x13のNURBS曲面回転体	NURBS曲面回転体
有理ベジエ曲面の回転体	ヘルミート曲線	NURBS曲線のノット挿入
Bスプライン曲線のBezier曲線への変換	NURBS曲線の分割・ノット挿入	Bスプライン曲面のBezier曲面への変換
境界箱を用いたＢezier曲線の交差	多項式からベジエ関数への変換	ファットラインを用いた交差
アニメーション
キーフレームアニメーション	IKアニメーション	ボーン・スキニングアニメーション
spotLight光跡	2Dmetaball	2balls
anime	glbデータのアニメ	トーラスのアニメ
underwater	海中のコーステック/ ?	海の波の進行
フラクタル
コッホ曲線	チェルビンスキーの三角形	Lシステム
マンデルブロー集合	フラクタル曲線（中点変位）	PerlinNoise
マンデルブロー集合	２Dフラクタル山	3D フラクタル山
juliaSet	Lシステムの森	Fractal島と海
流体計算、点群
格子法の流体計算、　追加版	粒子法による流体	簡易格子法
点群を描画	流れアニメーション　webGL	レベルセット法
SPH法による流体計算	煙の流体計算	AI利用の流体計算； GNN利用の流体/ GNN利用の流体（）/ GNN利用の流体計算ー2/ GNN利用の流体計算ー１
AI利用
GNN利用の流体	GNN利用の流体（）	GNN利用のレイトレース
GNN利用のアニメーション	GNNを用いた変形	生成AIによる曲線の自動生成
GNN利用の流体計算ー2	生成AI支援によるCSGモデル	NeRFの概念デモ
GNN利用の流体計算ー１	GNN利用の炎流体計算/ G旧版	GNN利用の髪の毛シミュレーション
生成AIによる画像生成	ニューラルレンダリング
その他
指数関数の描画	長方形同士の交差判定	線分のクリッピング法(領域コード法） /簡易版
線分の交差判定	ブレゼンハムの線分生成	グリッドでのブレゼンハムアルゴリズム
ニューラルネットワーク	DDAで線分描画
多角形の内部判定（マウスで指定した点が内部か）	走査変換と多角形の内部判定	ウィンドウで多角形をクリップ
ボロノイ図	凸包	ポケモン風
CellAutomaton	boundingCircle	加算のみの円描画
多角形のクリッピング	多角形と水平線の交差	レインボー
2025カレンダー　　 N	円の交差領域	円柱と直方体の交差判定
画像処理
バイレテラルフィルタ	3 filters	Edge filters
モザイク	2値化	ネガポジ反転
セグメンテーション	グラフカット法
ゲーム
shooting　　【操作方法】 >左矢印キー：左移動>　右矢印キー：右移動スペースキー／上矢印キー：弾を発射	戦闘機攻撃	オセロゲーム
BlackJack	15Puzzle	Tic-Tac-Toe
インベーダGame	テトリスGame
説明図
反射．屈折モデル（入射角等指定）	Phongの鏡面反射モデル（エラーあり）	3原色の混合（エラー） 3原色の混合
CookTrance反射BRDF	球面調和関数の可視化	PhongのBRDF可視化
色環	大気散乱の位相関数（点表示）	大気散乱の位相関数（曲面表示）
学生の制作
ラジオシティ法	Zbuffer法（２三角形）	地球マッピング
花火	フラクタル葉	曲線軌道のモーションブラー
レンズのシミュレーション	点光源	レイマーチング法による箱
準備中
Bspline2Bezier	空の色（レーリー散乱）	ベジエ曲面を描画（WebGL);エラー webGL
マーチンキューブ法で球		ベジエ曲面を描画（WebGL)　エラー
波面のバンプマッピング	非写実表現（NPR）	回転体；点からの最短点
未解決； NURBS曲線をBezierに変換、ポイントレンダリング、サブサーフェススキャタリング、	サブディビジョンサーフェス、微分レンダリング、マーチンキューブ法、モーフイング	スケルトンアニメーション海面の波の表示

目次　（2025・6・30現在）
1) 基本的なＣＧアルゴリズム
ワイヤーフレーム表示、立方体の陰影表示、ドーナツ形状の表示座標変換；座標変換２D、座標変換３D、投影法、 2次元アフイン変換モデリング； catmull-clark-サブデイビジョンサーフェース、 Loopのサブデイビジョンサーフェース、 catmull-clarkの再分割、線画、球のメッシュ化、球の三角形メッシュ化、 2次元メタボール、 3次元メタボール、 3Dメタボール、 3次元FFD、生成AIによる曲線の自動生成、レイマーチング法によるCSGモデル　　交差判定；三角形メッシュの球と線分の交差判定、　３次元；3角形と線分の交差、 2次元；3角形とベジエ曲線の交差、３次元；3角形とベジエ曲線の交差、　 3角形とベジエ曲線の交差/最近点、　 3角形と点の最短距離、３角形とベジエ曲線交差、 3角形と点との最近距離、 3角形とベジエ曲線の交差；アニメ隠面消去；レイトレーシング（2球）、 Zバッファー法で描画（2球）、レイトレーシング (3球）、レイトレーシング・1球映り込み＋影、 2球のレイトレーシング、 3角形の隠面消去：Zbuffer法、 3角形の隠面消去：Painter's algorithm、 NURBS曲面メッシュの隠面消去:zソート法、 Bezier曲面のraytracing、最小レイトレーシング、曲面のZバッファ法、分散レイトレーシング法、パストレーシング法、レンズ形状レイマーチング法、立方体の表示（ワイヤーフレーム・陰影表示）、球の表示（ワイヤーフレーム・陰影表示）、レイマーチング法（屈折）、レイトレーシング法（Phongの反射）（屈折率指定）、レイマーチング法によるCSGモデルシェーデイング(反射モデル)；スムーズシェーデイング（グロー/フォン）、グローのスムーズシェーデイング、スライダー制御の陰影表示（平行光線・点光源）、 Phongの反射モデル、 CookTranceの金属反射モデル、 CookTranceモデルの関数、ビルボード利用雲、ヴォリュームレンダリング雲、サブサーフェス・スキャタリングコーネルボックス：　コーネルボックス；点光源、コーネルボックス；Pathtracer、（面光源）、コーネルボックス；面光源、コーネルボックス；間接光、コーネルボックス；パストレーシング法、コーネルボックス；パストレーシング、コーネルボックスRaytracer（影）、コーネルボックス；レイトレーシング（屈折、映り込み）、コーネルボックス；フォットンマップ法による集光効果、レイマーチング法（球, 立方体, 屈折を含む）, マッピング；テクスチャーマッピング、球へのバンプマッピング、ソリッドテクスチャー、デスプレースマッピング、環境マッピング、長方形へバンプマッピング(正弦波)、長方形へバンプマッピング（正弦波の合成）、　ソリッドテクスチャー（テクスチャーマッピングと比較）、 UVマッピング、ミップマップ法、遺伝的　テクスチャー生成、遺伝的ｱﾙｺﾞﾘｽﾞﾑによるテクスチャー生成、手続き的テクスチャー生成変形； FFD(自由形状変形)、ワーピング、 3次元FFD、ドローネ三角形利用モーフイング、 GNNを用いた変形各種の形状ファイルのビジュアライザー； objファイルの描画、 objファイルのワイヤフレーム、 fbx-fileの表示、 Glbファイルの描画、 vrmﾌｧｲﾙの描画（庭子, 西田ﾓﾃﾞﾙ） AI関連；ニューラルレンダリング、 NeRFの概念デモ、ニューラルネットワーク視覚化、生成AIによる画像生成、生成AIによる曲線の自動生成、　生成AI支援テクスチャー生成、生成AIによる曲線の自動生成、生成AI支援によるCSGモデル、 GNN利用のアニメーション、 GNN利用のレイトレース、 GNN利用の流体/ GNN利用の流体（改善版）、 GNN利用の髪の毛シミュレーション、 GNN利用の流体計算-1、 GNN利用の流体計算-2、 GNN利用の炎流体計算/ G旧版　各種レンダリング；モーションブロー、分散レイトレーシング法；半影、モーションブロー、パーティクルシステム、花火パーティクルシステム、 Surfelsによる点群表示、微分レンダリング、遺伝的ｱﾙｺﾞﾘｽﾞﾑによるテクスチャー生成、遺伝的ｱﾙｺﾞﾘｽﾞﾑによるテクスチャー生成（シンプル版）、ボリュームライト、ビル群の自動生成、ボクセル描画、簡易版マーチングキューブ法、群衆シミュレーション、 Shadow Map、布のシミュレーション、髪のシミュレーション,、スクラプティング、アンビエントオクルージョン、アンチエリアシング自然物；　宇宙から見た地球、土星の環、ボリュームレンダリングによる地球大気、空の色と海、パーティクル雲、海の波、水中のコースティックス
2) 曲線・曲面表示
ベジエ曲線・曲面；ベジエ曲線、有理ベジエ曲線の分割、有理ベジエ曲線の分割(下部重み指定）、ベジエ曲線（次数指定、制御点移動）、ベジエ曲線の次数上げ、ベジエ曲線の制御点の凸包、２次元版有理ベジエ曲線の分割、２次元版ベジエ曲面、３次元版ベジエ曲線の表示、３次元版ベジエ曲面(points)、 3次元の3次ベジエ曲面(shaded)、３次元版ベジエ曲面(ワイヤーフレーム・陰影表示) Bspline/NURBS曲線・曲面； NURBS曲線、デボアの方法を用いたNURBS曲線、 NURBS曲線の編集・分割、 NURBS曲線の編集、　２つのNURBS曲線（最短点）、 NURBS曲線のノット挿入、 NURBS曲線の分割・ノット挿入、 Bスプライン曲面のBezier曲面への変換、 3次元の3次NURBS曲線、３次元版NURBS曲線の編集、 Bspline曲面、 6ｘ4点の3次NURBS曲面、 6x6点のNURBS曲面、 Bスプライン曲面のBezier曲面への変換　曲線応用； 2次有理Bezier曲線による1/3円弧、 2次有理Bezier曲線による4分の１円弧、 NURBS曲線による円、 3次有理Bezier曲線による３D円、 NURBS曲線によるスプリング、スパイラル曲線（三角関数表現）、　NURBS曲面による球、 cutmal-Romスプライン曲線をベジエ曲線に変換、有理ベジエ曲面の回転体、トーラスの2次NURBS表現、 6x13点のNURBS曲面回転体、 Bスプライン曲線のBezier曲線への変換、ヘルミート曲線、 Coons曲面、多項式からベジエ関数への変換交差判定；ニュートン法を用いたベジエ曲線の交点、ベジエ曲線の交点、ベジエクリッピングを用いた曲線交差, NURBS曲線の交差、ベジエクリッピング、　円と曲線の衝突、 3D曲線上をマウスクリック、ベジエ曲線とベジエ曲面の交差、ベジエ曲面と球との距離、ベジエ曲面と線分の交差, 計算法選択版、ベジエ曲面とベジエ曲線との交差、ベジエ曲面と円柱の交差、ベジエ曲線の分割と包含円柱、ベジエ曲面と線分の最近点・交差/ 改訂版、ベジエ曲面と曲線の最短距離/ 改訂版、境界箱を用いたＢezier曲線の交差、ファットラインを用いた曲線の交差、 3角形とベジエ曲線の交差(座標表示)
3)　流体計算
格子法の流体計算/改良版、粒子法による流体、簡易格子法、点群を描画、 SPH法による流体計算、レベルセット法、流れアニメーション;webGL, 煙の流体計算、 AI利用の流体計算； GNN利用の流体/ GNN利用の流体（）/ GNN利用の流体計算ー2/ GNN利用の流体計算ー１
4) アニメーション
キーフレームアニメーション、 IKアニメーション、海の波の進行、動くspotLight光跡、動く2Dメタボール、　動く2つのボール、スケルトンanime、glbデータのアニメ、トーラスのアニメ、海中のアニメ, 海中のコーステック、ボーン・スキニングアニメーション
5) フラクタル
コッホ曲線、チェルビンスキーの三角形、 Lシステムによる樹木生成、マンデルブロー集合、フラクタル曲線（中点変位法）、パーリンノイズ、マンデルブロー集合、julia集合、２Dフラクタル山、フラクタルによる3Dフラクタル山、フラクタル葉、フラクタル島と海、 Lシステム生成の森、
6) 幾何図形
長方形同士の交差判定、線分のクリップ、線分のクリッピング法(領域コード法）、線分の交差判定、ブレゼンハムの線分生成、グリッドでのブレゼンハムアルゴリズム、 DDAでの線分描画、多角形の内部判定（マウスで指定した点が内部か）、走査変換と多角形の内部判定、ウィンドウで多角形をクリップ色の補間、多角形の走査変換、ボロノイ図、線分クリップ、点群の凸包、セルオートマトン、包含円の算出、加算のみの円描画、多角形同志のクリッピング、多角形と水平線の交差、レインボー、円の交差領域、円柱と直方体の交差判定
5) 画像処理
バイレテラルフィルタ、 3種類のフィルタ処理、 Edgeフィルタ、モザイク処理、 2値化、ネガポジ反転、グラフカット法によるｾｸﾞﾒﾝﾃｰｼｮﾝ、セグメンテーション
6) ゲーム
シューティングゲーム、戦闘機攻撃、オセロゲーム、ブラックジャック、１５ゲーム;15Puzzle、 Tic-Tac-Toe、インベーダ　ゲーム、テトリス　ゲーム
７)　CG技術説明図
反射・屈折モデル, Phongの鏡面反射モデル、 3原色の混合、色環、球面調和関数の可視化、 PhongのBRDF可視化、 CookTrance反射BRDF、大気散乱の位相関数（点表示）、大気散乱の位相関数(曲面表示)
8) 学生作品
略

生成AIの利用方法・経験（プロンプト例）
一行程度のプロンプトで書ける。例えば「〇〇法を用いて△を描くコードをＪavaＳcriptで書け。」と簡単で、追加で「マウスでみる方向を変えるように修正」とか　「ｘｘのエラーが出たので修正してください」を追加する程度。曲線の例；「3次のベジエ曲線を描くコードをＪavaＳcriptで書け。」　次に「制御点と制御多角形も描け。」　次に「次数を２から６までsliderで指定できるようにし、制御点はマウスで移動できるようにしてください」とプロンプトを入力。ゲームの例；「シューティングゲームをＪavaＳcriptで書け」、次に「操作方法をHTMLファイルに書け」と簡単結果はｈｔｍｌにＪavaＳcriptを含んで出力される。〇〇．ｈｔｍｌファイルを作成しクリックすると実行される。あるいはｈｔｍｌとＪavaＳcriptファイルを別に出力される。ｈｔｍｌにjsファイルを呼ぶように記述されてるので、ｈｔｍｌファイルクリックすると実行される。
CGが分かるとはどういう意味であるか。・レベルA;　CGソフトを使いこなしＣG作品が創れる・レベルB;　CGで使われるレイトレーシング法などのアルゴリズムを理解してる・レベルC;　同上の基本的技法のプログラムを組める・VR、メタバース、ゲームなどの応用で、CGをツールとして使える生成AIが進歩した今の学生は、プログラミングの講義は受けてなくても、CGの基本技法を体験できることが重要である。
なぜＪavaＳcriptで生成AIに作らせるか？　手軽にでき携帯電話でも動作出来ることが重要；C言語やPythonnが一般的であるがこれらはコンパイラーが必要で有料なことが多い。ブラウザーがみれる端末ならどんな装置でもいいことから、ｈｔｍｌとＪavaＳcriptで動作するというのは利便性がいい。このサイトの幾つかは列車の中でスマホで生成 AIを利用して作成した。

生成AIIに AIを利用したコーデイングに聞いたら下記の特徴

生成AI（例えばCopilot）によるプログラミングの有効性について、多くの観点から考えることができます。ここにいくつかの主要なポイントを挙げてみます：

効率の向上

生成AIはプログラマーのコード作成やデバッグの作業を迅速に行うことで、開発の効率を大幅に向上させます。例えば、基本的なテンプレートの生成や一般的なプログラミングパターンの提供により、プログラマーは反復的なタスクに費やす時間を節約できます。

エラーレートの削減

AIは大量のデータを学習し、一般的なエラーやバグを検出する能力を持っています。そのため、生成AIを使うことで、コードのエラーレートが削減され、より高品質なソフトウェアを開発することが可能です。

学習と教育

生成AIは、初心者プログラマーや学習者にとって優れた教育ツールとなり得ます。AIは複雑なプログラムやアルゴリズムの構造を示し、ステップバイステップでコードの説明を提供することで、プログラミングスキルの向上を助けます。

創造性の促進

プログラマーはAIを使って新しいアイデアを生成し、それを基に独自の創造的なプロジェクトを進めることができます。生成AIは、多様なソリューションを提案することで、プログラマーの発想力を刺激します。

チームコラボレーションの強化

生成AIは、チーム開発の際にも大いに役立ちます。AIはコードレビューやドキュメントの生成、さらにはタスクの自動化までを支援することで、チームのコミュニケーションと効率を向上させます。

開発に至る経緯
1998年	2000年	1998年、CGの講義を補助し体験・遠隔学習を実現するのが目的で西田が製作したＣＧの基礎から応用（最先端の研究も含む）の Java Appletがあります。これはCD化（左画像参考）し発売しました。その後CG教科書の付録としました。教科書を発売した。2000 年11月にＣGＡRTS協会がCGを独学で学習する方のために開講した「インターネット通信講座 CG標準コース[技術編]Part1」と「同講座Part2」（その後に講座名変更：「CG-ARTS e-ラーニングCGテクニックスマスターコース」）で、CGアルゴリズムの理解を体験的に行えるように開発したJava教材（左の画像参照）とされた。この教材は2002年に情報処理学会から「優秀教材賞」を頂いた。2017年には教材開発を発表し、CGARTSのサイトにて無料公開した。同時にこの体験サイトはN高校の教材にも採用された。近年の生成AI（例えばCOPILOT）の進化により、体験するのみでなくプログラム作成の教育にも有効利用できるように本サイトを作成した。