three.js 用にボーンアニメを持つ 3D モデルを書き出すために | Yomotsu net
three.js は skeletal animation （ボーンやリグ）を持った 3D モデルを読み込み、再生することができます。3D モデルを three.js 用に書き出すため一番いいツールは Blender です。 Blender 上でボーンとアニメーションをつけていきます。Dope Sheet を使って、アニメーションを複数持たせると、three.js 上でも異なる複数のアニメーションとして利用することができます。 なお、Blender 上のボーンをつけて書きだすまでの操作は動画にしているので合わせて参考にどうぞ。 1. アニメーションを Bake するFK のみでアニメーションをさせている場合には、この設定は必要ありません。 three.js 上では基本的に FK のみ対応しています。IK や物理演算による自動計算には対応していません。そのため、FK 以外で動かしているボーン
JavaScript を PNG に圧縮する | Yomotsu net
JavaScript を PNG に圧縮するツールを作りました。JS_Packer demoscene は最近 WebGL を使ったものも多くなってきています。 demoecene は基本的に ローカルにファイルとして存在しているものを使う そのファイル容量は 1 バイトでも少ないほうがいい (容量制限がある分野がある) という文化です。そして JS ファイルを圧縮する手法の一つに、JS を PNG 画像にして、それをデコードする、という手法が存在します。 JS の性質JS のコードは基本的にアスキー文字の集まりです。アスキーコードは、小文字/大文字のアルファベット、数字、スペースといった 128 種類しか存在しません。 PNG8 の性質8 ビット PNG は 256 種類の色をパレットに持っています。 PNG は可逆圧縮（ロスレス）形式の画像です。圧縮しても失われるデータはありません。
Chrome で WebGL が動かなくなった | Yomotsu net
Windows 8.1 で、Chrome が自動アップデートされ、Chrome 32 になっていました。すると、昨日まで動いていた WebGL のコンテンツがうまく表示されなくなってしましまいました。例えば新しい Google Map では WebGL が利用されているのですが、これを表示しようとすると次のように Chrome が停止してしまいます。 Chrome では、URL バーに about:gpu と入力すると現在の GPU アクセラレーションの状態を確認できるのですが、問題が起こる環境では次のようにほとんどの項目について GPU が無効となってしまっていました。昨日、つまりアップデートされる前までは何事もなかったのに！ Khronos Web サイト内の表示テストでも WebGL が停止中と認識されています。 一方で、同 PC 上の IE 11 では、何の問題もなく表示テストをク
WebGL でマンデルブロ集合とジュリア集合 | Yomotsu net
複素平面を理解する普段使う”数”に実数 (real number) がある。例えば 0, 1, -10, 0.3, 1/2, √2 など。 これとは別に、虚数 (imaginary number) がある。虚数は √-1 や √(-1/2) などといった、2 乗すると 0 未満になる数のこと。 実数と虚数は、直接足したり掛けたりすることはできない。水と油のような関係。実数の単位は 1 に対して、一般的に虚数の単位は i とする。 実数と虚数を混ぜた数は 10 1 + 10 i のようになる。実数と虚数が混ざった数を複素数 (complex number) という。 複素数は、実数と虚数を軸に、2 次元の平面で表すことができる。これを複素平面 (complex plane) という。例えば、複素数 3 + 2i は次の青い点のように表すことができる。 漸化式と発散マンデルブロ集合は、漸化式
CSS Shaders はじめの 3歩目、簡単な vertex shader を適用する | Yomotsu net
GraphicalWeb Advent Calendar 2012 の 8日目の記事です。 この記事では、CSS Shaders の基本として、何も変形しない CSS Shader を適用する方法を解説します。特に vertex shader に注目し、fragment shader については後日触れます。 1. HTML を用意するまずは CSS を適用する HTML を用意します。ここでは、テキストと画像のみの HTML を用意しました。あわせて CSS Shader による変化がわかりやすいように幅と背景スタイルを適用しておきます。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS Shaders!</title> <style> .sample { width:500px; background: ur
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://yomotsu.net/blog/assets/2014-03-31-fractal/mandelbrot2