最終更新:ID:3z2sVmNu/g 2026年01月17日(土) 13:57:17履歴
現在、この記事の情報が少し不足しています。有識者はこの記事への追記お願いします。
現在(2026年1月時点)、プログラミングで3d作品が増え続けています。
習得した人々
そうやって、いくつかの人が3D技術を習得することに成功しました。
このページでは、この3Dについて解説します!
| 習得した人 | 備考 | 習得時期 |
| ☁︎? | 他の人より比較的早く(ほぼ)完全な3Dを出した人 3D試作2では変形スプライトによって3D塗りつぶしを実現 | ? |
| SMG? | z-clipping不使用 | ? |
| 1% | ペン100%で初めて3D塗りつぶしを実現ここから開く *1 | 2026/1 |
| 蓮花蝶? | ここから開く | 2025/11 |
| 駄洒落大好き人間? | ここから開く、蓮花蝶?提供、名前の2文字目は“酒”ではなく“洒” | 2022/2 |
| HIDEKATSUのサブ垢? | ここから開くz-clipping不使用 | 2026/1 |
| 黒豆◯◇? | 3Dワイヤーフレームを改良して擬似的な塗りつぶしを実現 | アカウント削除 |
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%:一時的な変数。
これを解決するために、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%:一時的な変数。
プログラム
カメラの回転軸は、水平方向(h)、垂直方向(v)の2つあります。
水平方向に回転すると、xとzが変わり、
垂直方向に回転すると、yとzが変わります。
(逆に言えば、水平方向だとyは変わらず、垂直方向だとxが変わりません。)
これを実行するには、回転行列を使用します。
学校で三角関数や行列の両方を習っていないと、何が起こっているのかわからないと思いませんが、要はこういうことです。
(どうしても三角関数が気になる方はこちらをご覧ください。)

水平方向に回転すると、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
x' = z*sinh + x*cosh
z' = z*cosh - x*sinh
垂直回転(v):
y' = y*cosv - z*sinv
z' = y*sinv + z*cosv
プログラム
まず、3Dワイヤーフレームの塗りつぶし方法は主に2つあります。
- 三角形ペン方式
- 変形スプライト方式
ペン方式
3Dの図形の塗り潰しはやろうとおもえばひとつの頂点からひとつの面に向かって線を引きまくるだけで塗りつぶせますが、この場合android勢は地獄を味わいます
androidでやると
&ref()
30個あたり 秒。
(GIFがありません。)
内接円(三角形からギリギリはみ出さない図形)を使って、高速で描画します。

まずは3つの辺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)*2
内接円を求めたあとは描画を行うx4,y4 x5,y5 x6,y6に内接円の中心の座標をいれて、内接円の大きさを1/2 1/4と減らし、描画の行う座標を頂点に近づけながら描画していけばきれいな三角形が塗りつぶせます。
30個あたり 秒。
(GIFがありません。)
内接円(三角形からギリギリはみ出さない図形)を使って、高速で描画します。

まずは3つの辺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)*2
内接円を求めたあとは描画を行うx4,y4 x5,y5 x6,y6に内接円の中心の座標をいれて、内接円の大きさを1/2 1/4と減らし、描画の行う座標を頂点に近づけながら描画していけばきれいな三角形が塗りつぶせます。
変形スプライト方式
プログラム
背景



背景の変数


直角三角形のプログラム*5

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

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

実行すると…




背景の変数


直角三角形のプログラム*5

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

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

実行すると…

まず大前提として、Android勢はプロゼミの最適化の問題によりカクつきが起こりやすいので注意が必要。
3D作品でパフォーマンスが発揮しやすい端末は、
Android < PC < IPhone ≒ IPad
こんな感じになる。
| メリット | デメリット | |
|---|---|---|
| ペン方式 | ・Scratchのプログラムが使える ・制作が(比較的)簡単 | ・変形スプライト式と比べて重い ・擬似的なテクスチャ描画ができない。 |
| 変形スプライト方式 | ・ペン式より軽い ・三角形にテクスチャを貼り付ければ擬似的なテクスチャが描画可能 | ・参考になる動画がほぼ無い ・ペン式より難しい。 |
編集者の方々は、この3Dの計算アルゴリズムを追記していただけると幸いです。
- カテゴリ:
- キッズ
- プログラミングアプリ
















sunnylettuce321
このページへのコメント
もしかして、前置きの部分が懐かしいんですか?
懐かしい
実は「駄洒落大好き人間」のお父さんが2022年の2月ごろ、既に完全な3D立方体を作っている。
(その後3Dが流行ったわけではない)
https://api.programmingzemi.com/contents/trcY_2b6cm4yiPeJX2Lv/landing
誤字りました
<誤>:3D昨日
<正>3D作品
なんでプロゼミに(完全な)3D昨日少ないんだろね🤔