Mercurial > hg > Events > OSC2011
comparison presen/index.html @ 1:d33d9d7770b2
modify RemoteframebufferUpdate, ZRLEE
author | Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp> |
---|---|
date | Sat, 10 Sep 2011 03:00:41 +0900 |
parents | d91f1fc9c123 |
children | 149f9c8d36f5 4573aaf1bf0b |
comparison
equal
deleted
inserted
replaced
0:d91f1fc9c123 | 1:d33d9d7770b2 |
---|---|
81 <h3></h3> | 81 <h3></h3> |
82 <li>大城 信康 谷成 雄</li> | 82 <li>大城 信康 谷成 雄</li> |
83 <h4><a href="http://ie.u-ryukyu.ac.jp/" rel="external">琉球大学 並列信頼研究室</a></h4> | 83 <h4><a href="http://ie.u-ryukyu.ac.jp/" rel="external">琉球大学 並列信頼研究室</a></h4> |
84 <div class="handout"></div> | 84 <div class="handout"></div> |
85 </div> | 85 </div> |
86 | 86 <!-- PAGE --> |
87 | 87 <div class="slide"> |
88 <!-- PAGE --> | 88 <h1>本日の内容</h1> |
89 <div class="slide"> | 89 <li>友人と作ったJavaによる画面共有システム「TreeVNC」について</li> |
90 <h1>目的と背景</h1> | 90 <li>TreeVNCを作るにあたって学んだJavaでの並列プログラミングの仕方やVNCの話</li> |
91 </div> | |
92 <!-- PAGE --> | |
93 <div class="slide"> | |
94 <h1>TreeVNCの目的と背景</h1> | |
91 <li>大学の講義中、スクリーンに映されている画面は後ろの席程見えずらい。 </li> | 95 <li>大学の講義中、スクリーンに映されている画面は後ろの席程見えずらい。 </li> |
92 <li>その問題を手元のPCにも写せるようにすることで解決しようと考えた。</li> | 96 <li>その問題を手元のPCにも写せるようにすることで解決しようと考えた。</li> |
93 <li class="incremental">60人以上での画面共有を行うことを目標とする。</li> | 97 <li class="incremental">60人以上での画面共有を行うことを目標とする。</li> |
94 </div> | 98 </div> |
95 <!-- PAGE --> | 99 <!-- PAGE --> |
96 <div class="slide"> | 100 <div class="slide"> |
97 <h1>VNCを用いての画面共有</h1> | 101 <h1>VNCによる画面共有</h1> |
98 <li>画面を共有する方法 -> VNC</li> | 102 <li>画面を共有する方法 -> VNC</li> |
99 <li>VNC: Virtual Network Computing </br>ネットワークを介してコンピュータを遠隔操作するプログラム </li> | 103 <li>VNC: Virtual Network Computing </br>ネットワークを介してコンピュータを遠隔操作するプログラム </li> |
100 <li>VNCのリモートPCの画面を写す機能を利用する。</li> | 104 <li>VNCのリモートPCの画面を写す機能を利用する。</li> |
105 </div> | |
106 <!-- PAGE --> | |
107 <div class="slide"> | |
108 <h1>VNCを用いての画面共有</h1> | |
109 <li>まず、iMacで複数のPCからVNCをかけてみた。</li> | |
110 <li class="incremental">-> 10台と繋ぐ前にVNCでの画面がカクカクに... </li> | |
111 <li class="incremental">さらにCPU使用率も跳ね上がった。</li> | |
101 </div> | 112 </div> |
102 <!-- PAGE --> | 113 <!-- PAGE --> |
103 <div class="slide"> | 114 <div class="slide"> |
104 <h1>通常のVNCの問題点</h1> | 115 <h1>通常のVNCの問題点</h1> |
105 <table class="center"> | 116 <table class="center"> |
113 <li><small>VNC Serverの負荷が重い。</small></li> | 124 <li><small>VNC Serverの負荷が重い。</small></li> |
114 <li><small>Server側の通信網1本への通信負荷が高い。</small></li> | 125 <li><small>Server側の通信網1本への通信負荷が高い。</small></li> |
115 </td> | 126 </td> |
116 </tr> | 127 </tr> |
117 </table> | 128 </table> |
129 <p class="incremental" style="text-align: center;" >実際に測ってみた</p> | |
118 </div> | 130 </div> |
119 <!-- PAGE --> | 131 <!-- PAGE --> |
120 <div class="slide"> | 132 <div class="slide"> |
121 <h1>通常のVNCの問題点</h1> | 133 <h1>通常のVNCの問題点</h1> |
122 <p style="text-align: center;"> | 134 <p style="text-align: center;"> |
131 <td>CPU使用率</td> | 143 <td>CPU使用率</td> |
132 </tr> | 144 </tr> |
133 | 145 |
134 <tr> | 146 <tr> |
135 <td>1台</td> | 147 <td>1台</td> |
136 <td>20M</td> | 148 <td>20M<small>(最大速度)</small></td> |
137 <td>55%</td> | 149 <td>55%</td> |
138 </tr> | 150 </tr> |
139 | 151 |
140 <tr> | 152 <tr> |
141 <td>48台</td> | 153 <td>48台</td> |
146 <li>VNCに使われるCPUの使用率が100%になり、スループットが5分の1まで下がっている。</li> | 158 <li>VNCに使われるCPUの使用率が100%になり、スループットが5分の1まで下がっている。</li> |
147 | 159 |
148 </div> | 160 </div> |
149 <!-- PAGE --> | 161 <!-- PAGE --> |
150 <div class="slide"> | 162 <div class="slide"> |
163 <h1>通常のVNCの問題点</h1> | |
164 <li>サーバへのCPU負荷が高い</li> | |
165 <li>1本の通信網への負荷が高い</li> | |
166 </div> | |
167 <!-- PAGE --> | |
168 <div class="slide"> | |
151 <h1>VNCの問題点の解決策</h1> | 169 <h1>VNCの問題点の解決策</h1> |
152 <p style="text-align: center;"> | 170 <p style="text-align: center;"> |
153 <small>クライアントを木構造で接続させる</samll><br> | 171 <small>クライアントを木構造で接続させるTreeVNC</samll><br> |
154 <img class="scale" src="./pix/TreeVNC0.png" width="500" heigth="500"><br> | 172 <img class="scale" src="./pix/TreeVNC0.png" width="500" heigth="500"><br> |
155 </p> | 173 </p> |
156 </div> | 174 </div> |
157 <!-- PAGE --> | 175 <!-- PAGE --> |
158 <div class="slide"> | 176 <div class="slide"> |
192 <img src="./pix/TreeVNC3.png" width="300"> | 210 <img src="./pix/TreeVNC3.png" width="300"> |
193 </td> | 211 </td> |
194 </tr> | 212 </tr> |
195 </p> | 213 </p> |
196 </table> | 214 </table> |
197 <table class="center" border=1 cellspacing="0" width=80%> | 215 <table class="center" border=1 cellspacing="0" width=100%> |
198 <tr> | 216 <tr> |
199 <td></td> | 217 <td></td> |
200 <td>通常のVNC</td> | 218 <td>通常のVNC</td> |
201 <td>TreeVNC</td> | 219 <td>TreeVNC</td> |
202 </tr> | 220 </tr> |
203 <tr> | 221 <tr> |
204 <td>最大負荷</td> | 222 <td>最大負荷</td> |
205 <td> N * データ量 (クライアントの数に比例) </td> | 223 <td> N*データ量 (クライアントの数に比例) </td> |
206 <td> (M+1) * データ量</td> | 224 <td> (M+1) * データ量</td> |
207 </tr> | 225 </tr> |
208 </table> | 226 </table> |
209 <p style="text-align: center;"><small>クライアントの数をN、木構造の子供の数をMとする</small> </p> | 227 <p style="text-align: center;"><small>クライアントの数をN、木構造の子供の数をMとする</small> </p> |
210 </div> | 228 </div> |
211 </div> | 229 </div> |
212 <!-- PAGE --> | 230 <!-- PAGE --> |
213 <div class="slide"> | 231 <div class="slide"> |
214 <h1>TreeVNCの設計</h1> | 232 <h1>TreeVNCの設計</h1> |
233 <li>木構造での接続</li> | |
215 <li>TreeVNCのクライアントは最初にTop Proxyに接続を行う。</li> | 234 <li>TreeVNCのクライアントは最初にTop Proxyに接続を行う。</li> |
216 <li>データは木の下へと流れていく。</li> | 235 <li>データは木の下へと流していくようにする。</li> |
217 <li>tightVNC ViewerのJava版(ver 1.3)を元にTreeVNCの実装を行う。</li> | 236 <li>tightVNC ViewerのJava版(ver 1.3)を元にTreeVNCの実装を行う。</li> |
218 <p style="text-align: center;"> | 237 <p style="text-align: center;"> |
219 <img class="scale" src="./pix/TreeVNC0.png" width="500" heigth="500"> | 238 <img class="scale" src="./pix/TreeVNC0.png" width="500" heigth="500"> |
220 </p> | 239 </p> |
221 </div> | 240 </div> |
222 <!-- PAGE --> | 241 <!-- PAGE --> |
223 <div class="slide"> | 242 <div class="slide"> |
224 <h1>発表内容</h1> | 243 <h1>今回の主な内容</h1> |
225 <ul> | 244 <ul> |
226 <li>RFB Protocol</li> | 245 <li>RFB Protocol</li> |
227 <li>データ転送量</li> | 246 <li>データ転送量</li> |
228 <li>ZRLE Encodingの問題</li> | 247 <li>ZRLE Encodingの問題</li> |
229 <li>データ転送に用いたMulticastQueueについての説明</li> | 248 <li>データ転送に用いたMulticastQueueについての説明</li> |
232 </div> | 251 </div> |
233 <!-- PAGE --> | 252 <!-- PAGE --> |
234 <div class="slide"> | 253 <div class="slide"> |
235 <h1>RFB protocol</h1> | 254 <h1>RFB protocol</h1> |
236 <li>Remote Frame Buffer Protocol : <br>GUI操作によるリモートアクセス用の通信プロトコル。VNCで用いられる。</li> | 255 <li>Remote Frame Buffer Protocol : <br>GUI操作によるリモートアクセス用の通信プロトコル。VNCで用いられる。</li> |
237 <li>転送される画面(フレームバッファ)のデータは変更があった部分(差分)だけが矩形単位で送られる。</li> | |
238 <table class="center" width=100%> | |
239 <tr> | |
240 <td> | |
241 <img src="./pix/hadesScreen1.png"> | |
242 </td> | |
243 <td> | |
244 <img src="./pix/rightArrow.png"> | |
245 </td> | |
246 <td> | |
247 <img src="./pix/hadesScreen2.png"> | |
248 </td> | |
249 </tr> | |
250 </table> | |
251 <small> | |
252 <p style="text-align: center;"><font color=red>□ </font>で囲まれている矩形のデータだけが送られてくる。 </p> | |
253 </small> | |
254 </div> | |
255 <!-- PAGE --> | |
256 <div class="slide"> | |
257 <h1>VNC のシーケンス図</h1> | |
258 <table class="scale" width=100% > | 256 <table class="scale" width=100% > |
259 <tr> | 257 <tr> |
260 <td width=50%> | 258 <td width=50%> |
261 <img class="scale" src="./pix/VNC-Sequence-.png" height=80%> | 259 <img class="scale" src="./pix/VNC-Sequence-.png" height=80%> |
262 </td> | 260 </td> |
269 </tr> | 267 </tr> |
270 </table> | 268 </table> |
271 </div> | 269 </div> |
272 <!-- PAGE --> | 270 <!-- PAGE --> |
273 <div class="slide"> | 271 <div class="slide"> |
272 <h1>画像の更新(FramebufferUpdate)</h1> | |
273 <li>転送される画面(フレームバッファ)のデータは変更があった部分(差分)だけが矩形単位で送られる。</li> | |
274 <table class="center" width=100%> | |
275 <tr> | |
276 <td> | |
277 <img src="./pix/hadesScreen1.png"> | |
278 </td> | |
279 <td> | |
280 <img src="./pix/rightArrow.png"> | |
281 </td> | |
282 <td> | |
283 <img src="./pix/hadesScreen2.png"> | |
284 </td> | |
285 </tr> | |
286 </table> | |
287 <small> | |
288 <p style="text-align: center;"><font color=red>□ </font>で囲まれている矩形のデータだけが送られてくる。 </p> | |
289 </small> | |
290 </div> | |
291 <!-- PAGE --> | |
292 <div class="slide"> | |
274 <h1>RFB Protocol</h1> | 293 <h1>RFB Protocol</h1> |
275 <li>FramebufferUpdateRequest:</li> | 294 <li>FramebufferUpdateRequest:</li> |
276 <li><small>画面に差分が発生したらサーバから教えて貰うためのリクエスト</small></li> | 295 <li><small>画面に差分が発生したらサーバから教えて貰うためのリクエスト</small></li> |
277 <small> | 296 <small> |
278 <table> | 297 <table width=100% style="text-align: center;"> |
279 <td width=50%> | 298 <td width=50%> |
280 <table border=1 cellspacing="0"> | 299 <table border=1 cellspacing="0"> |
281 <tr> | 300 <tr> |
282 <td>バイト数</td> | 301 <td>バイト数</td> |
283 <td><pre>型 [値]</pre></td> | 302 <td><pre>型 [値]</pre></td> |
320 <td>height</td> | 339 <td>height</td> |
321 </tr> | 340 </tr> |
322 | 341 |
323 </table> | 342 </table> |
324 </td> | 343 </td> |
344 <td> | |
345 <img src="./pix/TreeVNC1.png" width=90%> | |
346 </td> | |
325 </table> | 347 </table> |
326 <li>このリクエストはTop Proxyだけが行う。 </li> | |
327 </small> | 348 </small> |
349 <li><small>このリクエストはTop Proxyだけが行う。</small> </li> | |
328 </div> | 350 </div> |
329 <!-- PAGE --> | 351 <!-- PAGE --> |
330 <div class="slide"> | 352 <div class="slide"> |
331 <h1>RFB Protocol</h1> | 353 <h1>RFB Protocol</h1> |
332 <li>FramebufferUpdate: <small>画面の更新データ</small></li> | 354 <li>FramebufferUpdateRequest:<small>画面の更新データ</small></li> |
333 | 355 <table width="100%"> |
356 <td width=50%> | |
334 <small> | 357 <small> |
335 <table border=1 cellspacing="0" > | 358 <table border=1 cellspacing="0" > |
336 <tr> | 359 <tr> |
337 <td>バイト数</td> | 360 <td>バイト数</td> |
338 <td><pre>型 [値]</pre></td> | 361 <td><pre>型 [値]</pre></td> |
356 <td><pre>U16<pre></td> | 379 <td><pre>U16<pre></td> |
357 <td>number-of-rectangles</td> | 380 <td>number-of-rectangles</td> |
358 </tr> | 381 </tr> |
359 | 382 |
360 </table> | 383 </table> |
361 <li>以下number-of-rectanglesの数だけ矩形のデータが続く</li> | 384 <li><small>以下number-of-rectanglesの数だけ矩形のデータが続く</small></li> |
362 | 385 |
363 <table width=100%> | 386 <table width=100%> |
364 <td> | 387 <td> |
365 <table border=1 cellspacing="0" width=50%> | 388 <table border=1 cellspacing="0" width=100%> |
366 <tr> | 389 <tr> |
367 <td>バイト数</td> | 390 <td>バイト数</td> |
368 <td><pre>型 </pre></td> | 391 <td><pre>型 </pre></td> |
369 <td>説明 </td> | 392 <td>説明 </td> |
370 </tr> | 393 </tr> |
410 </td> | 433 </td> |
411 <td> | 434 <td> |
412 </td> | 435 </td> |
413 | 436 |
414 </table> | 437 </table> |
415 | |
416 | |
417 </small> | 438 </small> |
439 </td> | |
440 <td width> | |
441 <img src="./pix/TreeVNC2.png" width=90%> | |
442 </td> | |
443 </table> | |
444 | |
418 </div> | 445 </div> |
419 <!-- PAGE --> | 446 <!-- PAGE --> |
420 <div class="slide"> | 447 <div class="slide"> |
421 <h1>RFB Protocol</h1> | 448 <h1>RFB Protocol</h1> |
422 <li style="text-align: center;"><small>例:FramebufferUpdate</small></li> | 449 <li style="text-align: center;"><small>例:FramebufferUpdate</small></li> |
518 </p> | 545 </p> |
519 </div> | 546 </div> |
520 <!-- PAGE --> | 547 <!-- PAGE --> |
521 <div class="slide"> | 548 <div class="slide"> |
522 <h1>データ転送量</h1> | 549 <h1>データ転送量</h1> |
523 <li>クライアントが60台の時の通常のVNCと、2分木構成にしたTreeVNCの通信網への負荷の理論値を考える。</li> | 550 <li>クライアントが60台とした時、通常のVNCと、2分木構成にしたTreeVNCの通信網への負荷の理論値を考える。</li> |
524 <table class="center" border=1 cellspacing="0" width=80%> | 551 <table class="center" border=1 cellspacing="0" width=80%> |
525 <tr> | 552 <tr> |
526 <td></td> | 553 <td></td> |
527 <td>通常のVNC</td> | 554 <td>通常のVNC</td> |
528 <td>TreeVNC</td> | 555 <td>TreeVNC</td> |
532 <td> N * データ量(クライアントの数に比例) </td> | 559 <td> N * データ量(クライアントの数に比例) </td> |
533 <td> (M+1) * データ量</td> | 560 <td> (M+1) * データ量</td> |
534 </tr> | 561 </tr> |
535 </table> | 562 </table> |
536 <p style="text-align: center;"><small>クライアントの数をN、木構造の子供の数をMとする</small> </p> | 563 <p style="text-align: center;"><small>クライアントの数をN、木構造の子供の数をMとする</small> </p> |
537 <li>N = 60、 M = 1 となる。</li> | 564 <li>N = 60、 M = 2 、使用するエンコードはZRLEとする。</li> |
538 <li>724 * 449 の画面分のデータ(0.8M)を送信するとする。 </li> | 565 <li>724 * 449 の画面分のデータ(0.8M)を送信するとする。 </li> |
539 | 566 |
540 </div> | 567 </div> |
541 <!-- PAGE --> | 568 <!-- PAGE --> |
542 <div class="slide"> | 569 <div class="slide"> |
574 </small> | 601 </small> |
575 </div> | 602 </div> |
576 <!-- PAGE --> | 603 <!-- PAGE --> |
577 <div class="slide"> | 604 <div class="slide"> |
578 <h1>エンコード</h1> | 605 <h1>エンコード</h1> |
579 <li>MacintoshでVNCを行うとZRLEを使うことができる。</li> | 606 <li>MacintoshでZRLEを使ってVNCを行うことができる</li> |
580 <li>データ量がRAWデータの約4分の1ですむ。</li> | 607 <li>データ量がRAWデータの約4分の1ですむ。</li> |
581 <li class="incremental">TreeVNCではこのZRLEを扱っている。</li> | 608 <li class="incremental">TreeVNCではこのZRLEを扱っている。</li> |
582 </div> | 609 </div> |
583 <!-- PAGE --> | 610 <!-- PAGE --> |
584 <div class="slide"> | 611 <div class="slide"> |
601 <td>length</td> | 628 <td>length</td> |
602 </tr> | 629 </tr> |
603 <tr> | 630 <tr> |
604 <td>length</td> | 631 <td>length</td> |
605 <td>U8 array</td> | 632 <td>U8 array</td> |
606 <td>zlibData</td> | 633 <td>ZlibData</td> |
607 </tr> | 634 </tr> |
608 </table> | 635 </table> |
609 </small> | 636 </small> |
610 | 637 <li>VNCでZRLEを使う場合は単一のzrleストリームを使ってデータの解凍を行う。</li> |
611 <li>Zlibデータ</li> | 638 <li class="incremental">問題が発生</li> |
612 <ul> | 639 </div> |
613 <li>Zlibデータは辞書を元にデータの解凍を行う</li> | 640 <!-- PAGE --> |
614 </ul> | 641 <div class="slide"> |
642 <h1>ZRLEの問題</h1> | |
643 <li>Zlibデータは辞書を元にデータの解凍を行う</li> | |
615 <li class="incremental">辞書がなければデータを正しく解凍できない</li> | 644 <li class="incremental">辞書がなければデータを正しく解凍できない</li> |
616 </div> | 645 </div> |
617 <!-- PAGE --> | |
618 <div class="slide"> | 646 <div class="slide"> |
619 <h1>ZRLEの問題</h1> | 647 <h1>ZRLEの問題</h1> |
620 <li>辞書はZlibデータの最初に送られてくる。</li> | 648 <li>辞書はZlibデータの最初に送られてくる。</li> |
621 <li>ZRLEのデータを最初から送ることができれば、辞書も送ることができる。</li> | 649 <li>もしも、ZRLEのデータを最初から送っているのなら、辞書も送ることができる。</li> |
622 <li>データの途中から送ると辞書は送られず、正しく解凍を行うことができない。</li> | 650 <li>データの途中から送ると辞書は送られず、正しく解凍を行うことができない。</li> |
651 <li class="incremental">Zlibデータを解凍するjava.util.zip.Deflaterがエラーを吐く</li> | |
623 <table class="textcenter" width=100%> | 652 <table class="textcenter" width=100%> |
624 <tr> | 653 <tr> |
625 <td> | 654 <td> |
626 <img src="./pix/ZRLE.png" width="600" > | 655 <img src="./pix/ZRLE.png" width="600" > |
627 </td> | 656 </td> |
642 unzip(inflater, inputs, 0 , out, INFLATE_BUFSIZE); | 671 unzip(inflater, inputs, 0 , out, INFLATE_BUFSIZE); |
643 // dump32(inputs); | 672 // dump32(inputs); |
644 int len2 = zip(nDeflater, out, 0, bufs); | 673 int len2 = zip(nDeflater, out, 0, bufs); |
645 </pre> | 674 </pre> |
646 </small> | 675 </small> |
647 <li>このエンコードはZRLEEと名付けた。</li> | 676 <li>この圧縮し直したデータはZRLEEと名付けた。</li> |
648 <table class="textcenter" width=100%> | 677 <table class="textcenter" width=100%> |
649 <tr> | 678 <tr> |
650 <td> | 679 <td> |
651 <img src="./pix/ZRLEE2.png" width="600"> | 680 <img src="./pix/ZRLEE2.png" width="600"> |
652 </td> | 681 </td> |
725 </div> | 754 </div> |
726 <!-- PAGE --> | 755 <!-- PAGE --> |
727 <div class="slide"> | 756 <div class="slide"> |
728 <h1>圧縮したデータの転送</h1> | 757 <h1>圧縮したデータの転送</h1> |
729 <li>一度ZRLEEに圧縮してしまえば、データはそのまま流すことができる。</li> | 758 <li>一度ZRLEEに圧縮してしまえば、データはそのまま流すことができる。</li> |
759 <li class="incremental"> -> 気にするのはスループットだけでいい。</li> | |
730 <li>また、データの転送は複数いる子へ並列に行われる。</li> | 760 <li>また、データの転送は複数いる子へ並列に行われる。</li> |
731 <p class="textcenter"> | 761 <p class="textcenter"> |
732 <img src="./pix/MulticastQueue3.png"> | 762 <img src="./pix/MulticastQueue3.png"> |
733 </p> | 763 </p> |
734 <li class="incremental">MulticastQueueクラスを用いてデータの転送を行った。</li> | 764 <li class="incremental">MulticastQueueクラスを用いてデータの転送を行った。</li> |
735 </div> | 765 </div> |
736 <!-- PAGE --> | 766 <!-- PAGE --> |