シャドウマッピングのしくみ

思うところがあってシャドウマップの仕組みについて書いてみようと思いました。シャドウマップを初めて実装した頃はわかりやすい図説がなくて苦労した記憶があります。シャドウマップの解説によくある横から見た図はいまいち概念がわかりにくいので、自分なりにわかりやすく書いてみようと思います。

 

シャドウマップの肝であるプロジェクションマッピング(投影マッピング)のシェーダを書いてみました。左上はライトからの視点です。現実のプロジェクションマッピングと違ってCGではテクスチャーがモデルを突き抜けて行きます。この性質が影を判定するために役に立ちます。

 

左上はライトからの深度マップです。この深度マップをそのまま投影してみます。この時点で影のようなものが落ちているように見えると思います。モデルの裏側や遮蔽されている部分にモデルの表側の深度がそのまま投影されている状態になります。

 

こんどはカメラから見たライトと各ピクセルの距離を描画してみます。深度マップと同じようにカメラに近いほど黒く、遠いほど白くなっています(深さも10メートルぐらいでグラデーションするように深度マップと合わせています)。1枚目の深度マップを投影したものと違い、純粋にライトからの距離を表しています。

※カメラから見たピクセルのワールド座標を光源視点の空間へ変換して、光源からのZ座標(距離)を測るといった計算をしています。

 

上の2枚を比較して1枚目が2枚目より暗い部分が影になります。暗いということはライトに近い表側の深度が描かれているということで遮蔽されているか裏側の部分だということが分かると思います。

このように実際のプロセスを順々に見せていけば理解しやすいかなと思いました。もうだいぶ昔ですが、シャドウマップの仕組みを理解した時は感動しました。考えた人は本当にすごいですね。

広告

猫の毛色 #2

思うところがあり猫の毛色プログラムに手を加えてみました。もともと一日で作ったプログラムなので、雑なコードを綺麗にしてグラフィックもスッキリした雰囲気にしてみました。子猫モデルも作り直しました。

 

プログラムに使っている毛色のパターンの分岐図も作ってみました。このプログラムでは4つの遺伝子を使い、毛色パターンも11種類にとどめています。

 

生まれる猫の確率もわかりやすく表示させてみました。白猫の組み合わせでも黒い猫が生まれるから不思議ですよね。

Color Palette

久々に色彩のプログラムを改良しました。今回は画像のカラーパレットをつくってみました。

画像から代表的な色を選ぶというのが大まかな流れですが、減色パレットのアルゴリズムが方向性に近いと思いその方向で進めることにしました。減色アルゴリズムはメディアンカットとK平均法を実装してみました。デバッグ目的も兼ねてアルゴリズムも視覚化してみました。

 

Median-Cut(メディアンカット)

メディアンカットは色空間に立方体を配置し、それを細分化していくことでグループ分けをしていくような仕組みです。

メディアンカットの流れ

1.ピクセルデータすべてを含む立方体を配置する

2.一番長い辺を軸にして立方体を分割する

3.立方体に含まれるピクセルデータの平均色を求めて、立方体の代表色とする

4.2~3をパレットの数だけ繰り返す

HSV空間のHue方向にだけ重みを付けて分割しやすくするようにしましたが、メディアンカットだけだと結果が大雑把な色になりがちなのでK平均法を試すことにしました。

 

K-Means(K平均法)

各ピクセルをグループに分けて、グループに含まれるピクセルの平均色を代表色にする仕組みです。クラスタリングの代表的なアルゴリズムです。

K平均法の流れ

1.減色する色数分の代表色をランダムに色空間に配置する

2.各ピクセルデータとの距離を計算し、一番近いピクセルをその代表色のグループに含む

3.代表色をグループに含まれるピクセルデータの平均の位置(重心)に移動させる

4.2~3をある程度の回数繰り返す

距離を測るのでそれなりに重いです。K平均法は初めのランダム配置で結果までの計算量が変わるのでメディアンカットである程度まで分割した立方体の位置を初期位置として実行するようにしました。

 

最低限の色は取れているかと思うのですが、まだまだ精度が甘いですね。もう少しアルゴリズムを改良していく予定です。

Stock Chart #3

今回もチャートプログラムの進捗です。

 

コメント表示

comment_20161213

調べ物をしているとなぜここで値動きに変化があるのかと思うことがあるので記入できるようにしました。

 

comment_detail_20161213

このプログラムを作るきっかけになったのはPokemon Goで急騰急落した任天堂のチャートでした。あのチャートに様々なドラマを見て心揺さぶられました。笑

今年はPokemon Goから始まりSuper Mario RunやNintendo Switchの発表といろんなことがあった銘柄でしたね。

 

売買記録の表示

purchase_position_20161213

自分の売買の反省材料として買った場所と売った場所を表示できるようにしました。これってありそうでない機能なんじゃないかと思います。

 

詳細データの表示

detail_20161213

チャート上でマウスオーバーするとその日の詳細データを表示するようにしました。移動平均線からの乖離率は電卓使って計算するのは面倒ですからね。

 

チャートの上下反転

reverse_20161213

自分の判断が間違っていないか確認するために反転機能を入れてみました。描いている絵にデッサン狂いがないか鏡で反転させて確認するのと似ていますね。

 

出来高を背景に表示

volume_bg_20161213

出来高を価格帯で背景に表示しました。出来高が多い場所は値動きが鈍くなるものですが、それが視覚的にわかりやすくなったかと思います。

ビジュアル以外にも日経平均との相関係数を計算したり、傾向やパターンを統計的に調べられる関数を書きました。実際に使うことでだいぶ実用性の高いプログラムになってきました。

Stock Chart #2

チャートプログラムの進捗を動画にしてみました。

全体的に何もない状態からパラパラとアニメーションをさせていますが、本来なら一回で描画するモデルの頂点数を調節することでアニメーションしているように見せています。

 

ポートフォリオ

stockchart_20160919222306

保有している株の割合を視覚的に知りたいなと思うことがあったので円グラフを作ってみました。証券会社のポートフォリオページって意外と数字だけで殺風景なんですよね。まだまだ視覚的に楽しくできる余地はあると思います。

 

チャート

stockchart_20160917_volume_animation

チャートを時間軸でスライドさせられるようにしました。これで右に表示している価格別出来高の推移が視覚的にわかるようになりました。これをやりたくてこのプログラムを始めたようなところがあるのでまずまずの目標は達成できたかな。チャートを動的に観察出来るようにすることが最終的な目標で、複雑怪奇な株価の力学を少しでもわかりやすくしてみたい。

 

指標

stockchart_20160920174705

NYダウや為替も別の場所から情報を取ってきて表示させるようにしました。どこのCSVデータも基本的に始値、終値、安値、高値が書かれているので、一度仕組みを作ってしまえば読み込むのは簡単です。

Stock Chart

任天堂株のPokemon Goによる急騰急落のチャートを見ていたらチャートプログラムを作ってみたくなったので基本だけ作ることにしました。

 

stockchart_20160810143953

株価データのCSVファイルを配信しているサイトを見つけたので、これを利用して作ってみることにしました。まずはCSVファイルをネットから読み込む仕組みから作り、株価の終値を線グラフで描画してみました。同じ要領で移動平均線も描画。

 

stockchart_candlestick_20160811

はじめは線グラフでいいかなと思っていたのですが、やはり窓開けを確認するためにローソク足チャートを作ることにしました。これだけで急に株価チャートっぽくなりますね。

 

stockchart_20160809235954

出来高も表示してみました。自分が特に大事だと思っている価格別出来高も右側に表示するようにしました。売り圧力や買い圧力がある程度視覚化できます。売買代金を出来高で割ったその日の平均株価を価格帯で割り振るという計算をしました。

 

stockchart_20160811121750

標準偏差を使って値動きの幅を表すボリンジャーバンドも作ってみました。相場が膠着状態だと幅が狭まり、動くと広がっていきます。移動平均線からどれだけ価格が離れているかを過去にさかのぼって偏差を調べ、その値をバンド幅で表すという計算式です。

 

stockchart_companylist

検索機能もつくりました。アルファベットの上場企業リストを見つけられなかったので海外サイトからスクレイピングで取得しました。東証の1部と2部だけで2500社ぐらいあります。自分の知っている会社なんてほんの一部なんだなと思います。

 

stockchart_20160816130340

検索中に候補を表示するような仕組みにしました。これで検索から結果表示までの基本的な流れの仕組みが出来ました。

自分で作ってみると仕組みがわかって面白いものですね。大雑把に概要を理解しているつもりでも数式で理解するのとでは納得感がだいぶ違いますね。一般的なチャートを見ながら「こんな機能があればいいのに」とか「こんな見せ方をしたらわかりやすいのに」とか思うことがあるので自分で機能を作っていこうと思います。

Wildlife #1

引き続き、学生時代に上手く描けなかった絵をPhotoshopを使ってやり直していきます。

パステルの授業を取っていた頃、パステル専門誌で紹介されていた動物画専門の画家に影響を受け、動物園へ写真や動画を撮りに行き、真似して描いたりしていました。

african_elephant_20160406g

何度も描いては失敗してきたアフリカ象。絵は細部にとらわれて全体を見ないと大体ダメになるんですよね。ついつい皮膚のシワなど細かい部分を気にしてしまいがちですが、後回しにしながら描きました。

 

rhino_20160409d

毎回描けば上手くなるわけではないですが、描かないと発見することもないので結局のところひたすら描くしか上手くなる方法はないですよね。ひとつの小さな発見のために何枚もの犠牲があるような感じでしょうか。