12/21に開催されたemscripten night !! #2という勉強会に参加して、 「Emscriptenを使ってブラウザ上でレイトレーシングする」というタイトルで10分間のLT発表を行いました。

こちらが発表資料です。

Read more


バレンタインデー(2016/02/14)にGPU の熱でチョコも溶けちゃう!? GLSL シェーダテクニック勉強会でレイマーチングについて発表してきました。

シェーダというニッチな分野にも関わらず、100人以上の参加者となる熱い勉強会でした。 無料なのに出席率が高く、参加者のモチベーションが高くて良いことだなと思いました。 WebGLの普及により、Web系のエンジニアもシェーダを触ることで、シェーダの注目度が上がってきたのを感じました!

当日の様子はtogetterまとめを参考にしてください。

私は「シェーダだけで世界を創る!three.jsによるレイマーチング」という発表をしました。

シェーダだけで世界を創る!three.jsによるレイマーチング from Sho Hosoda

Read more


coinsLT #0 で three.js についてのLTをしました。

three.js の紹介 from Sho Hosoda

Read more


はじめに

卒研で three.js という3DCGのライブラリを使って何か開発することしたので、JavaScript について勉強しました。

また、CoffeeScript という、コンパイルするとJavaScriptのコードに変換される言語についても使ってみることにしたので、 これについても勉強しました。

忘れてしまうと勿体無く思うので、備忘録です。

この記事では、

  1. JavaScriptを勉強する上で重要だと思われる概念
  2. CoffeScript の学び方
  3. Rails で CoffeeScript を使う時のメモ

を紹介します。

Read more


Twitter名刺ジェネレータを作るにあたって、 Canvas を使ったので、勉強になったことを適当にメモします。

関連記事

canvas#toDataURL() の注意点

canvas#toDataURL() の注意点なのですが、 一度でもクロスドメインで読み込んだファイルを描画した canvas に対して使うと、 Uncaught SecurityError: An attempt was made to break through the security policy of the user agent. というエラーがでます。

クロスドメインで取得したImageを引数にしても、context#drawImage()は成功するので、すこし気が付きにくいと思いました。

Chrome バージョン 29.0.1547.65 で確認しました。

Read more


最近、COJTという授業でWebGLとHTML5、JavaScriptなどを駆使して、3Dを使ったカバンの商品カタログのような物体を生成しています。 JavaScriptなどについて色々調べているので、有益そうなことをメモします。 とりあえず、動くようになったので、公開用のURLを晒しておきます。 COJT用の何か 実は、開発方法が色々とアレなのですが、ここでは深く言わないことにします。 JavaScriptそのものについて 私のようにクラスベースオブジェクト指向の言語から入った人間にとっては、 JavaScriptのプロトタイプベースオブジェクト指向はなかなか馴染みにくいものでした。 そういう人は、以下のサイトなどから、JavaScriptのOOPについて学習するのが良いと思います。 最強オブジェクト指向言語 JavaScript 再入門! slideshare JavaScriptでオブジェクト指向プログラミング @IT イーズ・アウト について COJT用の何かをみてもらえれば分かると思うのですが、棚の回転やパネルのポップアップの動きが 等速ではなく、動きの終わりに減速するようになっていると思います。 動きの終わりに減速する動きを「イーズ・アウト」と呼ぶそうです。 イーズ・アウトは重要で、フレーム数が限られた描画でも滑らかに動きに見せることができます。 ぶっちゃけ、COJTで学んだ一番のことと言うと、イーズ・アウトという単語を覚えたことな気がします。 イーズ・アウトの実現方法は色々とあると思いますが、私は次の関数で実装することにしました。 {% math%} f(t) = 1 - exp(-6t) {% endmath %} tは時間で、tを0〜1の間で変化させると、f(t)が良い感じにイーズアウトする物体の座標になります。 この式は、次のサイトから知りました。 指数関数を使ったお手軽イーズ・アウト spinrfの実装 JavaScriptには、spinrfがないので、自分で実装するか、誰かが作った実装を使う必要があります。 単純な用途なら、この実装で十分だと思いました。 連載:jQuery逆引きリファレンス:第5回 コア編 (11⁄13) @IT より // sprintf(‘{0}は{1}’, ‘猫’, ‘うろうろ’); => ‘猫はうろうろ’ sprintf = function(format) { // 第2引数以降を順に処理 for (var i = 1; i < arguments.length; i++) { // 正規表現でプレイスホルダと対応する引数の値を置換処理 var reg = new RegExp(’\{’ + (i - 1) + ‘\}‘, ‘g’); format = format.

Read more