アプリケーションを綺麗に使う

ソフトウェアを綺麗に使う、という最近の目標があります。



仕組みよくわからんけどなんかできてるとか、使い方おかしいけどなんか良いとか、
それはあとあと苦しい。みたいな使い方を出来るだけしないようにしたいです。



どのアプリケーションでも言えるのが、オブジェクトやレイヤの名前付けや分類などの管理を適当にやる。

フォトショのレイヤの合成の減算とか対等に選んで良さげなやつにした。

ブレンダーでマテリアルの設定で、複数のノードを無駄にミックスしまくっている。

ライノでフィレット等でサーフェスが汚い。

グラスホッパーアルゴリズムに無駄が多い。




どれも使えていると言えば使えているけど、後での修正がめちゃくちゃ面倒だし、
それが資産としてストックになっているかと言えばなっていない気がする。




テレビを見ていたら、プロの料理人が指導して、素人の芸能人が真似して作るヒルナンデス?のコーナーがやっていた。


プロの料理人が作りながら片付けもしていて料理の完成の時にキッチンが綺麗になっているが、
素人の芸能人は使い終わったボウルをその辺においたり、菜箸をシンクに入れてしまって新しいものを使ったり、
また、ごちゃごちゃしたまま進めているので、入れる材料を飛ばしてしまったりしていた。


料理でも、アプリケーションでも、上手い人はそれを綺麗に使えるのだと思いました。



.

Belnder と Unity

CGを用いて映像を制作する時にソフトを比較した際のメモ。


Blender は、ニコニコ界隈のメイキングがあり幾つか見てみる限りかなり良さそう。
個人的に切り出した映像ではなく、アプリケーションとして作って、
演算し続けるようなものをやってみたい、という気持ちもあったので、 Unity も触れてみた。


Unity を触れるにあたり、情報デザイン学科の谷口暁彦先生の
ヴィデオゲームアートのための Unity 講座の資料を参考にした。資料はこれ→( http://okikata.org/gameart/ )

Unity

  • メリット

いわゆる3Dゲームのような具象的な表現が得意
物理演算、ライティング、フォグ、被写界深度などはコードを一切書かずに実現できる。
出来合いのアセットなどの組み合わせが豊富なので、箱庭的に空間を構成できる。

  • デメリット

逆に抽象的でジェネラティブな表現は苦手。
アセットを追加すると自分で書いていないコードが大量に入ってくるので、
エラーやメモリリークがあった場合、原因を探すのが結構大変
そしてやや不安定になる場合も。

( Intoroduction より http://okikata.org/gameart/introduction.html


以前、さくっと写経したのがこれ↓
www.youtube.com



以前触って、そして今回また少し触ってみての感想は、
谷口先生の言葉を借りますと、Unityは箱庭っていう感じがすごいしっくりきた。


うまく言葉にできないが、
すでにできている強固なプラットフォームに自分で作ったものを乗せて行く感覚。
コードもりもり書くような制作をしてないからかもしれませんが、
Unity の開発環境が凄いしっかりしたプラットフォーム(=土台)なのですが、
土台がしっかりし過ぎていて、自分で作品を作っているって感覚よりも、自分の作品をそこに置く、みたいな。


f:id:ysok_na:20170530044454p:plain
箱庭キットというものが最初にあって、そこに、市販のジオラマ用の樹木とか標識とかをおいて、
あと少し自分で作った何かを設置するみたいなイメージに近い気がします。


ふと某所で見た鉄道模型を思い出しました。
鉄道模型で、ある程度は、市販の樹木やビル、電線などを買ってきて設置し、
市販されてない東京スカイツリーや新型車両は、自分で作って設置する。
結果、市販のものと、自作のものと混在していて、模型全体ではうまくできている、みたいな。
(そして、谷口先生は最近、鉄道模型に凝っているような)


Unity とあまり仲良くなれなかったので、今回は、 Blender でいきます。
今後は、きちんと勉強して、 Unity をうまく使っていきたいと思います。

Remove all ads

Motion Blur のサンプル

サンプルを拾ったのでシャッタースピードによる結果を比較

File:Blender2.65 motion blur.blend - BlenderWiki

ファイルはこんな感じ。
上からカラフル箱が落ちてくるので、その途中の瞬間をレンダリング
f:id:ysok_na:20170529035853p:plain

短いほど、ブレが無くなりますたぶん。


モーションブラーのシャッターのパラメータです

0.0 Sec
f:id:ysok_na:20170529040057p:plain

0.2 Sec
f:id:ysok_na:20170529040119p:plain

0.4 Sec
f:id:ysok_na:20170529040155p:plain

0.6 Sec
f:id:ysok_na:20170529040235p:plain

0.8 Sec
f:id:ysok_na:20170529040254p:plain

1.0 Sec
f:id:ysok_na:20170529040400p:plain

1.2 Sec
f:id:ysok_na:20170529040435p:plain

1.4 Sec
f:id:ysok_na:20170529040447p:plain

1.6 Sec
f:id:ysok_na:20170529040504p:plain

1.8 Sec
f:id:ysok_na:20170529040519p:plain

2.0 Sec
f:id:ysok_na:20170529040537p:plain

Remove all ads

Making of Oyasuminasai

" 夜空の動画を作るメモ "


星空の~と聞いたのが、3月。
Blender と、Processing でほんの少し。
Blender のアニメーションができることはわかった。
www.youtube.com


で、特に何もなく一気に5月。
いくつか検討をはじめる。


まず、使用ソフトについて。
モデリングは、特に迷うことなく Rhinoceros で。

映像として Blender か、リアルタイムレンダーとして Unity か。
シェーダとか Unity が気になったが、Blender でのアニメーションは確実にできるということが、
わかっていたので Blender で。
そのへんはここに。

ysok-na.hatenablog.com


ここで、映像のテイストも確認。
映画「The Little Prince」のこのシーン。
(この映画は、CG パートと、和紙?のストップモーションパートがあってどちらも凄い)
シェーダではないので、Blender でok。

www.youtube.com



まず Rhinocerosモデリング

ローポリで作ると軽いので、後で幸せ。
3角メッシュのミラー、環状配列で星にする。
vertex 12 / face 20
f:id:ysok_na:20170527190823j:plain


この辺はミス、かっこいいけど
f:id:ysok_na:20170527190830j:plain
f:id:ysok_na:20170527190835j:plain


背景用にパーリンノイズでポリメッシュと、(ぺらのメッシュにしました。)
ランダムに星を配列。
f:id:ysok_na:20170527190840j:plain


パーリンのメッシュは、単独で背景用マスク用にレンダリングして画像にした。
あとでテクスチャにする。
f:id:ysok_na:20170527191331j:plain


FBXで書き出し。
Rhino から Blender では、FBXでは回転してしまう。
STLでは回転しないが、離れたものも1つのオブジェクトとして認識されるので駄目。


ここから Blender

インポート。
f:id:ysok_na:20170527192028p:plain


星を光るように設定。
放射シェーダーなど。
f:id:ysok_na:20170527192127p:plain


レンダリング結果。
f:id:ysok_na:20170527192233p:plain


コンポジション機能でブラーをかけた。
f:id:ysok_na:20170527192346p:plain


1枚目のレンダリング画像と、ブラーを合わせる。
ミックスのやつで比較で合成。
f:id:ysok_na:20170527192430j:plain


平面すぎるので、奥行き感を与える。
星の間に半透明の画像をレイヤとして重ねる。

// 追記
奥行き感を出すための半透明レイヤなどしたが、
コンポジットのノードの中にカメラ距離の様な機能があった(それはそう)
フォグ、被写体深度 etc...
機能が多くあったのでちゃんと勉強しないといけない。
// 追記ここまで

f:id:ysok_na:20170527192622p:plain


奥行きの工夫のレンダリング結果、良い感じ。
f:id:ysok_na:20170527192947p:plain


奥行きのレンダリング画像に、前述のコンポジションを加える。
それと同時に、Rhino で最後に作ったパーリンの画像テクスチャを差分で合成する。
f:id:ysok_na:20170527193347p:plain


とりあえずその結果。
パーリンのテクスチャが、なんとか銀河なのかなんとか星雲なのか、よいムラになってよかった。
f:id:ysok_na:20170527192848p:plain


Blender メモ。
ガムボールの位置の修正はこれ。
オブジェクト > トランスフォーム > 原点をジオメトリの重心に移動
f:id:ysok_na:20170530071235p:plain


グラフエディターで2点間の補完の種類が選べる。
2点を選択して、” T ”
今回は等速で動き続けてくれれば良いので、リニア
ここが詳しいです→( http://blender-cg.net/graph-editor/
f:id:ysok_na:20170530071626p:plain


動きを表現するぶれ、モーションブラー
うまくいかなかったので、今回はこれでないものでやろうかと思います。
一応、サンプルファイルの検証を次の記事に入れました。
f:id:ysok_na:20170530072230p:plain
ysok-na.hatenablog.com



透過にチェックを入れ、アニメーションとして動くものだけレンダリングし、
背景は、次のコンポジションで処理します。
f:id:ysok_na:20170530072610p:plain


動きのぶれをモーションブラーではなく、コンポジションでやります。
レンダリングした画像を保存して読み込むのではなく、
そのままコンポジションするときは、ポストプロセシングのチェックを入れます。
ノードエディターがいくつか見えていて気持ち悪いのですが、マテリアル用とコンポジション用です。
f:id:ysok_na:20170530072341p:plain


コンポジション用の設定を終えたら、アニメーションのレンダリングを始める。
今回は、動くもの5個だけ、背景はコンポジション処理なのでとても軽い。
www.youtube.com


コンポジションについては、できる人はこのようにやるようだ。
きちんと勉強しなければ...
CGcompo Blenderでコンポジット!


コンポジションがよくわからないものを、上のリンク内のキャプチャ画像を見てみる。
Photoshopの普通のレイヤのように重ねる方法は、
カラー > アルファオーバー のノードでできた。
プリマルチを1.0にする。
f:id:ysok_na:20170602000403p:plain


これでコンポジションのめどが立った。


星の煌きは、回転じゃなくて光具合でということなのでテスト
失敗、わかりにくい、微妙?
www.youtube.com


キーフレームのテスト
流れ星はこれでとりあえず動く。
www.youtube.com



7月に入って現場でのテストができるようになる


プロジェクションのための窓枠
これを打ってそれに合わせてばみって位置あわせ。
f:id:ysok_na:20171204211427j:plain


流れ星の設定と窓枠のコンポジション
フレームとポジション指定。
(なぜか星の色が違うけど)
www.youtube.com


現場のプロジェクタとスクリーン等。
やってみて怪しい部分が出てきた。
黒すぎる...
f:id:ysok_na:20171204212459j:plain


ここらへんで、この辺の夜空の CG をチェック。
ysok-na.hatenablog.com


現場で静止画で補正。
思ってた感じとかなり色が違う。
色を白に結構ずらしたので微妙ぽい。
f:id:ysok_na:20171204212602j:plain


上の補正用の画像からテスト用の背景を作る。
が、実際に打ってみると鮮やかさ青さが足りない?
f:id:ysok_na:20171204212800j:plain


プロジェクタで打ったイメージがつかめないし、
Mac のモニタと、セカンドディスプレイの SHARP のテレビでも色味が違うし、
本当に困った。。。
現場でプロジェクタで打った画面で photoshop をいじる結局。
ここでグラデーションの色を決める。
f:id:ysok_na:20171204212947j:plain


無理やりコンポジションでどうにかしようとしている。
f:id:ysok_na:20171204213134p:plain


たぶん完成。
ここのタイミングで、
頭とお尻がニュートラルというか同じ状態の数秒のクリップを複数作って、
それを適当に組み合わせれば、最小限のレンダリングで、
長い尺の動画が作れるとわかった。
f:id:ysok_na:20171204213333j:plain


流れ星、煌きのほかに UFO とか出来そう。
いらすとや使おうかと思ったけどちょっと見たら微妙、
他の素材サイトも探すの面倒なので、はやしに頼んだ。
f:id:ysok_na:20171204213432p:plain
f:id:ysok_na:20171204213454p:plain


UFO のモーションちょっとこだわった。
こっちでくわしく↓
ysok-na.hatenablog.com
www.youtube.com


UFO と同じ方法で ET 。
これは著作権も怪しいので没。
youtu.be


結果的に、

  • 流れ星 3秒 X 6カット
  • 煌き 2秒 X 6カット
  • UFO 6秒 X 1カット

を並べて長い動画にした。
f:id:ysok_na:20171204214809p:plain
www.youtube.com


これで完パケ。
(2017年 8月 1日 0:17)


ちなみにスタート?というか、
はじめに Blender のテストしたのがこれで、
日付は、 2017年 3月 14日。
途中完全に放置してたときもあるのでなんともいえないけど、
結構、長丁場だった。
www.youtube.com



完成後、見に行ったときの他の作品も含めての感想等。
ysok-na.hatenablog.com




あとは、直接関係のない Mac OS の Chips ですが、Blender のような、起動している1アプリで1プロジェクトだけ開くようなソフトで、複数プロジェクトいじるには、複数の同一アプリを開くしかない気がする。

その方法は、 Terminal.app で、通常の

open hoge.app

ではなく

open -n hoge.app

で開くと、同一アプリの複数起動ができるぽい。便利ですね。(ソフトによるかもできないものある)




_

Remove all ads

grasshopper の 緩さ

久しぶりに、いろいろアルゴリズムを試しながら grasshopper でジオメトリを作った。

html/css やら java やら触ったり、php の本を写経したりして、grasshopper に戻ってきて思ったのは、ghはそれぞれのコンポーネントはきっちりと独立して機能していて、これはあそこだけで使える、みたいな縛りもなく、全体的な緩さがあるので気楽だなとおもった。

気をつける縛り、ルールといえば、データ型と、リストのマトリクスくらいだ。
やってはいけないという事は、たぶん無い。

緩いという反面、どのような組み方もできるので(書き方が1つでない言語はクソと言われることもありますね)、自由に好き勝手に出来てしまう、とても汚い組み方、冗長な組み方でも動くことは動くし、
それにより、ごちゃごちゃ作った可読性の低いゴミが生産されやすいという面もあるな、と思いました。

自由に書けるような緩さは、確かにとても良いのですが、自分の過去のファイルを開いて、すぐに理解できるのか不安です。

他でプログラムに触れたことで、ただ組むだけでなく、少し合理的に組めるようになったような気がしました。がんばります。


話がめちゃくちゃ飛躍しますが、
強い縛りのあるものと、縛りのないものの例として、Instagram や snow のようなフィルター系のアプリケーションと、RAW 画像の現像のアプリケーションの違いを考察します。

Instagram や snow ではいくつかのフィルターがあって、それらはどれを選んでも選ぶだけで良い感じになるフィルターであり、使う人は選ぶだけだ。

それに対して、LightRoom のような、RAW 画像の現像のアプリケーションでは、ユーザが自分でパラメータ群を調整しなければならない。パラメータ群の調整によって、自分の出したいテイストの写真が作ることができる。

前者では、誰が使ってもアプリのフィルターが同じであれば、同じテイストの画像を作ることができる。しかもそれは、専門性がない誰でもできる(画像のテイストを決めるのは色情報以外にも構図などの要素があるということは、ここでは無視します)。

後者であると、自由に動かせるパラメータ群によって、使う人がおもむくままに調整できるので、同じテイストをというふうにしても、微妙な差が出るだろう。また、うまい調整には知識や経験などの専門性が必要だ。


縛りの無さ、緩さのあるLightRoom の現像であると、素人には難しい(再現性が低い)。
再現性が低いことと、可読性が低いことをニアリーイコールではないかな、ということで、全然まとまりませんが終わります。

Remove all ads

wordpressメモ 2

wordpressに仮に写真を入れた
nyny-test


tomito arhitecureを参考にしたが
tomito architecture(トミトアーキテクチャ) |

projectが今後50個100個となるときに、
その下のaboutや、コンタクトがどんどん下になると思うがどこかで切るのだろうか?

projectの一覧がないので、不便

パーマネントリンクがない(本当はつけたほうがいいようだった、昨日のメモによる)
cf :
tomito.jp/p=158 X
tomoto.jp/works/house-a O

レスポンシブ対応してないようにも見えた。
スマホからだとmenuがとても小さい


ooooooooooooooooo




仮投稿で、worksの所を仮に年度でもカテゴライズしているが、年度は投稿順で良さそう(?)


カテゴリを2週類が出来たので、どっちでもあるというものが扱えて便利そう。architecture / renovation など





あとは

worksの写真をグリッドにしたい


マウスオーバー? ← js


ハンバーガーメニューも ← js





辛いと思しきところも出てきた

footer上の、過去の投稿へというところの表示が崩れた。
index.php single.phpともに。
条件分岐は以前のhtml直書きの時にはめんどいのでつけてない。



その他

自作のテーマ(テンプレ)にバグがあり、それを有効化すると、ログインできなくなるっぽい。
Cyberduckの方で、自作テーマを消して、デフォルトのテーマに戻すしかないのかも


CSSは、普通に動くが、全体のうまいデバッグの仕方がわからない。

よくわからないので、デザインにこだわらずにただ動いてくれるテーマを買いたいと思った。




今日の進捗は、上の失敗と、adobe souce code proのインストールくらい。



phpでは、
: と ; の区別があるが、それに気がつけないなど辛かった。
f:id:ysok_na:20170523065759p:plain
atomでデフォルトの何かのフォントから、source code proに変更した。
source code proのインストールはTerminal経由でやらないといけなかったが、先日phpで遊んだ時に、Terminal少し触っていたので以外とあっさり出来た。


とりあえずメモ、資料探して夜に追記します。

Remove all ads

wordpress メモ

参考にしたいくつかのサイトのメモ。

URLを自動の日付から変更はこれ
f:id:ysok_na:20170522002008p:plain
↑日付のURL
liginc.co.jp

こんな感じが良さそう
f:id:ysok_na:20170523064054p:plainf:id:ysok_na:20170523064027p:plain



フッター「proudly powered by wordpress」を消す方法
wordpress999.info
他人の書いたものに手を入れるのめんどくさいけど、これくらいなら。。。


テーマ自作はこれとか
わかりやすいが導入のみ
http://webseeya.com/2015/02/15/howto-wordpress-original-themes/

index.php
header.php
footer.php
style.css
この4つで動いた

index.php

<!-- import header -->
<?php get_header(); ?>

    <div>
      <?php if(have_posts()): while(have_posts()): the_post(); ?> <!-- loop start -->

      <?php echo get_the_date(); ?> <!-- print date -->
      <?php the_category(', '); ?> <!-- print category -->
      <?php the_title(); ?> <!-- print title -->
      <?php the_content(続きを読む); ?> <!-- print contest -->

      <?php endwhile; endif; ?> <!-- loop end -->
    </div>

<!-- import footer -->
<?php get_footer(); ?>

header.php

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title></title>
  </head>

  <body>
    <div>
      <?php bloginfo('ny-test'); ?>
    </div>

    <div>
      <?php bloginfo('ny-s-test-page'); ?>
    </div>

    <h1>heeeeeeader</h1>
    <hr>

footer.php

  <hr>
  <h1>fooooooter</h1>
  </body>
</html>

style.css

/*
Theme Name: ny test theme
Author: ny
Author URL: xxx.org
Description: hogehoge
*/

これも
テーマを自作したい人必見!WordPressの基本的な仕組み | 初心者にもおすすめ!無料 WordPress テーマ Principle

Remove all ads

主な画像ファイル形式

印刷概論でもらった資料を見つけたので、捨てる前にメモしておきます。
それプラスαとしてよく自分が使うものをまとめます。


主な画像ファイル形式


EPS
Encapsulated PostScript
ページ記述言語 PostScript で書かれた画像データ。
DTP の標準形式。画像の圧縮保存ができない。
ビットマップ形式の他に、ベクトル形式の EPS も有り。


TIFF
Tagged Image File Format
Aldus社(現 Adobe System 社)と Microsoft 社により、開発されたファイルフォーマット。
Macintosh だけでなく、 Windows DTP でもよく使用される。
可逆圧縮にて1/10 程度まで圧縮できる。


JPEG
Joint Photographic Experts Group
25~100 分の 1 と圧縮率が非常に高いのが特長。
ただし、非可逆圧縮である。
画像を軽くできるので、作業効率がよく、伝送にも適している。
印刷画像としては、品質よりも効率優先。


GIF
Graphics Interchange Format
256色以下の画像を扱うことができる可逆圧縮形式のファイルフォーマットである。
圧縮画像ファイルフォーマットでは歴史の長いもののひとつで、 Web ブラウザでは JPEG と並んで標準的にサポートされる。
圧縮形式の特性上、同一色が連続する画像の圧縮率が高くなるため、イラストやボタン画像など、使用色数の少ない画像への使用に適している。
JPEGPNGと大きく違う点として、タイムラインを持ちアニメーションが作れることが挙げられる(これにより GIF アートのような文化が生まれている)。
読み方は”ジフ”


PNG
Portable Network Graphics
画像の色モデルとして、最大16ビットのグレイスケール、24ビットと 48ビットのRGB、または8ビットまでのインデックスカラーモード(パレットカラー) を利用することができる。
透過についてはクロマキーによる透過指定、および8ビットから16ビットのアルファチャンネルをサポートする。
また、画像に付属するテキストなどのメタデータやガンマ値なども画像ごとに記録できる。


AI
Adobe System 社の Adobe Illustrator のフォーマット。
Illustrator は画像をベクターグラフィックスとして作成する。
そのため、比較的軽量で、拡大や変形にも強い。
.ai 形式は元来アウトラインフォントの PostScript の形式を発展させたもので、
Illustrator のようにインタプリタを内蔵していないアプリケーションでも PostScript の形式を読み込むことを可能にしているという特性を持っている。
そのため Illustrator は、画像作成だけでなく気軽に PostScript を閲覧できることから「PostScriptのビューア」としてもよく利用されてきた。


PSD
Photoshop Document
Adobe System 社の Adobe Photoshop のフォーマット。
レイヤーやパス、解像度、埋め込みテキストなど Photoshop 独自の編集情報を完全な形で保存することができる。


PDF
Portable Document Format
Adobe Systems 社が開発および提唱する、電子上の文書に関するファイルフォーマットである。
1993年に発売された Adobe Acrobat で採用された。


SVG
Scalable Vector Graphics
ベクタ形式であるため、拡縮自在である。
その他に、XMLベースの為、ウェブブラウザで(画像として、という意味ではなく、HTMLのソースビュー等と同様に、という意味で)閲覧でき、テキストエディタ等で編集できる。
また、HTMLとの親和性により、ハイパーリンクを埋め込んだり、JavaScript 等と連携させることもできる。
SVG は基本的にテキストで構成されており、ブラウザの利用者が入力した情報を CGIJavaScript を介して SVG データに組み入れることが可能である。これにより、ベクターデータを用いた統計グラフでは可変性のある表示が可能になる。


GIFは色の数に制限があることや、スキャンした時に保存されるTIFF形式について、はじめて知った。



参考にしたのはこの辺り
Graphics Interchange Format - Wikipedia
Portable Network Graphics - Wikipedia
.ai (えーあい)とは【ピクシブ百科事典】
.psd (ぴーえすでぃー)とは【ピクシブ百科事典】
.pdf (ぴーでぃーえふ)とは【ピクシブ百科事典】
Scalable Vector Graphics - Wikipedia



おわり

Remove all ads

リノベーションと作家性

昨日飯島ゼミを覗いたら、リノベーションについての発表をしている学生がいた。

その時に飯島先生がリノベーションって、他人の作った建築に手を入れる感じだから、リノベーションの設計をする人は自分の作家性とかに拘らないのだろうね、と受けていた。
(それに合せて、森山高至のドヤ建築批判の中であげられた建築教育のオリジナル神話にいても触れていましたが、ここでは割愛します。(あと、1年生、発言するならきちんと勉強してくれと思ったことはここでは書きませんが。))

これについて少し気になったことは、リノベーションの設計は作家性に拘らないということは無いのではないかということです。
構造躯体を前の設計者が設計した出来合いのものを使うだけであって、それを敷地条件のような単なる与条件としてとらえれば、リノベーションでも自分の思うように意外と自由に設計できるのでは無いかなと思いました。



少し話が逸れますが、先日行った市原湖畔美術館がリノベーションされているものなのですが、構造躯体を隠し切らない、純粋にホワイトキューブにした部分もありながら、構造躯体を生かしてそのまま空間として作っている部分があって良かったです。
めちゃくちゃ交通の便が良くないので、2度と行けないかなと思います。

交通手段は、高速バス(東京から、と横浜からどちらも1hくらい)と電車があります。

僕の場合の交通手段記録しておきます。
調布〜電車〜横浜
横浜〜高速バス 1h 1500円〜市原舞鶴バスターミナル
市原舞鶴バスターミナル〜徒歩 40分〜市原湖畔美術館

バスターミナルから湖畔美術館へのバスは夕方に一往復しかないので、徒歩かタクシーです。
lsm-ichihara.jp




あと、長坂常のリノベーションサヤマフラットのリンクを貼っておきます。
www.archdaily.com


おわり

Remove all ads

blenderのノイズについて

万華鏡のよう反射が繰り返されるレンダリングでノイズが乗った。


万華鏡なようなもののスタディ
kaleidoscope | ny


データはこんな感じ
f:id:ysok_na:20170507042556p:plain

サンプル数を上げれば上げるほどノイズが減るが時間がかかるので、とりあえずプレビューでやっていた。

レンダリング画像のサイズは、1900px X 1900px)



サンプリングの設定

プレビュー
サンプル数:24
かかった時間:0.5〜1時間
f:id:ysok_na:20170507042809p:plain

ファイナル
サンプル数:24(2重サンプル)
かかった時間:3〜5時間
f:id:ysok_na:20170507043034j:plain



webサイトに載せてからブラウザで見るとノイズかま気になったので、すべてファイナルでレンダリングをして挿し直した。

並べて比べるとこんな↓
f:id:ysok_na:20170507050349p:plain
f:id:ysok_na:20170507050354p:plain

スクリーンショットで持ってきてしまったので、あまり変わらないようにも見える...
反射が繰り返しが多い外側部分にノイズがでていた。

Remove all ads

Appleの、様々な肌の色に対応する絵文字

facebook messengerにて、iPhoneからの絵文字が、PCのブラウザで文字化けした。

iphoneのmessengerアプリにて↓
f:id:ysok_na:20170430145321p:plain
PCのchromeにて↓
f:id:ysok_na:20170430150341p:plain

PCで、これをコピーしようとすると四角形と肌色が2つで1つであった。
この文字化けから、Appleの様々な肌の色に対応する絵文字の仕組みが見える(僕の勝手な予想ですが)。

様々な肌の色に対応する絵文字は、おそらく輪郭と肌の色2つのパラメータでできていて、PCの写真の、左の四角形は輪郭の表示エラーで、右が肌の色になっている。

白い手の画像、黄色い手の画像、黒い手の画像と、それぞれの画像を用意するより、輪郭だけのデータといくつかの色のデータにわけて用意して組み合わせるほうが、都合が良い(軽い?)のだろう。



他の肌の色で同じ絵文字を送って試してみたいなと思ったものの、絵文字の場所がわからなかったので検証できず...

ありました。
スマホ
f:id:ysok_na:20170501224255j:plain
PC
f:id:ysok_na:20170501224254p:plain
想像通り、輪郭が表示できなかった四角形と、茶色が出てきた。



輪郭 X 色
f:id:ysok_na:20170430145318p:plain




Appleの、様々な肌の色に対応する絵文字は、これです。
アップル、絵文字に人種と肌の色の違いを導入。iOS 8.3 / OS Xベータから - Engadget 日本版
f:id:ysok_na:20170430145501p:plain

Remove all ads

気持ちの悪いUX、UI。そのアーキテクチャ。

某ゲーム会社で話したことのメモ+αです。


よくあるスマホゲームのデザインです。
武器を一つ選んで、ストーリーを進めるゲームのイメージです。

f:id:ysok_na:20170421020609j:plain

公開の初めの頃は、ゲームがまだ小さいので、わかりやすい階層構造になっています。

武器を一つ選んで、ストーリーを進めるゲームを書き起こしてみると、以下のようになります。

最初期のシンプルな状態

ゲーム
 ┣ ストーリー
 ┃ ┣ ステージ1
 ┃ ┣ ステージ2
 ┃ ┗ ……
 ┗ 装備
   ┣ 剣
   ┣ 槍
   ┗ 鉄砲


最初は、このようなシンプルなアーキテクチャです。
何も問題はありません。


ユーザーを満足させるために、ゲームとしてのボリュームを増やしてみます。

例えば、武器とともに、防具を選べるようにするとします。

その際に、一番上に乗せたイラストのUIのまま、防具のオプションをつけてみます。
(イラストのUI:ゲームのメインのページの下部に、ストーリーと装備の2つのメニューが並ぶもの)

気持ちの悪い例

ゲーム
 ┣ ストーリー
 ┃ ┣ ステージ1
 ┃ ┣ ステージ2
 ┃ ┗ ……
 ┗ 装備
   ┣ 剣
   ┣ 槍
   ┗ 鉄砲
   ┗ 防具
     ┣ 軽い鎧
     ┣ 重い鎧
     ┣ 軽い盾
     ┗ 重い盾

メインページのUIを維持することを優先するあまり、
武器としての装備と同時に、防具を選択するという操作が分かりづらくなっています。
これが、気持ち悪いUXにつながるかと思います。

これと同様に、新システム、期間限定イベントなどが追加されていき、どうしょうもないものになっているものが見受けられます。
(最近では、ポケモンGoでも、そのようなバージョンが何度かありました)


設計された後に、後付けられたものにより階層構造が崩れたことに起因しているので、階層の整理をしてあげるよな解決例を考えてみます。

気持ちの悪くない例(1)

ゲーム
 ┣ ストーリー
 ┃ ┣ ステージ1
 ┃ ┣ ステージ2
 ┃ ┗ ……
 ┗ 装備
   ┣ 武器
   ┃ ┣ 剣
   ┃ ┣ 槍
   ┃ ┗ 鉄砲
   ┗ 防具
     ┣ 軽い鎧
     ┣ 重い鎧
     ┣ 軽い盾
     ┗ 重い盾

装備の中で、武器と防具どちらも好きなものを選択できるということが明確になりました。
が、階層が深くなってしまうので、操作が多くなることや、読み込みに時間がかかるなどにより、
ユーザーがヘイトと感じるかもしれません。



もう1つ例を挙げてみます。

気持ちの悪くない例(2)

ゲーム
 ┣ ストーリー
 ┃ ┣ ステージ1
 ┃ ┣ ステージ2
 ┃ ┗ ……
 ┣ 武器
 ┃ ┣ 剣
 ┃ ┣ 槍
 ┃ ┗ 鉄砲
 ┗ 防具
   ┣ 軽い鎧
   ┣ 重い鎧
   ┣ 軽い盾
   ┗ 重い盾

こちらも、装備の中で、武器と防具どちらも好きなものを選択できるということが明確になりました。
が、最初のUIが崩れてしまうので、再びデザインを考える必要があるかもしれません。


悪い例のように行き当たりばったりでつくられたUIによって、とても気持ち悪いUXが生まれる、
そのようなアーキテクチャの設計に興味があります、という話をしました。

同様なことが起きているのを、HTMLなどのデザインでも見かけることがあります。
気をつけていきたいです。




余談になりますが、このテキスト内で何度かアーキテクチャという言葉を使いました。
建築におけるアーキテクチャはどこにあるのか、ということに興味があるのですこし掘り下げます。
アーキテクチャという言葉を文章で考えてみます。

軽やかで心地よい建築空間をデザインする。(建築空間=アーキテクチャ
軽やかで心地よい建築空間をデザインするために、定義やシステムを考える。(定義やシステム=アーキテクチャ

前者であっても、コンセプトを考えている時点で、後者と同じでは無いかと答える人もいるかと思います。

問題はそこではなくて、最終的に自分でGoサインを出す基準として、できる建築空間と、つくるための定義やシステムのどちらを重視するのかということになります。

狭義でのアーキテクチャ、広義でのアーキテクチャ、どちらも間違ってはいません。

個人的には、後者の意味でのアーキテクチャの設計をしていきたいと思います、ということで、前半に書いた気持ち悪いUXを生む階層構造の話を、今日はしてきました。




さらに余談になりますが、ローレンス・レッシグによる4種の縛り、
われわれの社会において、人のふるまいに影響を及ぼすものには、(1)法、(2)規範、(3)市場、(4)アーキテクチャ(またはコード)という4種類がある、
というテキストを思い出しました。
こちらでは、完全に後者の意味(定義やシステム=アーキテクチャ、ここではルールといったほうがわかりやすい)ですね。

Remove all ads

リアルなVRができたあとには…

VR(バーチャルリアリティ、仮想現実)が、とてもリアルになったときに、
そのときにそれがリアルになるのか仮想現実=現実のレベルに達するかなど、
いろいろな議論があるが、今現在の仮想現実について、稲見昌彦が面白い例を挙げていた。

Remove all ads

3D CGのレンダリング時間、「STAND BY ME ドラえもん」

Blenderで約4秒間(125フレーム)のCGアニメーションを制作しました。
レンダリングが、1280ピクセル x 720ピクセルのサイズで、30時間かかりました。

その待ち時間の間に、山崎貴が監督したCG映画「STAND BY ME ドラえもん」のレンダリングがどんなものかと調べてみたのでまとめておきます。


3DCG映画『STAND BY ME ドラえもん』制作秘話 - スタッフが追求した徹底的な「リアル」とは (1) 1年半以上かけてキャラクターやひみつ道具を3D化 | マイナビニュース

【特集】【本日公開】映画『STAND BY ME ドラえもん』制作の舞台裏 ~『ドラえもん』がフル3D CGに - PC Watch

ASCII.jp:えっ、指紋つきのドラえもん!? 3DCGに込められた「質感」へのこだわり (1/3)

しばらく引用が続きます。
引用はあまり良くない(引用とわかるようにしているのでコピペとして怒られることはないのかなと思います)のですが、
インターネット上の情報は、記事が(場合によっては掲載メディアごと)消されて消えてしまったり、URLが使えなくなってしまったりと、情報が保存されないことがあるので、今回は引用というかたちにします。

制作期間は、企画から4年、実作業で3年半。そのうち制作の準備段階で1年半もかけている。この準備をしっかり行うのが白組の制作スタイルだ。映像を制作する行程について、八木氏が教えてくれた。
マイナビニュースより)
(補足 : 八木氏とは、山崎とともに監督した八木竜一)

リアルさを表現するにあたって、質感の表現にも新しい技法が取り入れられている。「サブサーフェイス・スキャタリング」と呼ばれる、光が皮膚などの表面を透過して、内側が透けて見える様子を再現する技法が、ひみつ道具や、キャラクターたちの肌にふんだんに使われている。未来のひみつ道具はより未来的に、キャラクターは生身を感じさせるような暖かみのあるリアルな質感となった。

とはいえ、サブサーフェイス・スキャタリングは負荷のかかる処理でもある。レンダリング環境はメモリを32GB以上に統一していたが、複雑なシーンでは、1枚の絵をレンダリング(計算)するのに、6時間かかることもあったのだそう(映画は95分あり、12万枚以上の画像が必要)。

それ以外の一般的なシーンでも、1枚あたり1時間かかるのは当たり前。リアルなキャラクターやひみつ道具が完成した裏には、質感にこだわり抜いたスタッフの職人魂があったのだ。
マイナビニュースより)

一般的なシーンを描くのに用意したポリゴンデータは、背景データとキャラクターデータを合わせて4,000万ポリゴン前後。
ちなみにキャラクターをレンダリングする際にも、こうした背景データからの陰影や映り込みの影響が計算されている。
ドラえもん」で29万ポリゴン前後、のび太で86万ポリゴン前後という
マイナビニュースより)

空き地のシーンは、空き地部分だけで約1400万ポリゴン、周辺にある塀や民家を合わせて約3500万ポリゴンで構成されている。
使用している3DCGソフトはオートデスクの「3ds Max」
マイナビニュースより)

実際の映像制作に使われたデルのワークステーション「Precision T7600」。
スペックはCPUがIntel Xeon E5-2665(2.40GHz)、メモリが64GB、ストレージが500GB SATA3 HDD、OSがWindows 7 Professional 64bit
マイナビニュースより)

ここまでマイナビニュース

「各シーンでは、まずキャラクターの骨組みのような単純なモデルを用いて、動きなどを作り込んで行きます。それから最終的にレンダリングを行なう段階で実際のモデルと差し替えていくんです」と説明する。

実際のモデルと差し替えた後、いよいよレンダリングが始まるわけだが、白組では数百台のマシンを用いて、CPUでレンダリングを行なっているという。レンダリングにかかる時間は、今回の『ドラえもん』ではまだすべては計測していないそうだが、鈴木氏によれば「前回の『friends もののけ島のナキ』では1フレームあたり約12分を想定して制作していました。『ドラえもん』では1枚あたり1時間なんというのはよくありますよ。タイムマシンが手前に迫ってくるような、非常に重いシーンでは、1フレームあたり6時間かかりましたね」という。
PC Watchより)

『STAND BY ME ドラえもん』の制作には、デルのワークステーション「Precision T7600」が6台利用された。導入期間は2012年11月から2013年の2月。主な仕様としては、CPUにXeon E5-2665(Sandy Bridge-EP/8コア/2.6GHz/L3キャッシュ20MB)、メモリ64GB、500GB HDD(7,200rpm)、OSにWindows 7 Professional(64bit)などを搭載している。

鈴木氏は、「当初はPrecision T5500を利用していたんですが、制作の中でスペックを強化していきました。最終的に合成のチームはPrecision T7600を、レンダリングには同じくデルのOptiPlexシリーズを多数利用しました」と説明する。
PC Watchより)

ここまでPC Watch

白組 CGスーパーバイザーの鈴木健之氏「キャラクターの計算をするにも背景データがちゃんとなくちゃいけないんです。たとえば、空き地の中だけで1400万ポリゴン。外の民家とかも3500万ポリゴン。リアルタイムでは開けないですね。計算して初めて絵がわかる。ちなみにキャラクターで言うと、ドラえもんが29万ポリゴン、のび太が86万ポリゴン。一般的なシーンで、4000万ポリゴンぐらいです。データは最終的にレンダリングサーバーに全部集約されるんですが、普通のマシンでは耐えられないですね。ピーク時は数100フレームと計算したものが1週間帰ってこない。失敗すると大変です、全部撮りなおさなきゃいけないので(笑)」
アスキーより)

ここまでアスキー


引用終わります。




これらの記事より、レンダリングについての情報をまとめると、

「STAND BY ME ドラえもん」は、1時間30分程度。
フレームに換算すると、約12万フレーム

1フレームに10枚程度の画像を合成する。
そのため、12万フレームを作るためには、
約120万枚のレンダリング画像が必要

1枚のレンダリング画像を
レンダリングするのにかかる時間は1時間から最大6時間

記事によると、
PCはレンダリング用のマシンは200〜250台。


これらから、概算すると、
200台のPCで、120万枚のレンダリングをする、1枚あたり1時間かかるとする。

120万枚 ÷ 200台 = 6000枚/台

6000枚を処理するのは6000時間なので、
1日24時間に換算すると、250日

つまり、失敗することや、負荷が大きいカット、長い尺など、
また人間の労働時間を無視しての概算になりますが、レンダリングだけでほぼ1年かかっている。


レンダリングにとりかかる前に、3Dモデリング、テクスチャの構築、
アニメーションにするための骨やカメラのコントロールなどの作業がある。



ちょっと考えてみるだけでとても恐ろしい作業です。。。

3D CGは札束で殴りあうしかないという例えを聞くことがありますが、
レンダリングの処理を軽くする工夫も絶対必要ですが、
最後はマシンの人海戦術になるのだろうなと思いました。

Remove all ads

html+CSSと、Adobe illustrator。パラメトリックと非パラメトリック

最近、htmlとCSSを弄ることと、Adobe Illustratorで作業することを並行して行なっていた。
その中で、Illustratorの不便さのようなものを少し感じた。


それは、CADで語られるパラメトリックと非パラメトリックに少し似ているのかと思う。


htmlの方では、htmlの方に必要なテキストを記述し、別ファイルに装飾のためのCSSを書いた。
その為、テキストの変更はhtmlで、デザインの変更はCSSでというかたちにになっている。
1つのCSSをそれぞれのhtmlで読むようにしたので、トップのページやその下の階層のページのデザインは一括で管理出来る。
この状態から、デザインを変更したい(文字のフォントや色を変えたい、背景を変えたい、配置を変えたいetc)場合は、1つのCSSを弄れば済む。


Illustratorの方では、似たようなフォーマットを複数ページ作ろうとした。
page01.aiのデザインを修正すると、page02.ai、page03.ai、、、pageN.aiまでのN個のファイルを修正するはめになった。
1つのファイルのパラメータを他ファイルにもまとめて適応されてくれよ、と思った。
(1つのファイル内で複数のページを作ってレイヤーなりで管理しながら、⌘Aでどうにかすれば良いのかもしれないけど)
(ちゃんと調べれば、何か方法があったのかもしれないのですいません知識不足です。)


ここでの作業の違いは、パラメトリックデザインと非パラメトリックデザインの違いに似ている(のかなと思った)。
もにょもにょしたものをパラメトリックデザインと呼ぶような風潮もあるが、ここでは履歴やパラメータを保持してデザインしていくものの意とする。


パラメトリックデザインでは、適当なパラメータをあてて、関係性をどんどん決めていくことができる。そしてある程度出来た後にパラメータを調整して、デザインを変える修正することができる。
パラメトリックデザイン(ダイレクトモデリングとも呼ばれる)では、ヒストリーとして何かが残っているわけではないので、あとで前の段階で作ったものを修正ということは基本的に出来ない。


パラメトリックの機能が必要なのは、試作を繰り返す際の作業効率を大事にするような製造業というイメージがあるが、そうでない環境でも付いているとても便利だ。
(製造業向けのソフトウェア、SOLIDWORKS、Inventorなどには必ずついているはずだ)


htmlとCSSでは、CSSの方で、でごにょごにょ関係性を記述しているので、パラメトリックデザインのように、CSSを触ることでパラメータだけを後でいくらでも変えることができるし、関係性を決めたCSSを読み込んであげれば、読み込んでいるhtmlファイルをまとめてデザインが変更できる。
逆に、illustratorでは、オブジェクトが違えば色の塗り替えや、フォントの変更ができるが、ヒストリーをいじることはできない(非パラメトリック的)。おのおののオブジェクトを変更することはできるが、複数ファイル、複数オブジェクト、複数ページにまたがるものはまとめて変更できない(ちゃんとやればできるかも)。


パラメトリックデザインと非パラメトリックデザイン、もしくは、ヒストリーかダイレクトと二項対立的に語られるが、僕の個人的な感想は、前者の方が圧倒的に便利で、非パラメトリックな環境はあまり使いたくないなと思った。


自分のPCには入っているソフトで言えば、Rhinocerosでは、ヒストリーをつかわずにも(一応あるがデフォルトの設定でオフになっている)、grasshopperによりパラメトリックが可能となっている。
また、Autodesk Fusion360は、基本は無料のソフト(有料ユーザーでも安い)であるが、ヒストリーが付いているのでパラメトリックデザインが可能だ。


しかし、平面へのデザイン、グラフィックデザインの標準ツールとなっている、illustratorでは、積極的にパラメトリックを使えるわけではない。
また、スクリプトという機能もあるのだが、それは、便利な拡張機能を作るということが多いようだ。
illustratorパラメトリックを持っていないので、僕はカッティング用のデータなどであればRhino+grasshopperで作り、.aiで書き出すことが多い。


グラフィックを作るのであれば、processingやopenFrameworksで、自分でコードを書くのでパラメータをいじれるようにつくることができる。
illustratorに耐えれなくなったらパソコンがもっとできるようになったら、illustratorから離れ、別の環境で制作するようになるのかなと思った。
(後で修正する必要がないようなすごく簡単なものであれば、ヒストリーはいらないので、illustratorや、wordでサクッと作れば済むのだけど)


ちなみに、自分の周りで多くの人が使っている、ヴェクターワークスではヒストリーが基本的にないが、シンボル等の機能があり、部分的にパラメトリックデザインのように使えるようだった。


いろいろ書き出してみると、grasshopperやFusion360のようなパラメトリックデザインが可能な環境はとても優れているなと改めて感じた。
そして、illustratorで不便な思いをしまくてもいいように、コードを書ける力をつけたいと思った。

Remove all ads