「プログラミングゼミ」のプログラム情報を主体としたwikiです。

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

前置き

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

始まり

始まりは、☁︎?氏が3Dゲーム体験版を出したことから始まりました。
そこから、
プログラミングゼミであんなすごい3Dが作れるんだ!

となり、3Dを作ろうとする試みが増えていきました。(多分)

習得した人々

そうやって、いくつかの人が3D技術を習得することに成功しました。
習得した人備考習得時期
☁︎?他の人より比較的早く(ほぼ)完全な3Dを出した人
3D試作2では変形スプライトによって3D塗りつぶしを実現
SMG?z-clipping不使用?
1%ペン100%で初めて3D塗りつぶしを実現ここから開く *12026/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ができます。
詳しくは、研究用ページをご覧ください。
プログラム

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

プログラム

#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
プログラム

#4.描画

まず、3Dワイヤーフレームの塗りつぶし方法は主に2つあります。
  • 三角形ペン方式
  • 変形スプライト方式

ペン方式

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

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

プログラム
一回だけの描画だと…



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



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

変形スプライト方式

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


これを作るのに以下の知識を使います。 …etc
プログラム

背景



背景の変数


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

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

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

実行すると…

メリット / デメリット


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

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

小ネタ

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

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

三角形の描画手順

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

このページへのコメント

もしかして、前置きの部分が懐かしいんですか?

4
Posted by 匿名でs 2026年01月06日(火) 18:46:41 返信

懐かしい

4
Posted by ねずみ 2026年01月06日(火) 14:14:14 返信

実は「駄洒落大好き人間」のお父さんが2022年の2月ごろ、既に完全な3D立方体を作っている。
(その後3Dが流行ったわけではない)
https://api.programmingzemi.com/contents/trcY_2b6cm4yiPeJX2Lv/landing

2
Posted by  sunnylettuce321 sunnylettuce321 2026年01月02日(金) 08:24:44 返信

誤字りました
<誤>:3D昨日
<正>3D作品

2
Posted by 匿名でs 2025年12月31日(水) 20:41:16 返信

なんでプロゼミに(完全な)3D昨日少ないんだろね🤔

2
Posted by 匿名でs 2025年12月31日(水) 20:39:54 返信

コメントをかく


利用規約をご確認のうえご記入下さい

メニュー

スマホ版メニューへはこちら

ライブラリ



イベント・コラボ一覧いちらん







Wiki内検索

どなたでも編集できます

広告募集中