2013年3月26日火曜日

modo601 日光を設定する

次に日差しをDirectionalLightを使って作ります。とりあえずこんな感じで設定してみました。サンプル数値は最終レンダリングの時に512ぐらいに上げます。

とりあえず、この段階でどのような感じになるのか試してみましょう。
レンダー
設定>アンチエイリアシング:8→512
大域照明>間接反射係数:1→3(数値を上げれば全体が明るくなりますがレンダリング時間が増大します)
大域照明>放射照度レイ:256→512
フレーム>フレーム幅:1440×960
の設定でテストレンダリングしてみます。


2点気になります。
1_壁紙の模様が細かすぎてモワレになっている。
2_床の色を拾って、白い壁紙が少し黄ばんでいる。
1の解決方法はシェーダのシェーデング率を1.0→0.1にします。(レンダー時間かなり増えます)
2はシェーダの間接照明サイドの数値を下げます。100%→40%


こんな感じになりました。とりあえず良しとして、先に進めましょう。
ちなみにシェーデング率を1.0→0.1にした為に、レンダリング時間が13分→25分に増えました....。できれば下げたくない設定ですね。
このように環境光と指方性ライトのみでそこそこ見られる絵になります。光源が増えればシーンが複雑になりますし、レンダリング時間も増大します。スピード重視のプレゼン用の資料としてであれば、この程度で十分だと思います。
ちなみにその画像をPhotoshopで簡単なレタッチをするとこうなります。modoだけで完結しようとせずPhotoshopと合わせて作業する方が効率的ですね。

続く…….

2013年3月24日日曜日

modo601 環境光を設定する

次にライティングをしていきましょう。環境光から設定して行きます。
先ず一番大切な設定である、大域照明の間接照明を有効にします。
間接光が回るようになりましたね。次に環境マテリアルを一定&白色に設定します。

全体が暗いので、環境光の輝度を5.0W/sm2にしました。
かなり明るくなりました。
ここで気になる事があります。環境光は360°から光線が発せられています。
つまり、現実では存在しない、地面から天井に向けての光も存在してしまい、このままだと天井が不自然に明るくなってしまっています。
この光を遮る為のポリゴンを、窓の外に設置します。(窓から見えないように設置しましょう)
左がポリゴン無し、右が有りです。自然な感じになりましたね。

ポリゴンの代わりにベランダを作成してもいいですね。

続く…….

2013年3月22日金曜日

modo601 カメラを設定する

次にカメラアングルを設定します。出来るだけ早い段階でカメラアングルは決めておいた方が良いでしょう。その方が余計な作り込みや、ライティングの作業をしなくて済みます。
先ず、カメラを配置して大まかな位置に合わせました。部屋が狭いですね......実際に狭いんですけど。
カメラレンズを広角に設定します。焦点長さを2.5cmにしてみました。
ここで一つ問題が。広角にした事によりパースが付いてしまっています。
これを補正するには、カメラ設定の回転Xを0にします。カメラの視点が少し高くなるので、フィルムオフセットのYに負の値を入れて下げます。これで壁が垂直になりました。
決まったカメラアングルは、間違って移動してしまわないようにロックしておきます。

続く…….

2013年3月20日水曜日

modo601 質感をリアルに設定

次に部屋のマテリアルの設定をしていきいますが、その前にマテリアル設定のポイントを説明します。
下の2枚の画像は、何の設定が異なっているか分かりますか?

正解は「反射」です。鏡のように映り込む事だけが反射ではありません。現実の世界で反射のしない物はほとんど存在しないのです。現実の世界で、全く反射しない物質は、スーパーブラックと呼ばれ、作るのがとても難しいと言われるほどです。光が反射するから色が存在するんですね。
簡単に言ってしまうと、全ての物質は反射し、その反射がボケ具合が異なっているといえます。CGにおいても、回りの景色を映り込む事で質感に表情が生まれ、リアルになります。
マテリアルに反射を加えるには反射量に数値を入力します。反射のボケ具合はブラーリフレクションにチェックを入れて、ラフネススでボケ具合、反射レイで精度を指定します。

ドアの木目を反射量20%、ラフネス80%でレンダリングしてみました。

ここで一つ問題が.....。反射によって色味が明るくなり、本来の木目の色と異なってしまいました。
これを修正するには、反射の色を白からグレーにする事で解決できます。

室内のマテリアルを設定しました。微調整はライティングの後に行いましょう。


続く…….

2013年3月19日火曜日

modo601 建具を入れる

あらかじめ作成しておいた建具を読み込んで、ポイントを移動して開口部に合わせます。

続く…….

modo601 濃淡の無いフラットな画像を作る

CGを作成するにおいて、テクスチャーが綺麗かどうかは仕上がりにかなり影響しますよね。ちゃんとしたスタジオで撮影しない限り、写真に光の濃淡が出てしまいます。
今回は画像をフラットにするPhotoshopの加工テクニックです。
撮影した写真は上が明るく、下は暗くなっています。

Photoshopに取り込み、トリミングした後、グラデーションによるマスクを作成します
マスクを解除
選択範囲を反転
選択を新規レイヤーにコピー
レイヤーの明るさを調整
これでフラットな画像が出来上がりました。



2013年3月18日月曜日

modo601 画像のベイク

BO◯Eのスピーカーを作成しました。こちらを使って画像をベイクしてみたいと思います。

複数にまたがるメッシュとUVマップウを1つにまとめてしまいます。

そのメッシュとUVを選択した状態で、メニュー>レンダー>レンダー出力にベイクします。
このような画像が作成されますので、あとはUVマップに読み込ませれば終了です。



2013年3月16日土曜日

Freeway 外部スタイルシートを読み込む5

ここまでくると、CSSを全て外部スタイルシートに移行したくなります。
FreewayではHTMLアイテムや画像アイテムを配置した段階で、アイテムの大きさや位置、前後関係が自動的に書き込まれます。
これと同じ内容をスタイルシートに記述するにはこのようになります。
 #fw {
position:absolute; 
left:84px; 
top:49px; 
width:121px; 
height:16px; 
z-index:1; 
overflow:visible;
}

これでHtml上の記述は不要となるわけですが、自動的に書き込まれてしまうCSSを書き込まれないようにする方法が分からず.............。
色々試してみた結果、下記の方法にたどり着きました
アイテムを選び、メニュー>アイテム>拡張でdivの項目にstyleだけを入力します。(値は必要ありません)

これでパブリッシュしてみると、style=""とだけ記述されました。

これでHtmlがかなりすっきりとしてくるはずです。

2013年3月14日木曜日

Freeway 外部スタイルシートを読み込む4

今回は外部スタイルシートの応用です。
まず、htmlアイテムを作成して名前を付けて下さい。文字の装飾は一切施していません。

次に外部スタイルシートにこのように記述します。#fw {......}でfwという名前のアイテムに対してスタイルを適用します、と記述しています。

#fw {
font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',メイリオ,Meiryo,Osaka,'MS Pゴシック','MS PGothic', sans-serif; 
font-size:20px;
color:#f00;
}

プレビューしてみるとこうなります。
あとは#fwにいろいろなスタイルを加えていきましょう。
htmlに余計な記述がされないのでSEO的にも良いはずです。
なんども言うようですが、外部スタイルシートはサーバーに手動でアップしましょう。

modoで作るインテリアパース_幅木を作成

幅木を取り付ける壁を選択し、幅木の高さでスライスします。

このようにエッジが追加されました。

幅木部分のポリゴンを選択し、メッシュ編集>ベベルで幅木の厚み分だけシフトします。

これで幅木が完成です。

続く…….

modoで作るインテリアパース_開口部を作る

次に窓、ドアを作成します。先ずは開口部のある壁を選択します。

上面図に切り替えて、スライスツールでポリゴンに切れ目を入れます。CADで作成した開口部のアタリを参考にします。

このように開口部の切れ目を入れました。

開口部高さに関しても天井高さ2500に対して2000の所に切れ目を入れます。

窓、ドアが入る部分のポリゴンを削除します。

続く…….

2013年3月2日土曜日

Freeway 外部スタイルシートを読み込む3

CSSとスタイルシートについて今まで何度か取り上げてきましたが、ついでに少し解説してみたいと思います。例えば、
Freewayは最高だ
とサイトに表示されたとします。サイトの内容は『Freewayは最高だ』であり、文字が赤い、太字はデザインとなります。この『内容』と『デザイン』を分離させてコードを書く事はとても重要な事です。
それは、検索ロボットが収集する情報はサイトの内容であって、文字が赤いや太いなどのデザイン要素は不要だからです。
HTMLの文中に『内容『と『デザイン』が混在してしまうと、そのサイトに何が書いてあるのか検索ロボットが判断しにくくなってしまいます。その結果SEO的に不利になり検索順位が下がる事になります。
それを防ぐ為にはサイトの『デザイン』の部分(以下CSS)を別のファイルに書き出したファイル(スタイルシート)を作成し、HTMLに読み込ませる事が一般的です。
残念ながらFreewayで作成されたHTMLは、HTMLの文中に『内容『と『CSS』が混在してしまいます。従ってSEOを意識するのであれば、前回の投稿で取り上げたように、外部スタイルシートを読み込みHTMLをシンプルにする事は非常に重要な事になります。FreewayでHTMLに少し慣れてきたら、スタイルシートの作成にチャレンジする事をお勧めします。
それでは前回のHTMLとCSSを詳しく見て行きましょう。
まずはHTMLから

<ul class="menu">
<li><A href="#">ホーム</A></li>
<li><A href="#">ご利用ガイド</A></li>
<li><A href="#">お気に入り</A></li>
<li><A href="#">ログアウト</A></li>
<li><A href="#">ユーザー登録</A></li>
</ul>
(はリンク先を任意で指定)
ポイントは<ul class="menu">です。これは例えるなら<ul></ul>で囲まれた内容は『山田』さんだよ!とスタイルシートに定義する事です。スタイルシートには、文字が太い、青い、斜体など山田さんに関する情報を記述していきます。
この他に<ul id="menu">という書き方もあります。この場合『山田花子』さんだよ!となります。この2つの違いは、『山田』さんはHTMLの中で何度出てきても構わないが、『山田花子』さんは一度きりしか登場させる事が出来ません。それがclassとidの違いです。
それではCSSを見てみましょう。
ul.menu{
  position:absolute; 
  left:200px; 
  top:500px; 
  z-index:38; 
  background-color:#DEDE48;
  font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro', sans-serif; 
  font-size:10px;
  float:left;  
  padding:0; 
  margin:0;
  }
ul.menu li { 
  float:left;
  list-style:none; 
  margin-left: 20px;
  }
ul.menu a {
   text-decoration:none;
   color:#f00;
    }
ul.menu a:hover {
   text-decoration:none;
   color:#3F63A4; 
    }
ul.menu a:active {
   text-decoration:none; 
   color:#3F63A4; 
    }

CSSが
ul.menu 
ul.menu li
ul.menu a
ul.menu a:hover
ul.menu a:active
の5つの項目で構成されています。1つめのul.menuはmenuと定義された『ulアイテム』の位置、大きさ、バックカラー、文字装飾等が記述されています。
次はul class="menu"と定義された中にあるul.menu li <li>リストに対して、リストの並び方、間隔などが指定されています。
最後にul.menu a 、ul.menu a:hover 、ul.menu a:active は、そのリスト上にマウスが乗っている時、いない特、クリックされた時の文字の装飾と色が指定されています。
このスタイルシートの記述を書き換えて、オリジナルのMyリストを作成してみてください。

2013年3月1日金曜日

Freeway 外部スタイルシートを読み込む2

アクションを使わないもっと簡単な方法がありましたので、内容を修正したいと思います。
マークアップに記述する所までは同じです。
作成済みのCSSファイルをSiteFolder内のCSSフォルダに収納します。

ページを選び、メニュー>ページ>HTMLマークを選びます。

そこにこのように記述します<link rel=stylesheet type="text/css" href="css/menu.css">
(赤字はファイル名に変更して下さい)
挿入先を<head>タグの後に切り替えます。

これで、さきほどCSSフォルダに入れた外部スタイルシートを読み込む事が出来ます。
スタイルシートを直接編集できるのでとても便利ですね。
※マスターにはスタイルシートが読み込めないようなので、ページごとに設定しましょう。
※CSSフォルダに入れたCSSファイルはFreewayでは自動的時アップロードされません。必ず手動でサーバー内のCSSフォルダにアップしましょう。