流行のWebGLさわってみました!

nakashima | 2012.2.5

初ポストです。中島賢志郎と申しますー!
去年の9月頃から、developerで勤務しております。
現在24歳、精一杯努めていくので、宜しくお願いします!

あけましておめでとうございます!、、というのは遅いですが、
いつブログを書くか迷っていて、こんなタイミングになってしましました、、。

というのも、

書くネタをつくりたい!という思いがあるものの、
何にしようかな?がズルズルと、、、そして、現在に至る次第です。
(一時は、ランチブログ的な案があったのですが、それはまたいつかの時に!)


そして、本題です。
タイトルにある通り、流行のWebGLを触ってみたので、レポートです。

まずは、今回の成果を!
http://www.birdman.ne.jp/works/nakashima/webgltest1/
(※動作はchromeしか確認してませんー)

見れる方はゆるーいキャラクターが表示されたと思います!
それでは、当初何の知識もない自分が、ここまでに辿り着く経緯を、順を追って。

———————————————————————————————————-
1. WebGLって何?
———————————————————————————————————-

最近Chromeで動くコンテンツの中にこれどうやってるんだ?的なコンテンツがあると思います。
すごいヤツだとこれとか。
そこに使われているのがWebGLという話題の3D描画技術です。
WebGLはwebkit系で実験的に実装してるらしいのですが、GPUを使えるのでこんな高速らしいです。
仕組みとしては、OpenGL ES 2.0をjavascriptで動かして、HTML5で実装するcanvasタグを使って描画する、といったものです。

ここまでは、あいた時間を使ってちょこちょこ調べてました。

———————————————————————————————————-
2. とりあえず作る。
———————————————————————————————————-

誰かがやってるなら自分もできる!ということで、早速サンプルを探す旅に。
結構サンプルはあるのですが、どうにも記述が統一されておらず、
結局は一から書きはじめ、ちょこちょこ改造していった感じです。
(※途中、有方さんに助けを求めました!感謝です!)

そして、はじめにできたのはコチラ

頂点座標バッファ → テスクチャバッファ → シェーダーひもづけ → レンダリング といった流れでJSを書いてます。
自分はOpenGLを触ったことがなかったのでシェーダー部分に一番時間かかりました、、。

———————————————————————————————————-
3. 立方体とか球じゃ物足りないです。
———————————————————————————————————-

ここまでは動いた事に満足していましたが、やはり自分で作った何かを動かしたい欲は出てきます。
そこで、ローポリのモデルを作成することに。できたのが、あのゆるキャラです。

モデリングはlight waveで、さくっと終わらせました!!
と言いたい所ですが、、、metasequoiaしか触ったことなかったので、こちらも調べながら作りました、、。
(※途中、有方さんと荒川さんに助けてもらいました。ありがとうございます!)

モデルの完成後はobjに書き出して、頂点データを抜き取って表示。問題なく成功です。

———————————————————————————————————-
4. 顔を書きたい。
———————————————————————————————————-

モデルをつくったものの、単色だったのでテスクチャをはって顔を書くことに。
前回同様、UVマップをつくりobjで吐き出し、出力。
ここで問題発生でした。
うまく貼れないという現象ならばよかったのですが、モデル自体も表示されない状態に。

急遽PHPをかえしてパース済みのJSを出力する方法にし、試行錯誤に数日間。

最終的には、
・light waveからmetasequoiaに読み出してobj出力
・頂点とテクスチャデータが前と違うものは頂点を複製
といった形で対応しました。

———————————————————————————————————-
5. ちょっとズレてる。
———————————————————————————————————-

ここまでで一通りできたと思うのですが、
最初にお見せしたものをよーく見ると、耳の裏に黒のラインが入っていたり、
まだまだ完璧とはいかないようです。

更にシェーダーも、単純にテクスチャを張っているだけなので、光源や影を入れないと!
課題は山済みですが、、、以上です!


次回はこのゆるキャラに、リッチな表現・機能を実装してみたいなと思っていますー。
ではではー!

中島

The Art of Birdman 07

Tanaka | 2012.1.11


デザイナーの田中です。
本年もよろしくお願いいたします!

今回は毎年恒例となっている年賀状イラストについてです。


一昨年の寅年から干支をモチーフにしたキャラクターが登場しており、
今年は当然、辰年の「龍(レディ・ドラゴン)」です。
昨年は卯年の「ミス・バニー」というウサギの女性キャラだったのですが、
諸事情で今回も女性キャラになりました。

いわゆるヒロイン的な金髪美女をイメージしたバニーに対し、
攻撃的でセクシーな悪女、といったイメージでデザインしました。
素顔やスーツの全貌など、詳細は今後明らかにできると良いなと思っています。
(↓下の画像はボツになったラフ案です。)


なお、、世間ではもう過ぎてしまった卯年ですが、
バードマンの世界ではまだ終わっていませんので、お楽しみに。。

今回はここまで。
以上、田中でした。

あけましておめでとうございます。

tamayama | 2012.1.4


明けましておめでとうございます。

初めまして、去年の9月からフラッシャーとして入社しましたタマヤマと申します。
よろしくお願いします。


さてさて2012年、皆様はどうお過ごしでしょうか。
昨年はいろいろな事があり激動の一年だった方も多いかと思います。

ぼくも個人的に上京していろいろ大変でしたがなんとか頑張っています。

去年の反省は置いといて今年の目標を書いておきます。

・禁煙(年内中に)
・節約(頑張って弁当をつくる)

とりあえず弁当箱買います!


FITCに行って来ました。

shin | 2011.12.9

入社3ヶ月目のフラッシャー、シンです。
初めてのポスト、よろしくお願いします!

FITCが12月3日、4日に開かれました。
僕は1日目は行けなくて、2日目に行って参りました。
そのなかで、一番印象に残ったGMUNKの「TRON+GMUNK+YOU」セッションについての話をさせていただきたいと思います。
GMUNKは2000年前半くらいに3Dグラフィックデザインのサイトを通じて知りました。
ちなみに、今回のセッションでGMUNKを見る前まではこの人がGMUNKだと思ってましたが、、


実はこの人でした。。。

セッションの内容としては、映画「TRON」のホログラフィック作品の紹介でした。
映画の関係者がGMUNKのサイトに公開されている作品を見て連絡したのがきっかけで、
5人のチームを構成して作業を始めることになったそうです。
この日GMUNKが強調したのは作業に入る前に資料を集めることでした。
当然のことだと思いますけど、時間の問題とかいろいろあって、なかなかできないですよね。
資料を集めることによって、今まで知らなかった情報も得られるしアイデアも出てきます。
GMUNKチームが資料を集めることからスタートして完成した作品をいくつか紹介してくれました。

・TRON Disc Game

・TRON Fireworks

・TRON Throne Room

・TRON Solar Sailor

・TRON Opening Titles

結論としては、「作ったものは公開しよう!」とのことでした。
公開することによってスキルアップもできるし、色んな仕事に繋がるきっかけもなるので、
「作ったものは公開しよう!」の結論でした。
僕もこんなもの作ったけど、恥ずかしいからとかこれよりもっとすごいものがいっぱいあるからの理由で公開してなかったものがいくつかあります。
このセッションを通じてそれが間違っていたことに改めて気づきました。
自分の成長と繋がることなので、今からでも何かを作ったら公開するようにします。

私の頭の中のサムシング #011

Hoshikawa | 2011.12.2

ごきげんY’all? ADホシカワです。

すっかり寒い季節になりましたが、みなさんいかがお過ごしでしょうか?
これといったお過ごしをされていない方、

「人生はちょっとした工夫で楽しくなります」(??)

最近いろいろと便利でオモロな世の中になってきまして
身近なデジタル機器で人生がとても楽しいものに変わりそうな気配プンプンプンプンプーンです♪


まずはこちら。


/// MadPad “Remix Your Life”






「Remix Your Life」とはまさに的を射たコピーがついておりまして
これで普段の生活のひとコマをサンプリングして、即興でビートメーキングです。
やってることは昔からあるMPCみたいな感じではあるのですが、
何が新しいかというと、映像と一緒に簡単にネタサンプリング&プレイできること。
ありふれた日常をリミックスして、それに合わせてみんなでワイワイです。

「いやぁ~、、、、TGRっ!あっ、手軽っ!」

「これでオレも簡単にHIFANAになれる!」

ってのは大きな間違い。。。



——————————————————————————–


人生を手軽に豊かにするツールつながりで
スウェーデンのヨーテボリ(ストックホルムに次ぐ第5の都市)市内を走る
路面電車「トラム」が提供したサービスのお話。


ヨーテボリはとても綺麗な街で観光客がとても多い街のひとつ。
観光ツアーも多くくまれ、その多くはガイドさん付き添いの観光バス、
ボートツアーなど結構お値段の張るモノが大半とのこと。

一方、観光客の多さとは裏腹に、一向に利用者数が増えない公共機関路面電車「トラム」。
そこで考え出されたのが【ガイドつき観光アプリ(無料)】。
GPS機能もついていて、行きたい場所へ音声付きで案内(誘導)してくれます。
移動はもちろん、安価な路面電車「トラム」で決まり。
(どのバス停の何番線に乗ればイイかまでガイドしてくれます。)





こういうサービスってあれば便利だけど意外とないなぁ、、、的な地味な存在ですが
きちんと作れば、年齢を問わずとても利用価値(ニーズ)の高い
サービスになるのだなぁと再認識しました。
利用者を増やすために、新たな価値を生み出す(ツールを提供する)という手法において
とても綺麗なシナジー効果が生まれた秀逸な施策のひとつではないかと思います。


——————————————————————————–


「あぁ、、、便利な世の中になったなぁ」と安心できるのも束の間death。



世の中そんなにうまくできていませんでした。


人生を便利で豊かにしてくれるツールに満ちあふれた世の中。


便利を手にした代償は、思いのほか大きかったりもするわけでして、、、


気がつけばいつなんどきハメをはずすかわからない忘年会シーズン。


ハメ外しモード全開のあなた、





「SNSの発達により、夜遊びは命がけになりました。」





うっかりfacebookにタグづけされてしまっては、まさに「あとのカーニバル」。
パーリーナイに強い味方を見つけましたので、酒のお供にいかがでしょうか??

/// PHOTOBLOCKER by Notre Beer






紹介ムービーの中のコピーがうけます。。。「Night time is very dangerous」







ってかデカ杉っ!






はじめましてです。

abe | 2011.11.22

10月よりデザイナーとしてBIRDMANに
仲間入りしました、阿部と申します。

何卒宜しくお願いします。


さて、突然ですが自分には世に出回っているような人に読ませる
BLOGを書く文才はなく(『さて、突然ですが』と切り出してる時点で察しはつくと思いますが‥)
本来であればこの場を借りてWebの最新事情なんかを伝えていければなと思ってた
のですが、そういった内容に関しては当ブログの他の筆者に更なる猛者がいそうなので
内容被りを恐れ、もっちょっとアナログなデザインやカルチャーの記事を書いていけたらな、
と思っております。


という訳で、第一回目の記事は「TAKEO PAPER SHOW 2011 × PASS THE BATON」
です。知人がオーガナイーザーをしてる事もあり昼休みを使い表参道のPASS THE BATON
に行ってきました。



————————-
TAKEO PAPER SHOW 2011「本」は、「本」の可能性をめぐってさまざまな形でアプローチを試みまし
た。その関連イベントとしてPASS THE BATONでは、これらの本の販売を通して「本」の交換価値を探ります。

TAKEO PAPER SHOW 2011「本」に参加された78名の識者の方々から

「読まなかった本」「恥ずかしい本」「売りたい本」

以上の「本」をお預かりして、PASS THE BATON LITTLE PAVILIONにてご紹介(展示販売)します。

―ご出品いただいた皆様―
後藤繁雄、佐藤可士和、杉本博司、鈴木芳雄、津村耕祐、遠山正道、橋本麻里、松本弦人、柳本浩市

(50音順、敬称略
(上記抜粋)

————————-


自分はBIRDMANにてWebデザイナーというポジションで仕事をさせて頂いてるのですが、
Webデザイナーでもアイデアに困った時はネットから情報を集めるのではなく本屋に足を運ぶと
思います。自分はいつもそうしてます。
歩いて本屋に行って、本棚を見て回ってもちろん大体は自分が当初必要としていなかった情報なんです
が、その必要としてない情報、棚に置いてある本のレイアウトすらデザインの助けになってくれます。
またキーボードではなく実際本に触り、ページをめくる。
こういったフィジカルな動作がアイデアのきっかけになることもあると思います。


という訳で自分は本が大好きです。

将来本屋になります。嘘です(笑)


確かに紙媒体は今転換期を迎えているのかもしれません。
しかし「TAKEO PAPER SHOW 2011」に行き本が新たな価値を見出そうしてる
瞬間を感じる事ができました。

Experience Human Flight

tomoya | 2011.11.21

フラッシャーのともやです。

筆が乾かないうちにもうひとつ…
まるで舞空術! と云われていたムービーです。



スカイダイビングをハイスピードカメラで撮影したって書いてありましたが
2,3カット目なんてまさに舞空術!


高みからみる景色は格別なのだろうなぁ  という感じで、
Flying Ever Higher なヤツでした。

National Geographic Photo Contest 2011

tomoya | 2011.11.21

フラッシャーのともやです。

National Geographic Photo Contest 2011 の応募作品がピックアップされているサイトがありました。
どれもこれも半端なく美しくて心が揺さぶられたので、無精な筆が走ります。

National Geographic Photo Contest 2011

National Geographic Photo Contest 2011 – Alan Taylor – In Focus – The Atlantic
National Geographic Photo Contest 2011 – The Big Picture – Boston.com

メテオみたいなボルケーノ写真とかトルネードのパワーとか、自然の脅威的フォト、
あとサメのやつとか、身震いして印象的ですが
(サメは襲ってこないとはいうものの、これを見ると潜るのを躊躇してしまう…)
やっぱ人物ものが好きだなぁと思いました。
けどイケメンなオオヤマネコも捨てがたいですね。さぞモテそうですね。

ここのとこ写真を撮ってないので、そちらの無精もなんとかすべく、
自戒の念をこめてのエントリーでした。


関係ないですが、この写真。



本日誕生日のビョークさん(45)のご自宅だそうで。立地も孤高ですこと!

誰と寝た?

ito | 2011.11.18

はじめまして。プランナーの伊東です。

11月からBIRDMANの一員になりました。


で、そろそろブログ書きやがれこの青二才がっ!と罵られたので泣きながら書いてます。


でもブログって大事ですよね。

SNSがどんなにもて囃されてる昨今でも未だ廃れることのない価値ある情報発信メディアですからね。

書き手によってはその影響力も抜群で自分をママ映す鏡にもなって。

相当センスも問われるし、自分がイケてない人間だってバレちゃうから極力避けてきたのだけど…。


国内に限らず海外も含めた事例紹介を記事にするブロガーさんはたくさんいらっしゃるので、

僕は日常的なしょうもないことを綴っていけたらと思います。



第一回目はネタ作りってことで。



プランナーにとって企画のネタを生み出しやすい環境や動作って人それぞれ色々あると思うんです。


あばれはっちゃくでいう、ブリッジしたり逆立ちしたりして「ひらめけーひらめけー」みたいな。

ある人は会議室で集中したり、またある人はカフェに行ったり、企画はトイレの中でっていう人もいるかも知れない。


僕の場合のそれは、とにかく散歩。会社を飛び出して歩き回る。


すると何か、色々整理できたり、それまで捕われていた固定観念がスッと抜けて発想が自由になる瞬間があって。見ていた光景が急に晴れて変わるみたいな。あの瞬間がいいですよね。


それと企画するとき心掛けてることは、PCの前で作業しないってことですね。


それやっちゃうと事例やデータベースをモロに参考にしちゃって何かと似通ったパクリっぽい企画にしかならないんですよね。


だからPCを閉じてペンと白紙に言葉を書きなぐる。


コレいいです。ノートじゃなくて白紙。チラシの裏とかでもいいです。

個人的にペンはぺんてる社のサインペンが最高です。


以前は思い浮かんだものをevernoteに書き込んだり、デバイスにメモとして残してたりしてたのですが、改めて読み返した時にどうしてそういう発想に至ったのかとか、イマイチなんですよね。


そういえばイマドキの大学生って講義の内容をノートに書き留めず写メるんですって。

リアルタイムの講義は集中して聴いて、後で写メを見返すんだとか。

ケータイの発達は受講のスタイルまで変えちゃうんですね。器用な人には便利そうだけど、いかに代返してもらうかを突き詰めてた僕には到底ムリ。。。


そんな僕にとって、やっぱり手書きに勝るものはなし!ってことです。



あとは普段から色んな人と会う、話す。結局のところ、コレが一番最強なのではないでしょうか?


僕の知り合いで異業種からエージェンシーに転職した人間がいるんですけど、まず上司から貯金額を訊かれたそうです。


んで、


「その貯金、全て叩いて人と会って飲みまくれ」と。。。


業界のこと、右も左もわからなかった彼は本当にそれをやってのけたそうです。

考えてみると彼の実行力もその助言をした上司も何てセンスのある人たちなんだろうと。

今や彼は人脈や知識を兼ね揃えた第一線のクリエーターです。


まあ、この例は極端だけど、広告人は自分を高めるために色んな刺激を受けなきゃいけない。


人と会うのが刺激って、言葉としては当たり前のコトだけどビジネスやスキルに活かすには意識的にやらないと中々出来ないんですよね、コレが。


僕もそれに気付いてからは、例えば広告系の集まりとかパーティとか、誰も知っている人が居ない場所でも思い切って行くように心掛けました。


本当はめちゃくちゃ内気なのですが。。。


でも行ったら行ったで、自分を知ってもらわなきゃいけないから、自然にジブンプレゼン力も身につけることが出来るんですよねー。


後になって感じたんですけど、プレゼンが苦手だったかつての自分がプレゼン好きになったのも、そういうのがきっかけだったのかも知れません。



という点で、色んな人と出会って話をするのはとっても重要なコトなんです。



人脈の拡がりや企画のネタ作りのために(もちろんそれだけではないけど)、色んな場所に色んなヒトに会いにいく。



まるで合コン。



自分なりのペースで自分を高められるネタをお持ち帰りしましょ。



我ながらくだらん。



BIRDMAN’S NESTのちょっと生々しいお金の話し

Rina | 2011.9.27

BIRDMANは少数精鋭15名でずっとやっていくつもりでしたが
築地さんの6月のブログにあるように
もっともっと高く飛ぶため
業務拡大へと作戦変更することになりました。

実は今年の春位から水面下で色々動いていました。
採用面接もしかりです。
沢山の素晴らしい方に出会うことが出来ました。

そして、これまでお仕事をしていたBIRDMAN’S NESTは
最大15名ほどしか働くことができないため
このたび貸出すことになりました!
まだ賃貸に出して2日ほどですが、続々と内覧のご連絡を頂いています。
※テナントさん決まりました

http://www.realtokyoestate.co.jp/estate.php?n=7908
http://www.tokyorealoffice.jp/estate.php?n=1391


そして・・・新たなNEST(巣)を探さなければなりません。

5年前、中野坂上のSOHOオフィスから原宿近辺に物件を探し始めた時
賃貸で探しましたが、希望の広さを借りるためには、
月60万~80万ほどかかることが分かり、シュミレーションして
購入へと切り替えた経緯があります。

2010年7月のブログにもありますが、BIRDMAN’S NESTは
2007年に中古の戸建てを購入し2008年に建て替えをしました。
すーーっごいぶっちゃけますが、月々ローンは23万円です。
この金額でこのクオリティの建物を近辺で貸りることは不可能です。
出ているキャッシュを考えると実は賃貸より全然少ないのです。
また、オフィス代として出ているキャッシュが少ないので
早期返済をしていた為、あと3年ほどでローン完済の予定です。

そのため次のNESTを探すにあたっても、賃貸は毛頭頭にありませんでした。
そんな中で、BIRDMAN’S NESTすぐお隣のアパレル会社のビルが、
4月位から人の出入りがなくなっていたので
不動産屋さんに、持ち主に売る意志があるか交渉してもらったところ、
なんとっっっ!!売ってくれることが判明したのです!!!!!

ちなみにお隣ビルのローンは月々56万円です。
でもBIRDMAN’S NESTを60万円ほどで貸し出せそうですので、
お隣分のローンはチャラになります。
ですので広さは3倍以上になったのに、出るキャッシュはこれまでと同じという
ミラクルが起こります!
どうですか。買った方が得だと思いませんか。。。
なんかどこかの勧誘みたいになってきました。。。。。

とても生々しいお金のお話しですが
また新たに建物を購入したと言うと
BIRDMAN儲けてるな~!と言われそうでしたので、
そういう訳ではないんですと、あえて全部洗いざらい書きました。

新しい建物はこちらです!車も3台ほど停められます!
BIRDMAN’S NESTに比べるとデザイン性は全くありませんが….
1年程はこのまま使用し、その後またトリノス大友さんに
かっこよーーーくBIRDMAN色に改装してもらおうと思っています!



BIRDMANは本当に生き物です。
これから新しい血も巡りもっともっと高みを目指し変化し続けます!
全てはクオリティの向上のため。

今後ともBIRDMANを宜しくお願いいたします!