3Dの解説 - プロゼ民Wiki【非公式】【10/27更新】 | プログラミングゼミの非公式Wiki

3Dさくひんの例

プロゼミseesaa Wikiより引用していたので、一部画像が表示されない箇所があるので、画像を持っているという方は編集お願いします。
現在、この記事の情報が少し不足しています。有識者はこの記事への追記、特に

• 四元数回転
• グーローシェーディング
• 軽量化
• アルゴリズム

などについての追記をお願いします。
プログラムは以下からダウンロードできます。

プログラム

• ⬇️変形スプライト式ぬりつぶし(非軽量化)をダウンロードする
• ⬇️簡単な3d立方体描画をダウンロードする

前置き（読み飛ばしてもOK）

前置き

現在(2026年７月時点)、プログラミングで3d作品が増え続けています。

始まり

始まりは、☁︎氏が 3Dゲーム体験版 を出したことから始まりました。
そこから、
プログラミングゼミであんなすごい3Dが作れるんだ！
となり、3Dを作ろうとする試みが増えていきました。(多分)

習得した人々

そうやって、いくつかの人が3D技術を習得することに成功しました。

習得した人	備考	習得時期
☁︎	他の人より比較的早く(ほぼ)完全な3Dを出した人 3D試作2では変形スプライトによって3D塗りつぶしを実現	？
SMG?	z-clipping不使用	?
1%	変形スプライト式による完全な３D描画を実現 ３軸回転やZクリッピングにも対応 ここから開く	2026/1
蓮花蝶	ワイヤーフレームでいくつかゲームを制作している ここから開く	2025/11
駄洒落大好き人間?	ワイヤーフレーム ここから開く 蓮花蝶提供、名前の2文字目は“酒”ではなく“洒”	2022/2
HIDEKATSUのサブ垢?	ワイヤーフレーム ここから開く z-clipping不使用	2026/1
(黒豆◯◇?)	3Dワイヤーフレームを改良して擬似的な塗りつぶしを実現	アカウント削除、1%氏と同一人物
LLL?	ポリゴン式 プロゼミで初めて正確な視点移動を実装した人物の一人。 ここから開く	2026/03
taika_?	ワイヤーフレーム ｚ軸の処理が未実装 ここから開く	2026/07
s1αHns?	ペン１００％でテクスチャ描画が可能。 ラグ注意 ここから開く	2026/03
sadachi 作品公開用垢?	ポリゴン式 プロゼミで初めて視点変更やZクリッピングを実装した。	2026/02
あひる2	ワイヤーフレーム式 非常に軽量	2026/10
たたたたた	ポリゴン式 プロゼミ史上初のグーローシェーディングを実装した人物	2026\10

このページでは、この3Dについて解説します！

目次

---

---

#1:投影

投影

まず、scratch、springin、プログラミングゼミなどの多くのビジュアルプログラミング言語は、x、yの2次元しかありません。
ですが、ここでは、zというもう一つの次元、つまり深さを追加します。

物体は、遠くに行くほど小さく見えるので、xとyをzで割り、それに焦点距離(focal length)を掛けることで、3dが再現できます。(焦点距離を掛ける理由は、xとyをzで割るだけだと、結果が小さい値になるため。)
これを用いて3dができます。

プログラム

📦x

÷

📦z

×

📦f

📦y

÷

📦z

×

📦f

ちなみに、

📦f

は拡大率

座標を

📦座標

点のID

0 or 1 or 2

もしくは

📦座標

[点のID, 0 or 1 or 2]

と表現するのもいいかもしれない

↑の0,1,2は、

• 0→x
• 1→y
• 2→z

を指定するとします。
多重配列については蓮花蝶作の はいれつ 世界一優しい講座 をご覧ください。

要約

つまり
xとyをzで割り、小さく表示されたら掛け算で拡大してみる
ということ

#1.5:様々なビジュアルプログラミング言語を扱う人のための解説

プログラミングゼミは、画面の中心が400,215なので、最終的に描画する際、x,yに400,215を足してください。
(scratchでは、画面から全部はみ出ることができませんが、大きさを1/0にすることでこの問題は解決します。)

#2:クリッピング

zクリッピング

3dで描画したものの後ろに行くと、ペンが後ろにあるはずのものを描こうとしているため、画面がめちゃくちゃになります。
これを解決するために、z-clippingを使用します。これは、カメラに近づきすぎた線を切り取るものです。

→

これを使うのに以下の式を使います。

(z1<nの場合)
clip%=(z1-n)/(z2-z1)
(x,y,z)=(x1-{(x1-x2)*clip%}, y1-{(y1-y2)*clip%},n)
(z2<nの場合)
clip%=(z2-n)/(z1-z2)
(x,y,z)=(x2-{(x2-x1)*clip%}, y2-{(y2-y1)*clip%},n)
(z1<nとz2<nの両方の条件が満たされているなら、描画しない。つまり、clip%が1未満の時。)

変数一覧	解説
n	視点をクリッピングする位置。10～20推奨。
clip%	一時的な変数。

プログラム

１％氏のプログラムの場合、回転座標変換を終え３D→２D変換に移る前にZクリッピング（Z軸置換）を行い、３つの頂点のうちZクリッピングが行われた回数が３（視点の裏側にある）の場合は描画しないという仕様になっている

Zクリッピング（Z軸置き換え処理のため厳密にはZクリッピングではない）を行う部分

描画を行うか行わないかを決める部分

#3:カメラ回転

カメラ回転

カメラの回転軸は、水平方向(h)、垂直方向(v)の2つあります。
水平方向に回転すると、xとzが変わり、
垂直方向に回転すると、yとzが変わります。
(逆に言えば、水平方向だとyは変わらず、垂直方向だとxが変わりません。)
これを実行するには、回転行列を使用します。

学校で三角関数や行列の両方を習っていないと、何が起こっているのかわからないと思いませんが、つまりこういうことです。
(どうしても三角関数が気になる方はこちらをご覧ください。)

#ref error ：画像を取得できませんでした。しばらく時間を置いてから再度お試しください。

プログラミングゼミで扱える形式にすると…

水平回転(h):
x' = z*sinh + x*cosh
z' = z*cosh - x*sinh
垂直回転(v):
y' = y*cosv - z*sinv
z' = y*sinv + z*cosv

(sin、cos計算はかなり重いので、あらかじめ変数に保存しとくことを推奨します。)
プロゼミは配列を使うと処理速度が３割ぐらい落ちる

プログラム

回転VRAMはカメラ回転を表している

図形回転を使いたい？こんなプログラムです！

#4.描画

描画

まず、3Dワイヤーフレームの塗りつぶし方法は主に2つあります。

• 三角形ペン方式
• 変形スプライト方式

ペン方式

ペン方式

３Dの図形の塗り潰しはやろうとおもえばひとつの頂点からひとつの面に向かって線を引きまくるだけで塗りつぶせますが、この場合 android勢は地獄を味わいます
（android端末の処理性能はIPhoneの1/4～1/10）詳しくはIPhoneとAndroidの性能格差をご覧ください。

iOSでやると

#ref error ：画像を取得できませんでした。しばらく時間を置いてから再度お試しください。

30個あたり0.05秒。まあ早い

androidでやると

#ref error ：画像URLまたは、画像ファイル名を指定してください。

30個あたり　秒。
(追記お願いします。)

---

内接円（三角形からギリギリはみ出さない図形）を使って、高速で描画します。

#ref error ：画像を取得できませんでした。しばらく時間を置いてから再度お試しください。

まずは３つの辺a,b,cの長さを求めたいので、それぞれの変数をこの式を使って求めます。

a =√(x2-x3)+(y2-y3)
b =√(x3-x1)+(y3-y1)
c =√(x1-x2)+(y1-y2)

つぎに、ペンの太さを求めます。

n =(a+b+c)/2
S =√n(n-a)(n-b)(n-c)
r (ペンの太さ)=S/n×2

内接円の中心x7,y7は次の式で求めることができます
x7 =(a*x1)(b*x2)(c*x3)
y7 =(a*y1)(b*y2)(c*y3)(*1)

内接円を求めたあとは描画を行うx4,y4 x5,y5 x6,y6に内接円の中心の座標をいれて、内接円の大きさを1/2　1/4と減らし、描画の行う座標を頂点に近づけながら描画していけばきれいな三角形が塗りつぶせます。

プログラム

プログラム

一回だけの描画だと…

#ref error ：画像を取得できませんでした。しばらく時間を置いてから再度お試しください。

#ref error ：画像を取得できませんでした。しばらく時間を置いてから再度お試しください。

#ref error ：画像を取得できませんでした。しばらく時間を置いてから再度お試しください。

角の一部が途切れます。
では、頂点に近づけてゆくと…(*2)

#ref error ：画像を取得できませんでした。しばらく時間を置いてから再度お試しください。

(*3))

#ref error ：画像を取得できませんでした。しばらく時間を置いてから再度お試しください。

#ref error ：画像を取得できませんでした。しばらく時間を置いてから再度お試しください。

#ref error ：画像を取得できませんでした。しばらく時間を置いてから再度お試しください。

ちゃんと三角形がかけました。(たまに描画がバグる)

変形スプライト方式

変形スプライト方式

☁︎氏が採用しており、ペン方式より高速に描画できます。
と?氏が、このような方式で この作品 を作っています。

仕組み

現在、この部分の情報が不足しています。

この座標を求めた後、ここが直角の角になるように直角三角形を配置します。座標を求めるプログラムは以下の通りです。(書いた点の座標が求めるべき座標)

この計算式は辺ABが最長の場合のみ使えます、どの三角形にも対応させる場合、このx1、x2、x3を入れ替えて対応してください。

• ABが最長の場合

そのまま

• BCが最長の場合

x1をx2、
x2をx3、
x3をx1にします。(yも同様)

• CAが最長の場合

x1をx3、
x2をx1、
x3をx2にします。(yも同様)

点同士の長さを求めるプログラムについては、平方根の応用を見ると分かります。

つまりやってることは？

三角形を縦横の比率を変えた二つの直角三角形でぬりつぶしている

---

（この部分は参考になりません）

これを作るのに以下の知識を使います。

• 条件分岐?
• 四則演算?
• 変数?
• 配列?
• atan2(アークタンジェント)など三角関数
• 三平方の定理?(平方根)

…etc

プログラム2

...

背景

#ref error ：画像を取得できませんでした。しばらく時間を置いてから再度お試しください。

#ref error ：画像を取得できませんでした。しばらく時間を置いてから再度お試しください。

#ref error ：画像を取得できませんでした。しばらく時間を置いてから再度お試しください。

背景の変数

#ref error ：画像を取得できませんでした。しばらく時間を置いてから再度お試しください。

#ref error ：画像を取得できませんでした。しばらく時間を置いてから再度お試しください。

直角三角形のプログラム(*4)

#ref error ：画像を取得できませんでした。しばらく時間を置いてから再度お試しください。

ちなみにポーズはこうなっている(5番目～のポーズの順番が間違えています。1～4番目のポーズのみ信用してください。)

#ref error ：画像を取得できませんでした。しばらく時間を置いてから再度お試しください。

ただ三角形の線を描くキャラ

#ref error ：画像を取得できませんでした。しばらく時間を置いてから再度お試しください。

実行すると…

#ref error ：画像を取得できませんでした。しばらく時間を置いてから再度お試しください。

#ref error ：画像を取得できませんでした。しばらく時間を置いてから再度お試しください。

---

メリット / デメリット

...

まず大前提として、Android勢はプロゼミの最適化の問題によりカクつきが起こりやすいので注意が必要。

3D作品でパフォーマンスが発揮しやすい端末は、
Android < PC < IPhone ≒ IPad
こんな感じになる。

方式	メリット	デメリット
ペン方式	・Scratchのプログラムが使える ・制作が（比較的）簡単 ・色の変更が簡単	・変形スプライト式と比べて重い ・擬似的なテクスチャ描画ができない。
変形スプライト方式	・ペン式より軽い ・三角形にテクスチャを貼り付ければ擬似的なテクスチャが描画可能	・参考になる動画がほぼ無い ・ペン式より難しい。 ・色の変更が難しい

基本的に変形スプライト方式の方が軽いです
編集者の方々は、この3Dの計算アルゴリズムを追記していただけると幸いです。

#5.アルゴリズム

アルゴリズム

編集中

データ管理

まず、プログラミングゼミには多次元配列という便利な機能が使えるので、以下のように管理できます。

[
 [x,y,z],
 [x,y,z],
 …
 [x,y,z]
]

視点計算

zクリッピング

投影

三角形描画

小ネタ

小ネタ

ペンについて

プロゼミとスクラッチは、ペンの形が少し異なります。
スクラッチは両端が円のようになりますが、プロゼミでは両端がテープが切れたような形になります。

現在このページを作る上で起こっている問題

三角形の描画手順

三角形の描画手順

↑を考慮しないと、こうなる(ペン方式)

通常	ごまかしver.
#ref error ：画像を取得できませんでした。しばらく時間を置いてから再度お試しください。	#ref error ：画像を取得できませんでした。しばらく時間を置いてから再度お試しください。

不透明度を下げればギリギリ大丈夫なように見える…

三角形の描画手順を正しくするためには、座標変換の時に得られたZ座標を使うことができる。
ただ、この値をそのまま使ってしまうと奥にあるポリゴンが手前に表示されてしまうので、でかい数-zを（ペンの）かさなりのじゅんばんに指定しよう。

例

1000000 -

座標1[2]

だが、このように描画手順がない場合には対応できない。

軽量化

軽量化

3Dは実際に動作させると非常に重いです。ここでは軽量化の手法をいくつか紹介します。

スタンプ

角変形スプライトを配列の情報に基づいてスタンプします。これにより毎fps200〜300ポリゴン(*5)配置することができます。

頂点共通化

座標の計算(カメラ計算など)を先に全て計算しておいて後で三角形を「INDEX」、つまり添字(配列の位置、[0]の0のこと)で座標と結びつけるやつです

コメント

コメントで分かりづらい所を教えてくれるとありがたいです。

---

• 現在、このページは少しわかりづらいので編集者は編集お願いします。 -- 名無しさん (2026-03-01 16:20:46)
• なんかすごい（） -- 魚のもなか (2026-03-01 18:50:36)
• 文が長いよ -- りふぬ (2026-03-01 18:54:14)
• 変形スプライト式塗りつぶし、やっとやってることが理解できました。すごすぎる〜 -- eclipse (2026-03-13 12:36:40)
• Zバッファ法ってもしかして重すぎてプロゼミじゃできないとかありますかね -- eclipse (2026-03-13 13:24:24)
• 見た感じすごく重そうなのですが -- eclipse (2026-03-13 13:24:51)
• 実際プロゼミそのものが重いのとpythonとは違うブロック形式だから通常の3dの考え(ピクセル単位のzバッファ)が通用しづらい -- 名無しさん (2026-03-13 16:00:59)
• バックフェイスカリングつければめっちゃ軽くなりそう -- LLL (2026-03-14 14:35:18)
• 軽くはなってもプロゼミベンチマークスペックが75万のやつでも三角形を50個〜100個ぬつぶして重くなるようなやつにはどうもこうもできない(そらもんの3dを100体描画したら…ローポリゴンでもめっちゃ重くなるだろう) -- 名無しさん (2026-03-14 17:12:15)
• eclさんいたんだ -- どくろもん (2026-03-15 08:44:17)
• 3Dの研究行き詰まったからAIに専念したほうがいいかも…
  -- -- --
  このページの対する侮じょk(((殴 (2026-04-04 12:36:17)
• 複雑すぎて頭がパーリナイ(？) -- かてらもん (2026-06-03 21:38:20)
• 前マイクラ完全再現しようとしたら処理落ちラッシュしてた -- 出汁 (2026-07-11 06:46:16)
• むずい -- ざんへの (2026-09-13 14:36:36)
• めんどくさそう -- あ (2026-09-13 16:46:37)
• 投影だけは簡単 -- iPadのプログラミング (2026-09-13 17:03:14)
• 変形式スクリプト習得したぜ -- 皿茅 (2026-09-20 08:31:08)
• (自分には1ミリも理解できません,当たり前)でした(*6) -- 苺 (2026-10-20 17:40:17)
• ↑？？？ -- 苺 (2026-10-20 17:40:36)
• プラグインバグった -- 苺 (2026-10-20 17:40:50)
• 分からない点を詳しく教えてくれれば改善します(全部とかは無理) -- iPadのプログラミング (2026-10-20 17:41:24)