著者名が「magicien」
101〜110件目 / 226件
前へ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 次へ

　【MMD】ブラウザで踊ってもらった（その７）【WebGL】 / magicien　

先日、こっそりサンプルを公開したら、本当に誰も遊びに来てくれなかったので、紹介動画を作りました。


奇しくも、あれからちょうど半年。嘘が真になる裏エイプリルフールというやつです。
年内にその８を公開したいけど、ネタが無いなぁ。

　ビブリア古書堂の事件手帖―栞子さんと奇妙な客人たち / magicien　

夏休み中、読もうと思って買った10冊の小説のうち、読み終わったのは2冊だけ... この本はそのうちの1冊。

売れに売れている本を紹介するのもあまり意味が無い気がしますが、自分の読書記録を兼ねて。
タイトルから分かるとおり、古書店を舞台にしたミステリー。
ミステリーといえば探偵役が必要なわけで、この作品では、表紙にもなっている栞子さんが探偵役、主人公でニートの危機にさらされている五浦大輔がワトソン役となっています。
実在する本が各話のタイトルになっているのが特徴で、それらの本をテーマにした事件やら何やらがあり、栞子さんが本の知識とミス・マープル顔負けの洞察力で解決していく、という話。

読んで思ったのは、シリーズ向けのうまい設定だなぁというのと、話の展開が割と早い段階で読めてしまう、ということ。
それだけの材料を読者に与えるフェアなミステリーとも言えますし、重要なのは個々の話ではなく、シリーズを通して各話の裏を流れる本流ということかもしれません。
また、注目すべきは栞子さんの本に対する膨大な知識で、つまりは著者の三上さんの知識なわけで、その深さと広さには、もう参りましたという感じです。１巻の話の一つがヴィノグラードフ・クジミン「論理学入門」だったり、２巻では漫画が出てきたり、守備範囲どれだけ広いんですか。小説家が実在の小説を題材にするのは、かなりのプレッシャーがあったんじゃないかと上から目線で勝手に想像していますが、そんなプレッシャーを感じさせない、小説として純粋に楽しめる作品じゃないかと思います。

ちなみに、今２巻まで読み終わったところですが、どちらも大好物な「余韻の残るハッピーエンド」でした。

　JavaScriptでバイナリデータの読み込み / magicien　

JavaScriptでPMD、VMD等のバイナリデータを読み込んだときに使った方法。

HTML5のAPIの実装が進めば、こんなことする必要も無くなる気がしますが、今使っている方法は次のとおり。

まずはファイルをバイナリとして取得する必要がある。
読み込みの対象がFileオブジェクトの場合は、FileReaderを使えばOK。

function readData(data) {
 ...
}

function readBinaryFile(file) {
  var reader = new FileReader();
  reader.onloadend = function() {
    readData(reader.result);
  };
  reader.readAsBinaryString(file);
}

読み込み対象がサーバ上のファイルであれば、"charset=x-user-defined" として読み込む。
例によって prototype.js を使っているので、Ajax.Requestのサブクラスを作って次のようにした。

var BinaryRequest = Class.create(Ajax.Request,
  initialize: function($super, url, options) {
    $super(url, options);
  },

  request: function() {
    this.transport.overrideMimeType('text/plain; charset=x-user-defined');
    Ajax.Request.prototype.request.apply(this, argument);
  },
});

function readBinaryFileFromURL(url) {
  new BinaryRequest(url, {
    method: 'GET',
    onComplete: function(response) {
      readData(response.responseText);
    },
  });
}

これで、データを読み込むところまでは出来たので、あとはデータの解析をするだけ。
とはいえ、そっちの方が大変ですが。データの解析はまた今度。

　MacでのWeb用音声変換 / magicien　

ウェブ用にmp3とoggとwavを用意するときに毎回分からなくなるのでメモ。

・wav→mp3
こういうときに限ってQuickTimeが使えないので、iTunesを使う。
「iTunes」→「環境設定…」→「一般」→「CDをセットしたときの動作」の横の「読み込み設定」→「読み込み方法」で「MP3エンコーダ」を選択
その後、読み込んだ曲を右クリック（Ctrl+クリック）で選択、「MP3バージョンを作成」で出来上がり。

・mp3→wav
上と同じ。「読み込み方法」で「WAVエンコーダ」を選択
その後、曲を右クリック（Ctrl+クリック）で選択、「WAVバージョンを作成」で出来上がり。

・wav→ogg
oggencコマンドを使う。
FinkとかMacPortsとかで vorbis-tools をインストールすると、使えるっぽい。

$ oggenc -o output.ogg input.wav

これでOggファイルの出来上がり。

・ogg→wav
oggdecコマンドを使う。
同じく vorbis-tools でインストールされる。

$ oggdec -o output.wav input.ogg

mp3とoggの変換は一度wavにしてから変換すれば良いんじゃないかと思う。
あと、音声素材サイトでogg形式のファイルが公開されていると、おっ！と思う。
こことかおすすめです。

　Operaで "instanceof Image" がエラーになる / magicien　

Operaで次のようなコードを実行したところ、"Unhandled Error: Second argument to 'instanceof' does not implement" というエラーになった。

var img = new Image();
if(img instanceof Image) {
  alert("img is an instance of Image!");
}

なぜかImageにはinstanceofが使えないらしい。
Operaで上のような判定をしたい場合は、Imageの代わりにHTMLImageElementを使えばOK。

　JavaScriptでベクトル、行列計算の高速化 / magicien　

JavaScriptでベクトルや行列の計算を高速化しようとしてやったこと。

WebGLを始めた頃、まだライブラリもさほど世の中に無い状態だったので、ベクトルや行列計算のライブラリを自分で実装しました。
3Dのプログラミングというと、8割方ベクトルと行列の計算なんじゃないかと思うのですが、ということは、ベクトルや行列の計算を高速化することで、プログラム全体の高速化が望めるのではないかと考えました。
で、いろいろと実験した結果、割と効果があったのが、ループアンローリングという手法。
CPUのパイプラインが云々で分岐を無くすことで、コードの先読みを有効活用したりデータの依存関係をコンパイラに分かりやすくしたりとかなんとかでまぁあれなんですけど、JavaScriptみたいなスクリプト言語で効果があるのやら駄目もとでやってみたところ、思いのほか有効でした。
ループアンローリングをしない場合だと、4x4の行列計算は次のような書き方になるかと思います。

// 行列の定義
var matrix1 = [[11, 12, 13, 14], [21, 22, 23, 24], [31, 32, 33, 34], [41, 42, 43, 44]];
var matrix2 = [[11, 12, 13, 14], [21, 22, 23, 24], [31, 32, 33, 34], [41, 42, 43, 44]];
var matrix3 = [[0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0]];
// 行列のかけ算
for(var i=0; i<4; i++){
  for(var j=0; j<4; j++){
    for(var k=0; k<4; k++){
      matrix3[i][j] += matrix1[i][k] * matrix2[k][j];
    }
  }
}

ループアンローリングはループを全部展開してしまって、ループ毎に発生する分岐とindexの変数を無くします。
ついでに、配列も無くしてしまって変数を参照するときのオーバーヘッドを少なくしてやります。
すると、

// 行列の定義
var matrix1 = new Object();
matrix1.m11 = 11; matrix1.m12 = 12; matrix1.m13 = 13; matrix1.m14 = 14;
matrix1.m21 = 21; matrix1.m22 = 22; matrix1.m23 = 23; matrix1.m24 = 24;
matrix1.m31 = 31; matrix1.m32 = 32; matrix1.m33 = 33; matrix1.m34 = 34;
matrix1.m41 = 41; matrix1.m42 = 42; matrix1.m43 = 43; matrix1.m44 = 44;
var matrix2 = new Object();
matrix2.m11 = 11; matrix2.m12 = 12; matrix2.m13 = 13; matrix2.m14 = 14;
matrix2.m21 = 21; matrix2.m22 = 22; matrix2.m23 = 23; matrix2.m24 = 24;
matrix2.m31 = 31; matrix2.m32 = 32; matrix2.m33 = 33; matrix2.m34 = 34;
matrix2.m41 = 41; matrix2.m42 = 42; matrix2.m43 = 43; matrix2.m44 = 44;
var matrix3 = new Object();
matrix3.m11 = 0; matrix3.m12 = 0; matrix3.m13 = 0; matrix3.m14 = 0;
matrix3.m21 = 0; matrix3.m22 = 0; matrix3.m23 = 0; matrix3.m24 = 0;
matrix3.m31 = 0; matrix3.m32 = 0; matrix3.m33 = 0; matrix3.m34 = 0;
matrix3.m41 = 0; matrix3.m42 = 0; matrix3.m43 = 0; matrix3.m44 = 0;
// 行列のかけ算
matrix3.m11 = matrix1.m11 * matrix2.m11 + matrix1.m12 * matrix2.m21 + matrix1.m13 * matrix2.m31 + matrix1.m14 * matrix2.m41;
matrix3.m12 = matrix1.m11 * matrix2.m12 + matrix1.m12 * matrix2.m22 + matrix1.m13 * matrix2.m32 + matrix1.m14 * matrix2.m42;
matrix3.m13 = matrix1.m11 * matrix2.m13 + matrix1.m12 * matrix2.m23 + matrix1.m13 * matrix2.m33 + matrix1.m14 * matrix2.m43;
matrix3.m14 = matrix1.m11 * matrix2.m14 + matrix1.m12 * matrix2.m24 + matrix1.m13 * matrix2.m34 + matrix1.m14 * matrix2.m44;
matrix3.m21 = matrix1.m21 * matrix2.m11 + matrix1.m22 * matrix2.m21 + matrix1.m23 * matrix2.m31 + matrix1.m24 * matrix2.m41;
matrix3.m22 = matrix1.m21 * matrix2.m12 + matrix1.m22 * matrix2.m22 + matrix1.m23 * matrix2.m32 + matrix1.m24 * matrix2.m42;
matrix3.m23 = matrix1.m21 * matrix2.m13 + matrix1.m22 * matrix2.m23 + matrix1.m23 * matrix2.m33 + matrix1.m24 * matrix2.m43;
matrix3.m24 = matrix1.m21 * matrix2.m14 + matrix1.m22 * matrix2.m24 + matrix1.m23 * matrix2.m34 + matrix1.m24 * matrix2.m44;
matrix3.m31 = matrix1.m31 * matrix2.m11 + matrix1.m32 * matrix2.m21 + matrix1.m33 * matrix2.m31 + matrix1.m34 * matrix2.m41;
matrix3.m32 = matrix1.m31 * matrix2.m12 + matrix1.m32 * matrix2.m22 + matrix1.m33 * matrix2.m32 + matrix1.m34 * matrix2.m42;
matrix3.m33 = matrix1.m31 * matrix2.m13 + matrix1.m32 * matrix2.m23 + matrix1.m33 * matrix2.m33 + matrix1.m34 * matrix2.m43;
matrix3.m34 = matrix1.m31 * matrix2.m14 + matrix1.m32 * matrix2.m24 + matrix1.m33 * matrix2.m34 + matrix1.m34 * matrix2.m44;
matrix3.m41 = matrix1.m41 * matrix2.m11 + matrix1.m42 * matrix2.m21 + matrix1.m43 * matrix2.m31 + matrix1.m44 * matrix2.m41;
matrix3.m42 = matrix1.m41 * matrix2.m12 + matrix1.m42 * matrix2.m22 + matrix1.m43 * matrix2.m32 + matrix1.m44 * matrix2.m42;
matrix3.m43 = matrix1.m41 * matrix2.m13 + matrix1.m42 * matrix2.m23 + matrix1.m43 * matrix2.m33 + matrix1.m44 * matrix2.m43;
matrix3.m44 = matrix1.m41 * matrix2.m14 + matrix1.m42 * matrix2.m24 + matrix1.m43 * matrix2.m34 + matrix1.m44 * matrix2.m44;

うわぁ…となります。
一見するとすごく効率が悪そうですが、実際はこちらの方が格段に早いです。
あとは変数名の文字数を訳が分からなくならない程度に短くしてコード量を減らしてみたり、関数呼び出しを減らすように気をつけたりといった感じです。
配列を使わない方法で行列を定義した場合に一番苦労したのは、逆行列の計算。頭がおかしくなるかと思いました。まだバグが残ってるかもしれないという不安が付きまといます。
どなたかライブラリを使ってみてデバッグに協力してもらえないでしょうか。
といってもドキュメント皆無だからなぁ。早くドキュメントを作成せねば。

　canvasでWebフォントを使う / magicien　

canvasでWebフォントを使う方法。

まず、Webフォントを適当な場所にアップロードして、CSSにWebフォントを定義する。

@font-face {
  font-family: 'Expressway';
  src: url('./font/Expressway.woff') format('woff');
}

次に、JavaScriptでCanvasのコンテキストのfontにCSSで定義したfont-family（例ではExpressway）を指定する。Webフォント未対応の場合のために、代替となるフォントファミリー（例ではsans-serif）も指定しておく。

function drawString(context2D) {
  context2D.font = "24px bold Expressway,sans-serif";
  context2D.textAlign = "left";
  context2D.textBaseline = "middle";
  context2D.fillStyle = "#000000"; // black
  context2D.strokeStyle = "#FFFFFF#; // white
  context2D.fillText( "Hello, WebGL!" , 100, 100 );
}

CSSの"format"には、woff（Web Open Font Format）の他に、truetype、svg等が使えるらしい。

　WebGLでの文字描画 / magicien　

WebGLで文字を表示させようとすると、いろいろと面倒なので、そのときに使った方法。

2Dの文字や図形を描画する場合、WebGLでまともに実現しようとすると、canvasのオブジェクトをもう一つ作って、字を描いて、テクスチャに貼付けて、それをレンダリングする、というような流れになるかと思います。
が、わざわざそんなことしなくても、作ったcanvasをそのままHTMLの画面上に貼付けた方が手間がかからないし、描画も早かったので、下のようなコードで3Dのcanvasの上に2Dのcanvasを同じサイズ、位置で重ねて使いました。

function create2DContext(canvas3D) {
  var canvas2D = document.createElement('canvas');
  canvas3D.insert( { after: canvas2D } );
  Element.setStyle( canvas2D, {
    position: 'absolute',
    'z-index': 10
  });
  Position.clone( canvas3D, canvas2D );
  canvas2D.width = canvas3D.width
  canvas2D.height = canvas3D.height

  var context2D = canvas2D.getContext('2d');
  return context2D;
}

prototype.js、scriptaculousを使っているので、ソースはそのまま使えないかもですが...
1つのcanvasで2Dのコンテキストと3Dのコンテキストを両方取得できれば問題無いのですが、一度どちらかのコンテキストを取得してしまうと、もう一方のコンテキストが取得できなくなってしまうため、2D用canvasと3D用canvasの2つが必要になるわけです。

　WebGLサンプル追加 / magicien　

ひっそりとサンプルを追加。

気づけば3ヶ月以上空いてしまった...なんか昨年も同じ流れだったような気がする。
まだ作りかけだったりしますが、とりあえず動くようになったので、公開します。

今後はライブラリ開発に戻りつつ、サンプルの完成を目指しつつ、サンプル作成で得たノウハウを書き連ねていければと思います。

　メカクシティデイズ / magicien　

買いました。

最近ボカロの曲を聞くことが多くて、音楽はインターネットにつないで聞くものだと思っていましたが、今回ばかりは買いました。
目当ては空想フォレストのTAB譜。指弾きばっかりしていたせいで、ピックの使い方をすっかり忘れてしまった上にアコギだから夜は練習できない...
半べそかきながら右手と左手別々に練習中。