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

プロゼミseesaa Wikiより引用しているので、表記がおかしい部分があります。

現在、この記事の情報が少し不足しています。有識者はこの記事への追記お願いします。

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

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

前置き

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

始まり

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

習得した人々

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

習得した人	備考	習得時期
☁︎	他の人より比較的早く(ほぼ)完全な3Dを出した人~~3D試作2では変形スプライトによって3D塗りつぶしを実現	？
SMG?	z-clipping不使用	?
1%	ペン100%で初めて3D塗りつぶしを実現 ここから開く ~~ちなみに図形回転はうまく実装できなかった ((ちょっと重い))	2026/1
蓮花蝶	ここから開く	2025/11
駄洒落大好き人間?	ここから開く 、蓮花蝶提供、名前の2文字目は“酒”ではなく“洒”	2022/2
HIDEKATSUのサブ垢?	ここから開く z-clipping不使用	2026/1
黒豆◯◇?	3Dワイヤーフレームを改良して擬似的な塗りつぶしを実現	アカウント削除

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

#1:投影

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

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

プログラム

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

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

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

#2:クリッピング

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%	一時的な変数。

プログラム

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

#3:カメラ回転

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

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

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

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

(sin、cos計算はかなり重いので、あらかじめ変数に保存しとくことを推奨します。)

プログラム

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

#4.描画

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

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

ペン方式

３Dの図形の塗り潰しはやろうとおもえばひとつの頂点からひとつの面に向かって線を引きまくるだけで塗りつぶせますが、この場合 android勢は地獄を味わいます

iOSでやると

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

androidでやると

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

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

---

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

まずは３つの辺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と減らし、描画の行う座標を頂点に近づけながら描画していけばきれいな三角形が塗りつぶせます。

プログラム

...

一回だけの描画だと…



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



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

変形スプライト方式

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


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

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

…etc

プログラム2

...

背景



背景の変数


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

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

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

実行すると…

メリット / デメリット

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

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

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

編集者の方々は、この3Dの計算アルゴリズムを追記していただけると幸いです。

小ネタ

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

zバッファとかいう謎の技術について、AIが生成したコンテンツ

⚠	注意 ↓の[+](もしくは[-])の中のコンテンツのほとんど全てはAIにより作られたものです。本当に正しい情報かわからないので、完全には信じないでください。

...

コード

import math
import copy

# =========================
# 1. 座標リスト・INDEX配列
# =========================

# 頂点: [x, y, z, vertex_id, image_id]
vertices = []
faces = [] # 三角形: (v0, v1, v2)

def add_vertex(x, y, z, image_id=0):

   vid = len(vertices)
   vertices.append([x, y, z, vid, image_id])
   return vid

# 簡単な立体（4面）
v0 = add_vertex(-1, -1, 1, 0)
v1 = add_vertex( 1, -1, 1, 1)
v2 = add_vertex( 0, 1, 1, 2)
v3 = add_vertex( 0, 0, -1, 3)

faces += [

   (v0, v1, v2),
   (v0, v2, v3),
   (v2, v1, v3),
   (v1, v0, v3),

]

# =========================
# 2. スクリーン配列
# =========================

W, H = 160, 120
screen = [[0x000000 for _ in range(W)] for _ in range(H)]
zbuffer = [[0 for _ in range(W)] for _ in range(H)]

# =========================
# 3. 配列コピー
# =========================

vtx = copy.deepcopy(vertices)
idx = copy.deepcopy(faces)

# =========================
# 4. 視点変換（回転）
# =========================

cx, cy, cz = 0, 0, 0
h = 0.6 # 水平回転
v = 0.4 # 垂直回転

for p in vtx:

   x, y, z = p[0] - cx, p[1] - cy, p[2] - cz

   # 水平回転
   x, z = (
       z * math.sin(h) + x * math.cos(h),
       z * math.cos(h) - x * math.sin(h)
   )

   # 垂直回転
   y, z = (
       y * math.cos(v) - z * math.sin(v),
       y * math.sin(v) + z * math.cos(v)
   )

   p[0], p[1], p[2] = x, y, z

# =========================
# 5. 平行移動
# =========================

dx, dy, dz = 0, 0, 4

for p in vtx:

   p[0] += dx
   p[1] += dy
   p[2] += dz

# =========================
# 6. 視点後方クリッピング
# =========================

NEAR_Z = 0.1

def clip_triangle(a, b, c):

   front = []
   back = []

   for v in (a, b, c):
       (front if v[2] >= NEAR_Z else back).append(v)

   # 全部後ろ
   if len(front) == 0:
       return []

   # 全部前
   if len(front) == 3:
       return [(a, b, c)]

   # 1前2後 → 1三角形
   if len(front) == 1:
       f = front[0]
       b1, b2 = back

       def interp(v1, v2):
           t = (NEAR_Z - v1[2]) / (v2[2] - v1[2])
           return [
               v1[0] + (v2[0]-v1[0])*t,
               v1[1] + (v2[1]-v1[1])*t,
               NEAR_Z,
               len(vtx),
               v1[4]
           ]

       i1 = interp(b1, f)
       i2 = interp(b2, f)

       vtx.extend([i1, i2])
       return [(f, i1, i2)]

   # 2前1後 → 2三角形
   f1, f2 = front
   b = back[0]

   def interp(v1, v2):
       t = (NEAR_Z - v1[2]) / (v2[2] - v1[2])
       return [
           v1[0] + (v2[0]-v1[0])*t,
           v1[1] + (v2[1]-v1[1])*t,
           NEAR_Z,
           len(vtx),
           v1[4]
       ]

   i1 = interp(b, f1)
   i2 = interp(b, f2)

   vtx.extend([i1, i2])
   return [(f1, f2, i1), (f2, i2, i1)]

# =========================
# 7. INDEX書き換え
# =========================

new_faces = []

for f in idx:

   tris = clip_triangle(vtx[f[0]], vtx[f[1]], vtx[f[2]])
   for t in tris:
       ids = []
       for v in t:
           if len(v) < 5:
               v.append(len(vtx))
               vtx.append(v)
           ids.append(v[3])
       new_faces.append(tuple(ids))

idx = new_faces

# =========================
# 8. 2D変換
# =========================

proj = []

for p in vtx:

   z = p[2]
   if z <= 0:
       proj.append(None)
       continue

   d = 1 / z
   sx = int(p[0] * d * 80 + W//2)
   sy = int(p[1] * d * 80 + H//2)
   proj.append((sx, sy, d, p[4]))

# =========================
# 9. zバッファ
# =========================

def area2(x1,y1,x2,y2,x3,y3):

   return x1*(y2-y3)+x2*(y3-y1)+x3*(y1-y2)

# =========================
# 10. 描画
# =========================

for f in idx:

   p1, p2, p3 = proj[f[0]], proj[f[1]], proj[f[2]]
   if not p1 or not p2 or not p3:
       continue

   x1,y1,d1,c = p1
   x2,y2,d2,_ = p2
   x3,y3,d3,_ = p3

   S = area2(x1,y1,x2,y2,x3,y3)
   if S == 0:
       continue
   invS = 1/S

   minx = max(min(x1,x2,x3),0)
   maxx = min(max(x1,x2,x3),W-1)
   miny = max(min(y1,y2,y3),0)
   maxy = min(max(y1,y2,y3),H-1)

   for y in range(miny, maxy+1):
       for x in range(minx, maxx+1):
           A1 = area2(x,y,x2,y2,x3,y3)
           A2 = area2(x1,y1,x,y,x3,y3)
           A3 = area2(x1,y1,x2,y2,x,y)
           if (A1>=0 and A2>=0 and A3>=0) or (A1<=0 and A2<=0 and A3<=0):
               d = (d1*A1 + d2*A2 + d3*A3) * invS
               if d > zbuffer[y][x]:
                   zbuffer[y][x] = d
                   screen[y][x] = 0xFF0000 + c*0x002000

AIの解説
[+]
① 座標リスト・INDEX配列
vertices = []
faces = []
vertices
→ 頂点バッファ（VBO相当）
faces
→ INDEXバッファ（IBO相当）
# 頂点: [x, y, z, vertex_id, image_id]
この設計が非常に重要です。
要素 意味
x,y,z 3D座標
vertex_id 頂点番号（INDEX用）
image_id テクスチャ / 色識別
&#128073; あとから情報を増やせる構造
def add_vertex(x, y, z, image_id=0):
頂点追加関数
vertex_id を 自動採番
vid = len(vertices)
vertices.append([x, y, z, vid, image_id])
現在の頂点数 = 新しいID
append時点で IDが確定
&#128295; カスタム
法線 → [x,y,z,id,img,nx,ny,nz]
UV → [... , u, v]
簡単な立体定義
v0 = add_vertex(-1, -1, 1, 0)
...
v3 = add_vertex( 0, 0, -1, 3)
正四面体に近い形
image_id を変えている → 面ごと色分け可能
faces += [

   (v0, v1, v2),
   ...

]
反時計回りで面を定義
裏面カリングの前提になる
② スクリーン配列
screen = [[0x000000 for _ in range(W)] for _ in range(H)]
RGBを 24bit整数で保持
0xRRGGBB
zbuffer = [[0 for _ in range(W)] for _ in range(H)]
Zは「大きい方が手前」方式
だから初期値は 0
&#128295; カスタム
逆方式（小さい方が手前）にすると
→ 初期値を inf にする
③ 配列コピー
vtx = copy.deepcopy(vertices)
idx = copy.deepcopy(faces)
元データ破壊防止
パイプライン段階用バッファ
&#128073; GPUで言う
入力バッファ → ワークバッファ
④ 視点変換（回転）
cx, cy, cz = 0, 0, 0
h = 0.6
v = 0.4
視点中心
水平・垂直回転角（ラジアン）
x, y, z = p[0] - cx, p[1] - cy, p[2] - cz
カメラ座標系へ移動
水平回転
x, z = (

   z * math.sin(h) + x * math.cos(h),
   z * math.cos(h) - x * math.sin(h)

)
y軸回転（Yaw）
完全に正しい回転行列
垂直回転
y, z = (

   y * math.cos(v) - z * math.sin(v),
   y * math.sin(v) + z * math.cos(v)

)
x軸回転（Pitch）
&#128295; カスタム
ロール追加
x,y = x*cos(r)-y*sin(r), x*sin(r)+y*cos(r)
⑤ 平行移動
dx, dy, dz = 0, 0, 4
カメラを後ろへ
p[2] += dz
z>0 に全体を移動
透視投影の前提条件
⑥ 視点後方クリッピング（重要）
NEAR_Z = 0.1
近クリップ面
(front if v[2] >= NEAR_Z else back)
視点の前か後ろかを分類
ケース分岐
● 全部後ろ
return []
→ 描画しない
● 全部前
return [(a, b, c)]
→ そのまま
● 1前2後
i1 = interp(b1, f)
i2 = interp(b2, f)
新しい2頂点を生成
1枚の三角形に変換
● 2前1後
return [(f1, f2, i1), (f2, i2, i1)]
四角形になる
→ 三角形2枚に分割
&#128073; これは 本物のGPUと同じ処理
⑦ INDEX書き換え
for f in idx:

   tris = clip_triangle(...)

元の面 → 0～2枚の新しい三角形
ids.append(v[3])
新しくできた頂点も vertex_idを維持
&#128073; 頂点とINDEXの整合性が完全
⑧ 2D変換（透視投影）
d = 1 / z
焦点距離 = 1
透視投影の本質
sx = int(p[0] * d * 80 + W//2)
80 → 拡大率（視野角）
&#128295; カスタム
視野角変更
→ この数値を変える
proj.append(*5)
d を保持 → Zバッファ用
image_id を引き継ぐ
⑨ 面積関数
def area2(...)
符号付き2倍面積
割り算なし
内外判定と補間に使う
&#128073; S = A1 + A2 + A3
⑩ 描画（ラスタライズ＋Z）
S = area2(...)
面積0 → 退化三角形
A1 = area2(...)
バリセントリック座標
内部判定
d = (d1*A1 + d2*A2 + d3*A3) * invS
透視補正されたZ補間
正確なZバッファ
if d > zbuffer[y][x]:
手前なら更新
screen[y][x] = 0xFF0000 + c*0x002000
色 = 赤 + image_id依存
簡易マテリアル
&#128295; カスタム
シェーディング
brightness = clamp(d*something)
テクスチャ
→ image_id → 画像参照

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

三角形の描画手順

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

通常	ごまかしver.

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

コメント

• 現在、このページは少しわかりづらいので編集者は編集お願いします。 -- 名無しさん (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)