投稿者のアーカイブ

HTML5+Three.jsで3Dプログラミングに挑戦!

2012 年 2 月 1 日 水曜日 正宗

丸坊主なのに寝癖が付く男、正宗です。前回の記事「Actionscript3erが覚えるJavascriptでのクラス開発まとめ」でjavascriptをActionscript3ライクに書く方法をまとめてみたので、今度は練習がてらHTML5をさわってみました。

WebGL版です。

クリックで別ウインドウで開きます。

クリックで別ウインドウで開きます。


画像クリックすると別ウインドウで開きます。
うまく動かない場合はWebGLを使わない素のCanvasレンダリングも作ってみましたのでこちらのリンク先を参照してください。
スクロールで3D空間をうねうね動く的なことがやりたいんだろうな、って思ってもらえたらうれしいです。ちなみに背景には旅行の思い出の写真をあしらって、ナイスな感じに仕上げました。
ソースは適当にほじくって見てみてください。

今回は、はじめてHTML5を触ってみた中でわかったことを書きたいと思います。
(続きを読む...)

Actionscript3erが覚えるJavascriptでのクラス開発まとめ

2012 年 1 月 29 日 日曜日 正宗

カレーうどんが好きです。今日のお昼はカレーうどんでした。正宗です。
今日はJavascriptでクラス開発をしてみたいと思います。
冒頭のカレーうどんは関係ないですね。何かいわなきゃと思ってつい好物を出してみました。
ご存じのとおり、Actionscriptはもともとバージョン1の頃はJavascriptとほぼ同じ言語であり、つまりAS1の頃のクラス開発がそのまま使える形となっています。

そこでJavascriptでクラスを作ったりするときに「あれ?ASだとこうやるやり方、JSだとどうやるんだっけ」ってのを減らせるように、完全に個人的な備忘録を作ってみました。自己流なうえにオレオレ規約ばっかりで恥ずかしい限りですがせっかく作って公開したのでなんらかのお役にたてばうれしいです。

Javascriptでのクラスの作り方は本当にたくさんの方法がありますが、その中で僕が一番馴染んでいる書き方だけを勝手に選んでのせています。
さっきふと思い立ってやった方法をそのままばんばんのせている感じです。
あと、JSとの類似性を浮き上がらせるためにASにはあえて型を宣言しないで書いています。
ASやJSの綺麗なコードの書き方ではなく、あくまでもASに似せたやり方でJSを書いていく方法を探った記事ですのでご了承ください。
あと、技術書でも何でもなくあくまで個人の備忘録ですので恥ずかしながら盛大に間違えている箇所がたくさんあるかと思います。その場合間違いは常に正していきたいのでご指摘頂けると大変嬉しいです。
ほんと僕のブログ間違いもおおいんで前置きも長々となってしまってすいません。
(続きを読む...)

ActionScriptとJavaScriptとの連携をまとめてみる

2011 年 10 月 23 日 日曜日 正宗

普段の仕事で「あ、これはブログに書き留めておこう」と思ったことの半分以上は、仕事の忙しさを理由になかなか書くことが出来なくて、それだけにこうして休日の夜中でもちょっとでも時間に空きがあればブログを書けることがどんなに嬉しいか。
妻の高校の頃のジャージがやけに似合う男、正宗です。
今日は、ActionScript3のExternalInterfaceを使ってJavaScriptと連携する際の、普段から気をつけていることをまとめてみたいと思います。
サンプルのソースはこちら、githubに置いてみました。
(続きを読む...)

FlashのひよこがPixel Benderではじめる並列処理入門 後編

2011 年 9 月 6 日 火曜日 正宗

前編の続きです。
(続きを読む...)

FlashのひよこがPixel Benderではじめる並列処理入門 前編

2011 年 9 月 6 日 火曜日 正宗

最初ぼくPixelBenderのこと「pixel bLender」と勘違いしていました。
証拠
証拠その2
僕、得意げになって何か言ってますね…。終始間違いの多い男です。
僕たちの失敗。こんばんは。森田童子です。嘘です。正宗です。

さてさて、今さらながらPixelBenderについて勉強してみました。PixelBenderって登場したの確か3年以上も前ですよねえ。
普段から情報共有が 盛んなFlashにおいて、僕が今まで3年もPixelBenderを使っていなかった理由はひとえに「PixelBenderが何をするものなのかわかりにくい!」からでした。
PixelBenderを使うとどうなるのか、Flashのどんな場面で使えるのか、どうやって使うのか、いやいやそれ以前の問題でただひたすら「PixelBenderが何をするものなのかわかりにくい!」のでした。
もちろん、Adobeの告知不足とかそういった事が言いたいわけではなくて、僕のスペックではPixelBenderはわかりにくいからとっつきにくかった。というお話です。

で、勉強してみてわかった結果は、「PixelBender、かなり使える」ということです。
簡単に言うとFlashの処理能力が別次元で向上します。
おおげさですがおおげさでない表現として「Flashの処理速度という概念を無かったことに出来る」ほどのパフォーマンスです。
「別次元」とか「処理速度という考え方を無かったことに」というのは、太字にしたのは煽りでもなんでもなく実際に本当に処理方法が違うからです。これに関しても出来るだけ簡単に説明します。
いったんサンプルを見てください。

ウエブカメラがあれば接続の許可を求められると思いますので許可してください。
ウエブカメラがない、あっても許可しなかった場合は、僕が今年の夏にバラ園にいったときの思い出の写真がかわりに表示されることになると思うので、そういった悲しい事故がないよう、是非ともウエブカメラを使って遊んで頂くことを強くおすすめします。

マウスをうごかしてもらうとわかると思うんですが、昔からよくある、水面の波紋のような画像処理を効果に加えたサンプルです。
DisplacementMapFilterとかで手垢がつきまくっているので、アンテナの高い人には今さらなサンプルです。
ここで見て貰いたいのは、処理のほとんどをPixelBenderにまかせたことによる処理速度の安定です。

サンプルのソースコードはこちら。
https://github.com/masamunet/blog_samples_pixelbender_practice

ソースコードをみてもらってもわかるように、基本的に僕はなにもしていません。処理のほとんどを外部のPixelBenderファイルに頼っています。
具体的にはこちらのソースをほとんどの部分で使用しています。
僕がやったことと言えば、もともとDisplacementMapFilterで処理していた部分もShaderJobを用いてPixelBenderで行うように変更したくらいですが、そのPixelBenderもこちらの記事を参考にしてあります。
このように、PixelBenderの概念を一旦理解したら、あとは自分でオリジナルなPixelBender処理を書くもよし、海外にあるいろいろなPixelBenderのファイルを(ライセンスに従って)使いこなすも良し、いずれにせよ処理速度という表現の枷からかなり自由に解き放たれるPixelBenderは是非是非習得すべき楽しい技術だと思います。

ちなみにPixelBenderの習得にあたって参考にした本はこちら。

この本の第9章にPixelBenderについて書かれています。
だからこの本以上のことはこのブログに書かれていないのでこの本を読んだ方はあんまり期待できる記事ではないと思いますが、PixelBenderについて僕なりに理解したことをまとめてみました。

PixelBenderはそんなに敷居の高い技術ではないです。
実験レベルならすぐにはじめられて、効果は非常に高い(なにせ処理速度が別次元になるので)技術なので、ぜひともわかりやすく説明出来るようにまとめられたらと思います!
(続きを読む...)

地獄のミサワ風WEBカメラの実験

2011 年 9 月 3 日 土曜日 正宗

正宗です。
今日の飲み会用に作ったネタです。
Webカメラから顔を認識して自動的に中央に寄せる実験です。
まだまだ処理が甘いけれど一旦公開。

(続きを読む...)

釣りタイトル「HTML5 v.s. Flash」ついて。

2011 年 8 月 24 日 水曜日 正宗

僕はウエブサイト制作請け負いを生業としていまして、毎日いろんなウエブサイトを、大阪の隅っこの方で家内とたった二人でこしらえています。

一度でもお会いした方には、求められれば今まで制作した実績を、秘密保持の契約に問題ない範囲でお知らせしていますのでご存じの方も多いですが、ウエブサイト制作という目的に沿うためのありとあらゆる技術を駆使して業務に携わっており、その中でもとりわけFlashが大好きな、いわゆる業界の一部のみで使われるスラングであるところのFlasherという肩書きを好んで自称しております。

ここ数年でよく目にするようになった「HTML5 v.s. Flash」という言葉。
別に個人の話しレベルでは何も思うことはなかったのですが、特にここ最近は大手技術系ニュースブログでもたぶんアクセス数欲しさからやってることなのだとは思いますが釣りタイトルで使われるようになり、ちょっと個人的に看過できないのではないかと考えるようになってきました。

ニュースブログのやってることは、記事という名の広告掲載場所を作るためのいわゆる看板板の作成のお仕事なので、釣りタイトルで人目を引くことに関しては何も異論はありません。
何ズモードとか何デア何デアとか、けっこうかなりな大手ニュースブログで勝手に「もうFlashはいらない?」と煽られたFlashを、こよなく愛するいちユーザーが感じた、ちょっとした違和感を書きたいと思います。

(続きを読む...)

ひよこの会でやったトゥイーンの再利用

2011 年 6 月 29 日 水曜日 正宗

お父さんです。
先日行われた勉強会、ひよこの会で発表してきた「トゥイーンの再利用」についてまとめました。 僕自身、トゥイーンの再利用についてまだあまり有効な活用方法を見いだせておらず、いちおうずっと気になってた方法をまとめるだけの発表でしたが、仕事の時短術やクオリティアップにお役に立てれば幸いです。
(続きを読む...)

“Hello World!”;//出産のお知らせ

2011 年 6 月 15 日 水曜日 正宗

正宗です。
このブログはたぶん今までは仕事がらみの話しか書いたこと無いですが、夫婦で自営業として受託案件を請け負っている以上、お仕事でも多くの方のご協力を頂きましたのでここにご報告しておこうと思いました。

宇都宮家に第一子が誕生しました。
3274g 女の子 母子共に健康です!
(続きを読む...)

Flashで仮想現実を試してみる

2011 年 5 月 1 日 日曜日 正宗

21世紀もはや10分の一が過ぎ、世の中では拡張現実(AR)の研究や期待が高まっています。
そんな中で忘れ去られた感もある仮想現実(VR)の世界。
そう、かつてシュワちゃんとかが宮沢りえとTVCMに出ていたような時代にヴァーチャルリアリティと呼ばれもてはやされたあの技術。
そんな技術をいまさらながら試してみました、昭和の男、正宗です。

具体的には、WEBカメラをつなげていろいろ顔を動かしてみると中の3D空間も連動して動くというような奴です。ニンテンドーDSのアッタコレダっていうゲームをヒントに作ってみました。
さっそくみてみましょう。
(要FlashPlayer10)
(続きを読む...)