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

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

CG基礎
ワイヤーフレーム表示	立方体の陰影表示　three.js	ドーナツ形状の表示（マウスで回転）three.js
Raytracing webGL	ｚバッファー法で描画	レイトレーシング (ﾌﾚｰﾑﾊﾞｯﾌｧに書込）
コーネルボックス three.js	コーネルボックス点光源　 three.js	レイトレーシング
コーネルボックス；パストレーシング（面光源）	コーネルボックス面光源 three.js	コーネルボックス間接光
コーネルボックスRaｙtracer　（影）	コーネルボックス；レイトレーシング（屈折、映り込み）	コーネルボックス；photonmap （集光効果）
隠面消去：Zbuffer法	隠面消去：Painter's algorithm	隠面消去：raytracing（影付）
隠面消去:NURBS　zソート法	隠面消去:Bezier raytracing	パーティクルシステム（アニメーション） three.js
smoothShading	Glbファイルの描画>
objファイルの描画>	obj-fileのワイヤフレーム	fbx-fileの表示
レイマーチング法webGL	レンズ形状　レイマーチング法　webGL	花火パーティクルシステム (マウスで点火)three.js
モーションブロー	立方体の表示法切り替えthree.js	球の表示法の切り替え three.js
レイマーチング法（屈折）　webGL	レイトレーシング法（屈折）	レイトレーシング法（屈折率指定）　 three.js
色の補間	多角形の走査変換	グローのスムーズシェーデイング
グリッドで三角形の塗りつぶし	SingleValuFunc	一価関数の３D表示
3次元メタボール	2次元メタボール	3Dmetaball
FFD(自由形状変形)	ワーピング	スライダー制御の陰影表示
座標変換
座標変換２D	座標変換３D	投影法
2次元アフイン変換
マッピング

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

生成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）の進化により、体験するのみでなくプログラム作成の教育にも有効利用できるように本サイトを作成した。