---
# System prepended metadata

title: コンピュータグラフィックス　第7回　12/12

---

# コンピュータグラフィックス　第7回　12/12

空調でひと悶着ありました

出席を取ります
１番でお願いします

レポートについてなんですが
お願いごとで
様々な事情でメール連絡で課題を提出している人がいますが
一応、教授自身としては、全て対処したつもりだが
一人だけ対処しきれていない人がいる気がしているそうです

その為、自分のメール連絡で返ってきていないものがあれば、連絡してください
加えて、メール連絡をする時は、メールにCGという文言を入れてくれると処理しやすいので助かるそうです

メールでの遅延課題提出について
今朝は、普通に出した人の一括処理したそうですが
遅延提出されると、メールを開いてWEBclassを開いて、未提出者を探して、という手間を取る作業になるそうです
なので、極力遅れないようにしてください


前回のレポート課題について
これは正面からみたワイヤーフレームについて
ワイヤーフレームについて、やや理解が乏しい人がいるそうですが
図の通りです
この時、カメラを通すとどうなるか

視野角を忘れている人が多いです
その人達にはコメントをいれました

また説明文を付けろとも課題に書いたので、書いていない人は注意してください

話を基に戻すと
視野角を理解できているのか理解できていないのか曖昧な人が多かった

これは透視投影

視野角について、講義後質問が多く来ましたが
視野角とは
この四角錐の開いている角度です
視野角が広いという事は、この四角錐が広がった状態

カメラが開いている角度が視野角です
教授のジェスチャーの通りです

この後ろは、長方形になっているので、横の視野角が広いですが
課題は正方形になっていたと思います

目安で、スマホの視野角は60度くらいになっていると思います
ただし、スマホのカタログにはスペックとして、視野角と記述しているものは少ないと思います

この講義でも昔、手持ちのスマホの視野角の計測を行わせた時代もありました
その時は、57°～60°ちょいくらいが殆どでしたね

この課題では、視野角は90°だったので
真ん中で割って45°ずつになりましった

視野角が広いというのは、近くでも多く撮影できるという事
しかし、遠くの景色撮るとなると
1画素当たりの多さが多くなるので、ボケた画像になります
その為、遠くを取る時は望遠レンズを付けます
望遠レンズをつけると限られた部分のみの撮影となるので、画質もきれいになる

この図のように平行に撮影できるカメラはありません
この時、視野角という概念が無いので
平行投影の場合は、幅と高さが重要になってくる

ここまでを踏まえて問題はどうか？
ワイヤーフレームがあり、正面か投影すると
立方体が四角形に見える

この時、投資投影を行うと、手前の方が大きく、奥に行くと小さくなる

これは普通の場合と同じ

このワイヤーフレームの立方体は12本で出来ているのだが

ここまでは、普通に考えていれば、出来るでしょう

しかし、この幅がどれくらい大きくなり小さくなるというものは計算しなければならない

これは横から見た図だが

仮に原点の部分に投影しているのだがZ＝0の面上に投影すると考えると
図形の前面はここでは５/4の長さで投影されている
図形の後面は5/6の長さである。

1.25、下は

複雑な計算してくれた人もいましたが、分かります

基の図形に対して等間隔で書くというものだが、そうではない
相似な図形に注目すると
上の点は4:1=5:y
なのでy=5/4

次も同じく然りである


三角形の相似っていつ習いましたかね
時代によって違うと思いますが、まぁそれを使ってという感じです

今の中で、視野角出てきませんでしたが
この形自体は、視野角がいくつになっても変わりません

視野角90度のカメラはあまりないですが
計算がしやすいので
相似を使って、直角二等辺三角形の出し方

1：１
直角二等辺三角形と分かれば、いちいち√まで計算はしない

二等辺三角形という言葉をしれば問題ない
郷に入っては郷に従えという事？

このプラスマイナスについて

黒い点はいったいどこにあるのか？
さっきの図だと、画面の幅である。左端がｘ＝－５、右端がｘ＝５
ｙ方向も同様である。

視野角が小さくなると余白の部分が減る。
スマホで撮影する時を考えても実際に視野角が変わることは体感できない
しかし、印刷する際には、サイズが変わったりすることを体験できる。

極端にスキマが少ない図が答えとして見受けられたが、どう見てもサイズ感が異なる時は「惜しいね」ということにしました。
以上が前回のお話です

今回のお話。
次の画像処理は、陰面消去です。

3次元モデルの話で奥行の話はちょっとしかしていない気がするけど、
一連の処理を考えると半分くらい説明した。
例えば三角形が投影されたら、座標が定まったら、ラスタライズされる。
真ん中の投影面の形では、拡大や縮小したりもできる。

二つの三角形があったら、前後関係が存在する。
青の三角形は、赤の三角形に隠される部分が出てくる。
青の三角形の領域に赤の三角形を書くことはできない。

１ピクセルごとに前後判定をしてどちらの色を残すのかを決めている

昔は、処理が重かったので、ワイヤーフレームで作成したいた
点線の部分は奥側なので、見えないよという意味で点線で書いている

コンピュータで見えない部分（見えない線）をどのように処理するか
まずは、手前と奥の判断が必要である。

前回の課題がサーフェスモデルだったら、四角を描いて、ちょっと拡大したら終わりだった。

サーフェイスモデルで稜線を消去することを考えると、
立方体にした際の裏面の3本の線が消える。右側のブロックの内側の縦の線、区分でいる部分はちょっと難しくて、半分見えて半分見えない

全ての面同士の交差関係や稜線を考えると１万回以上判定が必要。
これはめんどくさいからやってられない。

陰面消去のお話

三面は見えるけど、他の三面は見えない。
どっちを向いているかは、法線を基準に考える。

くぼみがあるとさらに処理が複雑。
背面消去というものもあり、unityなどで使われる。
ソフトウェアによっては、表面と裏面を定義しないといけない

古いアルゴリズムとして、三角形なら重心判定法がある

処理が軽くなるが、手前から描くので、手前から並べ替えないといけない
並べ替えはコンピュータにとっては、大変な処理。

そこで、ラスタライズの時に奥行判定をする。前後判定の前にラスタライズの処理を確認すると
座標値が浮動小数点で表されていく。デジタル座標上では、整数に反感される必要がある。

斜めの線分があったときに交差したタイル（画素）を黒にするしょりにする。

おまけの処理として、ガタガタにならないようにアンチエイリアシングを行う。

通常の線分発生法だとガタガタのままになる。

直線をデジタル画像にすると、だいたいがアンチエイリアシングされている。

滑らかな線分のエッジには、中間色が配色されている。この中間色は何色なのか人間には予想がしずらい

黒と白のアンチエイリアシングだったら、灰色になるけど
これとは違う色同士だと難しいね



三本の線分を引いて、先ほどと同じく、ラインを画素に変換

その後塗りつぶしていけば良いわけです
この時、中はどうやるのか？

閉じた図形の場合は図のようになる
何回線分を通過したかで塗りつぶし処理を行う
閉じていない図形は、どこが外か内かわからないので、偶数奇数判定では出来ない

この塗りつぶす時の色で、陰影をつける事で立体的に見える
理屈上は数式で分かるですが
画像であるので、塗りつぶさなければならない

幅を持った円にするには太さを変更しなければならない

中心と半径を計算する際に、様々な方法がありますよという話

ここまでがラスタライズの話

投影されたときには、三角形は三角形のまま
しかし、塗りつぶすのでよくわからなくなるのですが

コンピュータグラフィックスの処理では、最終的に画像の色を決定すればよい
100×100のデジタル画像をする際には
１万個の色を決めてあげれば、画像を作る事が出来ます

これをZバッファ法と言います

Zバッファ法というのは
単純な方法なので、1度聞けばわかると思います

通常レンダリングする際に図のようになりますが

ここで赤に変えていく処理は
ピクセルのメモリですが
RGBの色の強度で画像は作られるので
Ｒは何バイトというようなメモリを持っている

白の場合は255×255が入った状態である

Ｚバッファを取るんですが、これは4バイト
奥行情報を書くためのバッファもあって、∞バイト

大きな値を入れておきます
無限大の値の部分は背景色だというもの

背景色というのは、コンピューターグラフィックスにおいて重要で
背景に壁紙を張るというのと、背景色を付けるというのは意味合いが違う

この例でいうと
これは模式的
この赤い円の視点から距離Ａの所にあると
距離Ｂの所に青い三角形があると
重なったら赤が優先されると

Ｒバッファには円の領域が書き込まれ
Ｚバッファにも同じ値が書き込んでいく

これは簡単です
次に
青い三角形について

青い三角形を塗りつぶす時に
青までの距離と赤までの距離を比較して、手前にある方の値をＺバッファの奥行値に入れて更新していく
絵の通りです

三角形が手前にある場合はこのようにやっていくのかな？
何も書かなかった所はｚバッファ

フレームバッファを見ると
赤は

赤と青を足して、赤色の場所には青色があるように、逆も然りのように見える

自分が手前か自分が手前じゃないかという判断を愚直にやっていく事が、ここでの画像処理
レンダリングの途中では色が書かれているかわからないが、最後には書かれる

欠点もあり
レンダリングを一つ一つ処理すると
その途中で、奥行きと比較して手前の色と比較するので、奥は残らない
手前だけ見える

この処理を見た時に
三角形は独立して処理している
三角形の相互処理は処理されない
画素として色だけで
それ以上の相互関係は分からない

影とか
他の三角形の処理
影を作れないので、二つの面の相互関係を考えないちいけない
しかし総当たりで考えないといけない
ここで生まれたのが、Ｚバッファ

ここでレイトレーシング法
何回か反射してというのを繰り返して決めるもの
シャドウとか、反射の情報を持っている

美しい方法らしい
理屈があって、感覚的なものではなく、コンピューターグラフィックスには理屈がある

空中にあるものを投影する時は違う

この画像では影があるが
工夫する事で出来る
マルチパスレンダリング
影の場所を記録する方法
複雑な方法ですが、出来ます
詳しくは自分で調べてください
ＨＰがあるそうです

Ｚバッファ法で、ライトの位置からレンダリングすると
光が当たる部分と隠れている部分があるという理屈から
一回目のレンダリングでどこに光が当たるか否か、判断して、2回目以降のレンダリングに反映される
影を作る

キューブマッピング
六弦レンダリングして、作る
しかし最後にレンダリングを再度行うので
計７回レンダリングを行う

先週の課題では分数が出てきたが
それを少数に直すと浮動小数点になった

これは視野角の扱いとも関係してくる
視野角が広がると隙間が多く出て括る

視野角が狭いと細かく遠くを観察できることが出来る一方で、視野角が広い荒くなる



今回の課題

観ながら考えていきましょう

正面から見たサーフィスモデルの立方体です。

分かりやすいように塗りつぶされたものです。

原点から右上にずれた位置にある。
１辺長さ２の図形。視点も指定されているので注意すること。
ここまで先週とほぼ同じ

課題は表示されている通り。
（１）と（２）に分かれている

（１）は先週とほぼ同じ。

（２）はラスタライズされた結果が反映されるようにすること
画素数は、おおよそでよい

なんでおおよそでいいかというと、数学大好きな人がしっかり計算してくれて、画素数を２４．４のように答える人がいる。しかし、画素は整数なので小数点があるのは間違いだから

アンチエイリアシングをすると線が太くなる。なので、座標の境界になる線が小数になってしまう。そのときに、最終的に何色になるのか決めるのが難しい。

どの領域で画素を考えるのかで、色配色の結果が異なる。

線と線の境界もあるし、面と面の境界もある。そこをどのように処理するのか？

数学の座標変換でやれば計算して終わりだが、CGの話ではその値をさらに処理しないといけない。

なので、四角とか三角形の形が微妙に変わってくる。

注意事項として、各面の占める画素数を描くこと。


右上に図形があることで悩むかもしれないけど、とりあえず前回の課題も同じように考えればよいと思う。

視点からの距離を純粋に考えると、線分の長さが微妙に変わる。レンダリング処理後の側面の処理が難しそう。





