編集可能

“分子を見たい!” 新分子ビューアGLmolの誕生と成長

@biochem_fan さんによる分子ビューア誕生秘話。今後のアップグレードにも期待。 ■forked: GLmol - proof of concept version with protein CA viewer http://jsdo.it/biochem_fan/qpqA ※JmolやChime,PDBデータファイル形式の話題も。
5
科学にはOSSを@ほとんど在宅勤務中 @biochem_fan

やった、quaternion を使って、モデルをマウスでぐるぐる回転できるようになった!

2011-10-16 11:14:20
科学にはOSSを@ほとんど在宅勤務中 @biochem_fan

この程度の事で喜んでいるので、私は単純である。

2011-10-16 11:15:11
科学にはOSSを@ほとんど在宅勤務中 @biochem_fan

WebGLのライブラリthree.jsを使って低分子ビューアを作ってみた。PDBファイルのHETATM行を読み込める。マウス操作で回転可。Javaじゃないので起動に時間がかからないのが売り。 http://t.co/y5dPC7yk

2011-10-16 11:41:30
拡大
科学にはOSSを@ほとんど在宅勤務中 @biochem_fan

今後の TODO としては、拡大縮小・平行移動の実装(すぐできる)、CONNECT 行の読み込み。グローバル変数を排除して、1ページに複数埋め込めるようにする。このくらいやれば、そこそこ実用的に使えるのではないかと。

2011-10-16 11:44:28
科学にはOSSを@ほとんど在宅勤務中 @biochem_fan

もちろん、本格的な用途には、Chime プラグインとか Jmol とか使えばいいと思う。でもこれらは起動に時間がかかるので、ブログとかに気軽に埋め込むために、WebGL/Javascript だけで書かれた分子ビューアがあってもいいと思った。

2011-10-16 11:47:15
科学にはOSSを@ほとんど在宅勤務中 @biochem_fan

. @nubata さっきの TODO 項目をある程度実装したら、公開予定です。

2011-10-16 11:49:07
科学にはOSSを@ほとんど在宅勤務中 @biochem_fan

Internet Explorer が WebGL に対応していないとか(涙)

2011-10-16 11:53:03
科学にはOSSを@ほとんど在宅勤務中 @biochem_fan

WebGL による分子ビューア: グローバル変数の排除に成功。複数のビューア・インスタンスを同時に出せるようになった。でも、Javascript の変数のスコープやら this の使い方についてちゃんと理解してないので、いろいろ怪しい。

2011-10-16 15:13:37
科学にはOSSを@ほとんど在宅勤務中 @biochem_fan

three.js では、Object3D の中に Object3D を addChild することで、オブジェクトをグループ化できる。こうすることで、それぞれに固有の座標系を持たせることができる。昨晩これに気がつくまでは、マウスによる回転操作の実装で詰まっていた。

2011-10-16 15:16:31
科学にはOSSを@ほとんど在宅勤務中 @biochem_fan

開発中のWebGL版 分子ビューアのUIをちゃんとしないといけないけど、疲れてきた…… proof of concept で満足しちゃうのが私の悪い癖である。

2011-10-16 15:51:58
科学にはOSSを@ほとんど在宅勤務中 @biochem_fan

Canvas とかを使った Javascript のデモで、よく右上のほうに小さなUIがあって、スライダとかでパラメータを変えられるようになってるけど、あのライブラリ、なんて言ったっけ? いざ使おうとすると見つからない……

2011-10-16 17:00:03
科学にはOSSを@ほとんど在宅勤務中 @biochem_fan

@tkfkm なるべく今日中には公開したいと思っているので、もうしばらくお待ちください。

2011-10-16 17:03:49
科学にはOSSを@ほとんど在宅勤務中 @biochem_fan

WebGL 分子ビューア: 拡大縮小を実装。Pymol 風に、右ドラックでできるようにしたかったんだけど、なぜか mousemove イベントの取りこぼしが頻発したため、泣く泣く中ボタンに。

2011-10-16 18:17:21
shinodatter @shinodatter

@biochem_fan 昔、同じ様な軽量ビューア作成を時間が無く挫折しましたが@biochem_fanさんが作成していると聞いて、完成を楽しみにしています! RT:WebGLのライブラリthree.jsを使って低分子ビューアを作ってみた。

2011-10-16 18:17:39
科学にはOSSを@ほとんど在宅勤務中 @biochem_fan

@phi_jp 情報ありがとうございます。自分でフォームを書かなくても、自動的にUIを並べてくれる小さなライブラリがあったように記憶しています。Stats.js みたいな感じで、画面の端にちょろっとポップアップする感じのUIです。

2011-10-16 18:37:56
科学にはOSSを@ほとんど在宅勤務中 @biochem_fan

蛋白質のPDBファイルとかを読み込むと挙動が怪しいんだけど、マイトトキシンのPDBファイルも読み込めたし、「低分子ビューア」としてはこれで十分ではなかろうか。

2011-10-16 18:39:37
科学にはOSSを@ほとんど在宅勤務中 @biochem_fan

http://t.co/QbbhrEkV > WebGL で作った低分子ビューア、proof of concept の段階ですが公開しました。Firefox か Chrome なら動くはず。残念ながら IE は無理です。@shinodatter, @tkfkm, @nubata

2011-10-16 19:13:17
ぬばた @nubata

@biochem_fan 流石にiPhoneでは無理でした…。帰ったら試してみます。

2011-10-16 19:27:24
EISUKE Sato @E_SATOakaSUGAR

RT @biochem_fan: http://t.co/QbbhrEkV > WebGL で作った低分子ビューア、proof of concept の段階ですが公開しました。Firefox か Chrome なら動くはず。残念ながら IE は無理です。@shinodatter, @tkfkm, @nubata

2011-10-16 19:37:16
ぬばた @nubata

@biochem_fan おぉぉぉ・・・ぐれいと・・・

2011-10-16 20:56:08
科学にはOSSを@ほとんど在宅勤務中 @biochem_fan

風呂に入っている間は、作りかけの WebGL 版低分子構造ビューア http://t.co/Vt5ID8fo のアイデアがいろいろ湧いていたはずなんだけど、出て服着たら全部忘れてた。低分子はおいておいて、蛋白質ビューアの作業をはじめよう。

2011-10-16 22:01:16
残りを読む(100)

コメント

Yoshio HONMA (本間善夫) @ecochem 2011年10月22日
「“分子を見たい!” 新分子ビューアGLmolの誕生と成長」まとめ,作成直後の反響を追加しました! #カガク#分子#生体分子#プログラミング#npuh
0
青子守歌 @aokomoriuta 2011年10月22日
.@ecochem さんからなんだか@だけ飛んできていて、http://twitter.com/ecochem/status/127713681873182720 なんのことかと思ったら、どうでもいい(本筋にほぼ関係ない)つぶやきが引用されてた、というだけだったオチ。
0