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

ＣＧ関連の基礎技術(ほぼ100）のプログラムコードを最近の生成ＡＩ（特に Copilot）で作成(JavaScript,一部WebGL)してみた。　 2024/11/3
殆どのプログラムはhtmlファイルにjsファイルが含まれてるので、AIが出力したhtmlファイルをクリックするのみで実行される。　参考；このファイル、ベジエクリッピングの例, CGARTS

CG基礎
ワイヤーフレーム表示	立方体の陰影表示　three.js	ドーナツ形状の表示（マウスで回転）three.js
Raytracing webGL	ｚバッファー法で描画	レイトレーシング (ﾌﾚｰﾑﾊﾞｯﾌｧに書込）
コーネルボックス three.js	パーティクルシステム（アニメーション） three.js	レイトレーシング
レイマーチング法webGL	レンズ形状　レイマーチング法　webGL	花火パーティクルシステム (マウスで点火)three.js
モーションブロー	立方体の表示法切り替えthree.js	球の表示法の切り替え three.js
レイマーチング法（屈折）　webGL	レイトレーシング法（屈折）	レイトレーシング法（屈折率指定）　 three.js
テクスチャーマッピング（ファイル選択) three.js	テクスチャーマッピング three.js	バンプマッピング three.js
色の補間	多角形の走査変換	グローのスムーズシェーデイング
グリッドで三角形の塗りつぶし	SingleValuFunc	一価関数の３D表示
流れアニメーション　webGL
曲線/曲面
ベジエ曲線（マウス操作）	有理ベジエ曲線の分割	有理ベジエ曲線の分割(下部重み指定）
ベジエ曲線（次数指定、制御点移動）ベジエ関数の凸包	ベジエ関数の凸包	３D曲線の表示(マウスで変更)three.js
BezierSurface 2D	BezierSurface 3D(points)	BezierSurface 3D(shaded)
NURBS曲線	デボアの方法を用いたNURBS曲線	3D曲線上をマウスクリック three.js
ベジエ曲線の次数上げ	ニュートン法を用いた交点	ベジエクリッピングを用いた曲線交差
折れ線近似のNURBS曲線の交差	ベジエクリッピング（幅を交差する区間	円と曲線の衝突（アニメーション）
ガウスニュートン法を用いたベジエ曲線の交点	ベジエ曲面を描画（WebGL);エラー webGL	ベジエ曲面を描画（WebGL)　エラー
境界箱を用いたＢezier曲線の交差	多項式からベジエ関数への変換	ファットラインを用いた交差
フラクタル
コッホ曲線	チェルビンスキーの三角形	Lシステム
マンデルブロー集合	フラクタル曲線（中点変位）	PerlinNoise
3Dフラクタル山	２Dフラクタル山
その他
指数関数の描画	長方形同士の交差判定	線分のクリップ
線分の交差判定	ブレゼンハムの線分生成	グリッドでのブレゼンハムアルゴリズム
多角形の内部判定（マウスで指定した点が内部か）	走査変換と多角形の内部判定	ウィンドウで多角形をクリップ
ボロノイ図	凸包	ポケモン風
2025カレンダー	多角形と水平線の交差	レインボー
画像処理
バイレテラルフィルタ	3 filters	Edge filters
モザイク	2値化	ネガポジ反転
ゲーム
shooting　　【操作方法】 >左矢印キー：左移動>　右矢印キー：右移動スペースキー／上矢印キー：弾を発射	戦闘機攻撃	オセロゲーム
BlackJack	15Puzzle	Tic-Tac-Toe
説明図
反射．屈折モデル（入射角等指定）	Phongの鏡面反射モデル（エラーあり）	3原色の混合（エラー）
学生の制作
ラジオシティ法	Zbuffer法（２三角形）	地球マッピング
フラクタル葉	花火	曲線軌道のモーションブラー
レンズのシミュレーション	点光源	レイマーチング法による箱
未解決； 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）の進化により、体験するのみでなくプログラム作成の教育にも有効利用できるように本サイトを作成した。