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

CG関連の 基礎技術(約280)のプログラムコードを最近の生成AI(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


一価関数の3D表示


3次元メタボール

2次元メタボール

3Dmetaball

ワーピング

FFD(自由形状変形)

3次元FFD

レイマーチング法によるCSGモデル

サブサーフェススキャタリング

分散レイトレーシング法

Surfelsによる点群表示

CookTranceの金属反射モデル

微分レンダリング

ビル群の自動生成

宇宙から見た地球

ドローネ三角形利用モーフイング

ビルボード利用雲

ヴォリュームレンダリング雲

ボリュームライト

土星の環

ボリュームレンダリングによる地球大気

空の色と海

ボクセル描画

簡易版マーチングキューブ法 

LOD

被写界深度

群衆シミュレーション

Shadow Map

アンチエリアシング

布のシミュレーション

  スクラプティング

アンビエントオクルージョン

髪のシミュレーション
3角形と点・曲線の交差判定・最近点検出


2次元;3角形とベジエ曲線の交差

3次元;3角形と直線の交差

3次元;3角形とベジエ曲線の交差  3角形とベジエ曲線の交差/最近点 

3角形と点の最短距離

3角形とベジエ曲線交差

3角形と点との最近距離 

3角形とベジエ曲線の交差;アニメ

3角形とベジエ曲線の交差(座標表示)

3角形ベジエ関数の距離
コーネルボックスで各種レンダリング手法


コーネルボックス three.js
  
コー ネルボックス点光源  three.js

コーネルボックスPathtracer
 
コーネルボックス;パストレーシング
(面光源) 

コーネルボックス面光源 three.js

コーネルボックス間接光

コーネルボックスRaytracer (影)  
 
コーネルボックス;レイトレーシング
(屈折、映り込み)  


コーネルボックス;photonmap
(集光効果) 300行


パストレーシング法
 
各種の形状ファイルのビジュアライザー


objファイルの描画>

obj-fileのワイヤフレーム

fbx-fileの表示

Glbファイルの描画

vrmファイルの描画, 庭子, 西田モデル 530行
座標変換

座標変換2D     

座標変換3D

投影法

2次元アフイン変換     
マッピング/テクスチャ生成
    

テクスチャーマッピング
(ファイル選択) three.js

テクスチャーマッピング three.js

バンプマッピング three.js

立方体のソリッドテクスチャー

球や立方体へのディスプレースマッピング

バンプマッピング

バンプマッピング

手続き的テクスチャー生成

生成AI支援テクスチャー生成

ソリッドテクスチャー

遺伝的アルゴリズムによるテクスチャー生成

遺伝的 テクスチャー生成

環境マッピング

UVマッピング

ミップマップ法
メッシィイング、サブデイビジョン・サーフェース

球のメッシュ化
    

球の三角形メッシュ化

catmull-clark-subdivision

Loopのサブデイビジョンサーフェース
    

Loopのサブデイビジョンサーフェース

catmull-clarkの再分割線画
    
球の三角形メッシュと交差判定
曲線/曲面

ベジエ曲線(マ ウス操作)

有理ベジエ曲線の分割

有理 ベジエ曲線の分割(下部重み指定)

ベジエ 曲線(次数指定、制御点移動)
Bezier曲線の制御点の凸包

Bezier曲線の制御点の凸包

3D曲線の表 示(マウスで変更)three.js

BezierSurface 2D

BezierSurface 3D(points)

3次元の3次Bezier曲面(shaded)

Bezier曲面

6x4点の3次Nurbs曲面

3次元の3次Nurbs曲線

NURBS曲線

デ ボアの方法を用いたNURBS曲線

NURBS曲線の編集・分割    

NURBS曲線Edit

2つのNURBS曲線(最短点)

3DーNURBS曲線の編集    

2次有理Bezier曲線による1/3円弧

2次有理Bezier曲線による4分の1円弧

3次有理Bezier曲線による3D円

NURBS曲線によるスプリング

スパイラル曲線(三角関数表現)
 
NURBS曲面による球   

ベジエ曲線の次数上げ

ニュートン法を用いた交点

ベ ジエクリッピングを用いた曲線交差

折れ線近似のNURBS曲線の交差

ベジエクリッピング(幅を交差する区間

円と曲線の衝突(アニメーション)

Bspline曲面

coons曲面

cutmal-Romスプライン曲線・
ベジエ曲線に変換


ガウスニュートン法を用いた
ベジエ曲線の交点

3D曲 線上をマウスクリック
three.js

ベジエ曲線とベジエ曲面の交差

ベジエ曲面と球との距離

ベジエ曲面と線分の交差, 計算法選択版

ベジエ曲面とベジエ曲線との交差

ベジエ曲面と円柱の交差

ベジエ曲線の分割と包含円柱

ベジエ曲面と線分の最近点・交差改訂版

ベジエ曲面と曲線の最短距離, 改訂版

6x6のNURBS曲面

circleのNURBS曲線

トーラス曲面のnurbs表現,

6x13のNURBS曲面回転体

NURBS曲面回転体

有理ベジエ曲面の回転体

ヘルミート曲線

NURBS曲線のノット挿入

Bスプライン曲線のBezier曲線への変換

NURBS曲線の分割・ノット挿入

Bスプライン曲面のBezier曲面への変換 

境界 箱を用いたBezier曲線の交差

多項式からベジエ関数への変換

ファット ラインを用いた交差
アニメーション



キーフレームアニメーション

IKアニメーション
 
ボーン・スキニングアニメーション 

spotLight光跡

2Dmetaball

2balls

anime

glbデータのアニメ

トーラスのアニメ

underwater

海中のコーステック/ ?

海の波の進行
フラクタル



コッホ曲線

チェルビンスキーの三角形

Lシステム

マンデルブロー集合

フラクタル曲線(中点変位)

PerlinNoise

マンデルブロー集合

2Dフラクタル山

3D フラクタル山

juliaSet

Lシステムの森

Fractal島と海
流体計算、点群

格子法の流体計算、 追加版

粒子法による流体

簡易格子法

点群を描画

流れアニメーション webGL

レベルセット法

SPH法による流体計算

煙の流体計算     
 AI利用の流体計算;
GNN利用の流体/ GNN利用の流体()/ GNN利用の流体計算ー2/ GNN利用の流体計算ー1
AI利用

GNN利用の流体

GNN利用の流体()

GNN利用のレイトレース

GNN利用のアニメーション

GNNを用いた変形   

生成AIによる曲線の自動生成 

GNN利用の流体計算ー2

生成AI支援によるCSGモデル

NeRFの概念デモ

GNN利用の流体計算ー1

ニューラルレンダリング 
 
生成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法(2三角形)


地球マッピング

花火


フラクタル葉

曲線軌道のモーションブラー


レンズのシミュレーション


点光源

レイマーチング法による箱
準備中


Bspline2Bezier

空の色(レーリー散乱)

ベ ジエ曲面を描画(WebGL);エラー webGL

マーチンキューブ法で球

ベ ジエ曲面を描画(WebGL) エラー

波面のバンプマッピング
    

非写実表現(NPR)

回転体;点からの最短点
未 解決 NURBS曲線をBezierに変換、ポイントレンダリング、サブサーフェススキャタリング、
サ ブディ ビジョンサーフェ ス、微分レンダリング、
マーチンキューブ法、モーフイング
スケルトンアニメーション
海面の波の表示

 
目次 (2025・6・30現在)
1) 基本的なCGアルゴリズム
ワイヤーフレーム表示立方体の陰影表示ドーナツ形状の表示
座標変換座標変換2D座標変換3D投影法2次元アフイン変換
モデリングcatmull-clark-サブデイビジョンサーフェースLoopのサブデイビジョンサーフェースcatmull-clarkの再分割線画球のメッシュ化球の三角形メッシュ化2次元メタボール3次元メタボール3Dメタボール3次元FFD生成AIによる曲線の自動生成レイマーチング法によるCSGモデル   
交差判定三角形メッシュの球と線分の交差判定、  3次元;3角形と線分の交差2次元;3角形とベジエ曲線の交差3次元;3角形とベジエ曲線の交差、  3角形とベジエ曲線の交差/最近点、  3角形と点の最短距離3角形とベジエ曲線交差3角形と点との最近距離3角形とベジエ曲線の交差;アニメ
隠面消去レイトレーシング(2球)Zバッファー法で描画(2球)レイトレーシング (3球)レイトレーシング・1球映り込み+影2球のレイトレーシング3角形の隠面消去:Zbuffer法3角形の隠面消去:Painter's algorithmNURBS曲面メッシュの隠面消去: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利用の流体計算-1GNN利用の流体計算-2
各種レンダリングモーションブロー分散レイトレーシング法;半影、モーションブローパーティクルシステム花火パーティクルシステムSurfelsによる点群表示微分レンダリング遺伝的アルゴリズムによるテクスチャー生成遺伝的アルゴリズムによるテクスチャー生成(シンプル版)宇宙から見た地球ボリュームライト土星の環ボリュームレンダリングによる地球大気空の色と海ビル群の自動生成ボクセル描画簡易版マーチングキューブ法群衆シミュレーションShadow Map布のシミュレーション髪のシミュレーション,、 スクラプティングアンビエントオクルージョンアンチエリアシング
2) 曲線・曲面表示 
ベジエ曲線・曲面ベジエ曲線有理ベジエ曲線の分割有理ベジエ曲線の分割(下部重み指定) ベジエ曲線(次数指定、制御点移動)ベジエ曲線の次数上げベジエ曲線の制御点の凸包2次元版有理ベジエ曲線の分割2次元版ベジエ曲面3次元版ベジエ曲線の表示3次元版ベジエ曲面(points)3次元の3次ベジエ曲面(shaded)3次元版ベジエ曲面(ワイヤーフレーム・陰影表示)
Bspline/NURBS曲線・曲面NURBS曲線デボアの方法を用いたNURBS曲線NURBS曲線の編集・分割NURBS曲線の編集、  2つのNURBS曲線(最短点)NURBS曲線のノット挿入NURBS曲線の分割・ノット挿入Bスプライン曲面のBezier曲面への変換3次元の3次NURBS曲線3次元版NURBS曲線の編集Bspline曲面6x4点の3次NURBS曲面6x6点のNURBS曲面Bスプライン曲面のBezier曲面への変換 
曲線応用2次有理Bezier曲線による1/3円弧2次有理Bezier曲線による4分の1円弧NURBS曲線による円3次有理Bezier曲線による3D円NURBS曲線によるスプリングスパイラル曲線(三角関数表現)、  NURBS曲面による球cutmal-Romスプライン曲線をベジエ曲線に変換有理ベジエ曲面の回転体トーラスの2次NURBS表現6x13点のNURBS曲面回転体Bスプライン曲線のBezier曲線への変換ヘルミート曲線Coons曲面多項式からベジエ関数への変換
交差判定ニュートン法を用いたベジエ曲線の交点ベジエ曲線の交点ベジエクリッピングを用いた曲線交差, NURBS曲線の交差ベジエクリッピング、 円と曲線の衝突3D曲線上をマウスクリックベジエ曲線とベジエ曲面の交差ベジエ曲面と球との距離ベジエ曲面と線分の交差, 計算法選択版ベジエ曲面とベジエ曲線との交差ベジエ曲面と円柱の交差ベジエ曲線の分割と包含円柱ベジエ曲面と線分の最近点・交差/ 改訂版ベジエ曲面と曲線の最短距離/ 改訂版境界箱を用いたBezier曲線の交差ファットラインを用いた曲線の交差3角形とベジエ曲線の交差(座標表示)
3) 流体計算
格子法の流体計算/改良版粒子法による流体簡易格子法点群を描画SPH法による流体計算レベルセット法流れアニメーション;webGL, 煙の流体計算、 AI利用の流体計算; GNN利用の流体/ GNN利用の流体()/ GNN利用の流体計算ー2/ GNN利用の流体計算ー1
4) アニメーション
キーフレームアニメーションIKアニメーション海の波の進行動くspotLight光跡動く2Dメタボール、 動く2つのボールスケルトンanimeglbデータのアニメトーラスのアニメ海中のアニメ, 海中のコーステックボーン・スキニングアニメーション
5) フラクタル
コッホ曲線チェルビンスキーの三角形Lシステムによる樹木生成マンデルブロー集合フラクタル曲線(中点変位法)、 パーリンノイズマンデルブロー集合julia集合2Dフラクタル山 フラクタルによる3Dフラクタル山フラクタル葉フラクタル島と海Lシステム生成の森
6) 幾何図形
長方形同士の交差判定線分のクリップ線分のクリッピング法(領域コード法)線分の交差判定ブレゼンハムの線分生成グリッドでのブレゼンハムアルゴリズムDDAでの線分描画多角形の内部判定(マウスで指定 した点が内部か)走査変換と多角形の内部判定ウィンドウで多角形をクリップ 色の補間多角形の走査変換ボロノイ図線分クリップ点群の凸包セルオートマトン包含円の算出加算のみの円描画多角形同志のクリッピング多角形と水平線の交差レインボー円の交差領域円柱と直方体の交差判定
5) 画像処理
バイレテラルフィルタ3種類のフィルタ処理Edgeフィルタモザイク処理2値化ネガポジ反転グラフカット法によるセグメンテーションセグメンテーション
6) ゲーム
シューティングゲーム戦闘機攻撃オセロゲームブラックジャック15ゲーム;15PuzzleTic-Tac-Toeインベーダ ゲームテトリス ゲーム
7) CG技術説明図
反射・屈折モデル, Phongの鏡面反射モデル3原色の混合色環球面調和関数の可視化PhongのBRDF可視化CookTrance反射BRDF大気散乱の位相関数(点表示)大気散乱の位相関数(曲面表示)
8) 学生作品
    略

生 成AIの利用方法・経験(プロンプト例)

一行程度のプロンプトで書ける。例えば「〇〇法を用いて△を描くコード をJavaScriptで書け。」と簡単で、追加で「マウスでみる方向を変えるように修正」とか 「xxのエラーが出たので修正してください」を追加する 程度。
曲線の例;「3次のベジエ曲線を描くコードを JavaScriptで書け。」 次に「制御点と制御多角形も描け。」 次に「次数を2から6までsliderで指定できるようにし、制御点はマウスで移 動できるようにしてください」とプロンプトを入力。
ゲームの例;「シューティングゲームを JavaScriptで書け」、次に「操作方法をHTMLファイルに書け」と簡単
結果はhtmlにJavaScriptを含んで出力される。〇〇.htmlファイルを作成しクリックすると実行される。あるいはhtmlと JavaScriptファイルを別に出力される。htmlにjsファイルを呼ぶように記述されてるので、htmlファイルクリックすると実行される。


CGが分かるとはどういう意味であるか。
・レベルA; CGソフトを使いこなしCG作品が創れる
・レベルB; CGで使われるレイトレーシング法などのアルゴリズムを理解してる
・レベルC; 同上の基本的技法のプログラムを組める
・VR、メタバース、ゲームなどの応用で、CGをツールとして使える
生成AIが進歩した今の学生は、プログラミングの講義は受けてなくても、CGの基本技法を体験できることが重要である。

なぜJavaScriptで生成AIに作らせるか? 
手軽にでき携帯電話でも動作出来ることが重要;C言語やPythonnが一般的であるがこれらはコンパイラーが必要で有料なことが多い。ブラウザーがみれ る端末ならどんな装置でもいいことから、htmlとJavaScriptで動作するというのは利便性がいい。このサイトの幾つかは列車の中でスマホで生成 AIを利用して作成した。



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

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

効 率の向上

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

エ ラーレートの削減

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

学 習と教 育

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

創 造性の促進

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

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

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


開発に至る経緯

1998年

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