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

@biochem_fan さんによる分子ビューア誕生秘話。今後のアップグレードにも期待。 ■forked: GLmol - proof of concept version with protein CA viewer http://jsdo.it/biochem_fan/qpqA ※JmolやChime,PDBデータファイル形式の話題も。
5
前へ 1 ・・ 3 4 次へ
ゆなす @juners

RT @biochem_fan: 今作ってる WebGL による分子ビューア http://t.co/oCZUIeKC は、高機能化して Jmol などの代替を目指すのではなく、軽快に動くことを第一にしたいと思っている。あと、単なるデモでない、WebGL/Javascript の実用的な使用例となりたい。

2011-10-18 22:36:25
本間善夫 - サイエンスアゴラ2023出展(11/18-19) @ecochem

#分子#ツール#npuh RT @biochem_fan: 今作ってる WebGL による分子ビューア http://t.co/FcPj8kfz は、高機能化して Jmol などの代替を目指すのではなく、軽快に動くことを第一にしたい…WebGL/Javascript …

2011-10-18 22:37:35
nakamods320yen @nakamods320yen

RT @biochem_fan: 今作ってる WebGL による分子ビューア http://t.co/oCZUIeKC は、高機能化して Jmol などの代替を目指すのではなく、軽快に動くことを第一にしたいと思っている。あと、単なるデモでない、WebGL/Javascript の実用的な使用例となりたい。

2011-10-18 22:39:43
とりさん @biochem_fan

GeometryUtils.merge を使おうと、Three.js を r42 (jsdo.it にもあるやつ) から r45 にしたら、addChild が廃止予定だと警告がうるさいうえ、何も映らなくなった。r43 にしたら、形は出るんだけど、色がおかしい。こりゃオオゴトだ。

2011-10-18 23:36:52
とりさん @biochem_fan

Photosystem IIは重いなりに表示できたのでリボソームにチャレンジしたらブラウザが応答不能になった。結合を構築するのに O(N^2) のアルゴリズムを使っているので原子数が増えるとヤバイ。α炭素の表示だけにしたら軽い。でもリボソームはRNAが大半だから、それでは意味なし

2011-10-18 23:52:03
とりさん @biochem_fan

RNA の主鎖を表示するにはどこをトレースすればいいんだろうと思って調べたら、P をつなげばよいらしい。これはすぐ実装できる。

2011-10-18 23:54:10
とりさん @biochem_fan

Mesh の統合による高速化は、Three.js のバージョン変更が想像以上に難航しそうなので後回し。容易にできる高速化としては、結合の検出を鎖ごとに行うようにすれば、O(n^2) が O((n/m)^2 * m) = O(n^2 / m) と、鎖の数だけ速くなるはず。

2011-10-18 23:56:31
とりさん @biochem_fan

一行修正して DNA/RNA の主鎖も表示できるようになったが、リボソームは毛玉にしか見えなかった。

2011-10-19 00:00:13
とりさん @biochem_fan

結晶学的対称分子の表示も実装したい。これは自分の勉強のため。

2011-10-19 00:11:24
とりさん @biochem_fan

WebGLによる分子構造ビューアのスクリーンショット。Cartoon表示の実装に向けて、主鎖を帯で表示してみた。ループやシート部がひどいし、法線の向きも変。現在、鋭意改良中。 http://t.co/RF2cVHee

2011-10-19 20:49:14
拡大
とりさん @biochem_fan

http://t.co/UeFTMVJl これでは、まるで「きしめん」表示である。今の簡易実装ではα炭素を結んだ線と主鎖カルボニル酸素を結んだ線を帯にしているのだが、ループやβシート部分ではC=Oの向きが入れ替わるので、縮れた帯になってしまうのである。

2011-10-19 20:52:30
拡大
とりさん @biochem_fan

とりあえず、二次構造をちゃんと読み込む(HELIX, SHEETエントリのパース)ように作業中。ついでに、color by structure もつける。そのために、色情報をデータモデルに保持するようにしなくては。

2011-10-19 20:53:43
きゅうもるの中の人 @cuemolnohito

@biochem_fan cuemolでは,ひとつ前の残基のベクトルとの内積を取って負だとベクトルをひっくり返すようにしています.これで,だいたい捻れなくなります.

2011-10-19 21:09:15
とりさん @biochem_fan

@cuemolnohito その方向で作業中です。情報ありがとうございます。ちなみに、今日ラボで cuemol は pymol よりも二次構造の認識が賢いと話題になっていました。

2011-10-19 21:17:03
yukikaze @yukikaze_jp

@biochem_fan 分子構造ビューア格好いいですね!! 将来的にはHTML5対応とかするんですか ( ゚∀゚)o彡°HTML5!HTML5!

2011-10-19 22:01:26
とりさん @biochem_fan

@yukikaze_jp 何を以て HTML5 対応というかの問題ですね。WebGL は canvas 要素に描かれるので、そういう意味では既に HTML5 の機能を使ってます。他に、HTML5 的な機能で役に立ちそうなのありますか?

2011-10-19 22:30:12
とりさん @biochem_fan

@yukikaze_jp なお実物は、昨日のバージョンですが、 http://t.co/oCZUIeKC に上げてあります(もうご覧になっていたならすみません)。

2011-10-19 22:32:13
とりさん @biochem_fan

原子ごとに色情報をもたせた。color by chain, structure, element などが自由自在。

2011-10-19 22:37:12
とりさん @biochem_fan

three.js における、メッシュの材質設定、ならびに色付けのしかたがややこしい。

2011-10-19 22:43:17
yukikaze @yukikaze_jp

@biochem_fan おおおおお!!!凄いです!!! たしかHTML5+CSS3で3D表示ができた気がしたので聞いてみました。 それにしてもここまでぬるぬる動くとは・・・

2011-10-19 22:53:40
とりさん @biochem_fan

WebGLによる分子構造ビューア、最新版のスクリーンショット。βシートの縮れをなくし、ループ部分の帯を細くして、Cartoon表示の一歩手前まで来た。一部色が変なのは、法線がおかしいため。 http://t.co/KgtUULjW

2011-10-20 21:12:55
拡大
とりさん @biochem_fan

今の実装ではヘリックスに厚みがないんだけど、これでも十分な気がしている。ポリゴンが少なくて済むし、頂点座標の計算に平方根が不要なので軽くてすむ。

2011-10-20 21:15:56
とりさん @biochem_fan

さすがに厚みがないとループみたいに細いところが見にくいので、そこだけ主鎖を結んだ line とかで補う予定。法線の問題は、じっくり考えれば解決すると思うけど、後回しにしたい気分。

2011-10-20 21:19:19
とりさん @biochem_fan

二次構造の判定は、HELIXやSHEET行に頼っている。既に「できあがった」構造をWebに提示できるようにするのが目的で、精密化途中のモデルとかを表示することは考えていないので、これでいいかなと思っている。自分の勉強のために、二次構造判定を実装してみるのも面白そうではあるけど。

2011-10-20 21:21:21
とりさん @biochem_fan

開発中のWebGLによる分子ビューアは、三次元モデルの生成部とUI部(マウスによる視点移動など)を切り離しているので、後者だけを独立して利用することも可能である。そこで、Marching Cube法による三次元スカラー場の等値面ビューアを作ってみた。そのうち公開予定。

2011-10-21 22:00:06
前へ 1 ・・ 3 4 次へ