|
57
|
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
|
|
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
|
3
|
|
|
4 <html xmlns="http://www.w3.org/1999/xhtml">
|
|
|
5
|
|
|
6 <head>
|
|
|
7 <style>
|
|
|
8 .center {
|
|
|
9 margin-left: auto;
|
|
|
10 margin-right: auto;
|
|
|
11 text-align: center;
|
|
|
12 }
|
|
|
13 .textcenter {
|
|
|
14 text-align: center;
|
|
|
15 }
|
|
|
16 .taninaritop {
|
|
|
17 margin: auto;
|
|
|
18 width: 95%;
|
|
|
19 font-weight: bold;
|
|
|
20 }
|
|
|
21 </style>
|
|
|
22 <title>2011/9/27</title>
|
|
|
23 <!-- metadata -->
|
|
|
24 <meta name="generator" content="S5" />
|
|
|
25 <meta name="version" content="S5 1.1" />
|
|
|
26 <meta name="presdate" content="20110910" />
|
|
|
27 <meta name="author" content="Nobuyasu Oshiro" />
|
|
|
28 <meta name="company" content="University of the Ryukyu" />
|
|
|
29 <!-- meta temporary -->
|
|
|
30 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
|
|
31 <meta http-equiv="Content-Script-Type" content="text/javascript" />
|
|
|
32 <meta http-equiv="Content-Style-Type" content="text/css" />
|
|
|
33 <!-- configuration parameters -->
|
|
|
34 <meta name="defaultView" content="slideshow" />
|
|
|
35 <meta name="controlVis" content="hidden" />
|
|
|
36 <!-- configuration extensions -->
|
|
|
37 <meta name="tranSitions" content="true" />
|
|
|
38 <meta name="fadeDuration" content="500" />
|
|
|
39 <meta name="incrDuration" content="250" />
|
|
|
40 <!-- configuration autoplay extension -->
|
|
|
41 <meta name="autoMatic" content="false" />
|
|
|
42 <meta name="playLoop" content="true" />
|
|
|
43 <meta name="playDelay" content="10" />
|
|
|
44 <!-- configuration audio extension -->
|
|
|
45 <meta name="audioSupport" content="false" />
|
|
|
46 <meta name="audioVolume" content="100" />
|
|
|
47 <meta name="audioError" content="false" />
|
|
|
48 <!-- configuration audio debug -->
|
|
|
49 <meta name="audioDebug" content="false" />
|
|
|
50 <!-- style sheet links -->
|
|
|
51 <link rel="stylesheet" href="ui/default_utf/slides.css" type="text/css" media="projection" id="slideProj" />
|
|
|
52 <link rel="stylesheet" href="ui/default_utf/outline.css" type="text/css" media="screen" id="outlineStyle" />
|
|
|
53 <link rel="stylesheet" href="ui/default_utf/print.css" type="text/css" media="print" id="slidePrint" />
|
|
|
54 <link rel="stylesheet" href="ui/default_utf/opera.css" type="text/css" media="projection" id="operaFix" />
|
|
|
55 <!-- embedded styles -->
|
|
|
56 <style type="text/css" media="all">
|
|
|
57 .imgcon {width: 100%; margin: 0 auto; padding: 0; text-align: center;}
|
|
|
58 #anim {width: 33%; height: 320px; position: relative;}
|
|
|
59 #anim img {position: absolute; top: 0px; left: 0px;}
|
|
|
60 </style>
|
|
|
61 <!-- S5 JS -->
|
|
|
62 <script src="ui/default_utf/slides.js" type="text/javascript"></script>
|
|
|
63 </head>
|
|
|
64 <body>
|
|
|
65
|
|
|
66 <div class="layout">
|
|
|
67 <div id="controls"><!-- DO NOT EDIT --></div>
|
|
|
68 <div id="currentSlide"><!-- DO NOT EDIT --></div>
|
|
|
69 <div id="header"></div>
|
|
|
70 <div id="footer">
|
|
|
71 <h1>セミナー: 2011/ 9/ 27</h1>
|
|
|
72 <h2>並列信頼研</h2>
|
|
|
73 </div>
|
|
|
74 </div>
|
|
|
75
|
|
|
76 <div class="presentation">
|
|
|
77 <div class="slide">
|
|
|
78 <h1>Java による授業向け画面共有システムの設計と実装 </li>
|
|
|
79 <h3></h3>
|
|
|
80 <li>谷成 雄</li>
|
|
|
81 <h4><a href="http://ie.u-ryukyu.ac.jp/" rel="external">琉球大学 並列信頼研究室</a></h4>
|
|
|
82 <div class="handout"></div>
|
|
|
83 </div>
|
|
|
84 <!-- PAGE -->
|
|
|
85 <div class="slide">
|
|
|
86 <h1>目的と背景</h1>
|
|
|
87 <li>大学の講義中、スクリーンに映されている画面は後ろの席程見えずらい。 </li>
|
|
|
88 <li>その問題を手元のPCにも写せるようにすることで解決しようと考えた。</li>
|
|
|
89 <li class="incremental">60人以上での画面共有を行うシステムを目標とする。</li>
|
|
|
90 </div>
|
|
|
91 <!-- PAGE -->
|
|
|
92 <div class="slide">
|
|
|
93 <h1>VNCによる画面共有</h1>
|
|
|
94 <li>今回、VNCを用いて画面共有システムを作成する。</li>
|
|
|
95 <li>VNC: Virtual Network Computing </br>ネットワークを介してコンピュータを遠隔操作するプログラム </li>
|
|
|
96 <li class="incremental">VNC用いた授業用画面共有システムTreeVNCの設計と実装を行った。</li>
|
|
|
97 </div>
|
|
|
98 <!-- PAGE -->
|
|
|
99 <div class="slide">
|
|
|
100 <h1>通常のVNCの問題点</h1>
|
|
|
101 <table class="center">
|
|
|
102 <tr>
|
|
|
103 <td width=50% >
|
|
|
104 <p style="text-aline: center;" >
|
|
|
105 <img clas="scale" src="./pix/NormalVNC3.png" width="450">
|
|
|
106 </p>
|
|
|
107 </td>
|
|
|
108 <td width=50% style="text-align: left;">
|
|
|
109 <li><small>VNC Serverの負荷が重い。</small></li>
|
|
|
110 <li><small>Server側の通信網1本への通信負荷が高い。</small></li>
|
|
|
111 </td>
|
|
|
112 </tr>
|
|
|
113 </table>
|
|
|
114 </div>
|
|
|
115 <!-- PAGE -->
|
|
|
116 <div class="slide">
|
|
|
117 <h1>通常のVNCの問題点</h1>
|
|
|
118 <p style="text-align: center;">
|
|
|
119 <li>
|
|
|
120 <samll>1台と48台でVNCをかけた時のスループットとサーバ側のCPU使用率</small>
|
|
|
121 </li>
|
|
|
122 </p>
|
|
|
123 <table class="center" class="incremental" border=1>
|
|
|
124 <tr>
|
|
|
125 <td></td>
|
|
|
126 <td>スループット(単位:Byte)</td>
|
|
|
127 <td>CPU使用率</td>
|
|
|
128 </tr>
|
|
|
129
|
|
|
130 <tr>
|
|
|
131 <td>1台</td>
|
|
|
132 <td>20M<small>(VNCでの最大速度)</small></td>
|
|
|
133 <td>55%</td>
|
|
|
134 </tr>
|
|
|
135
|
|
|
136 <tr>
|
|
|
137 <td>48台</td>
|
|
58
|
138 <td>4M(1台あたり)</td>
|
|
57
|
139 <td>100%</td>
|
|
|
140 </tr>
|
|
|
141 </table>
|
|
|
142 <li>VNCに使われるCPUの使用率が100%になり、スループットが5分の1まで下がっている。</li>
|
|
|
143
|
|
|
144 </div>
|
|
|
145 <!-- PAGE -->
|
|
|
146 <div class="slide">
|
|
|
147 <h1>通常のVNCの問題点</h1>
|
|
|
148 <li>サーバへのCPU負荷が高い</li>
|
|
|
149 <li>1本の通信網への負荷が高い</li>
|
|
|
150 </div>
|
|
|
151 <!-- PAGE -->
|
|
|
152 <!--
|
|
|
153 <div class="slide">
|
|
|
154 <h1>VNCの問題点の解決策</h1>
|
|
|
155 <p style="text-align: center;">
|
|
|
156 <small>クライアントを木構造で接続させるTreeVNC</samll><br>
|
|
|
157 <img class="scale" src="./pix/TreeVNC0.png" width="500" heigth="500"><br>
|
|
|
158 </p>
|
|
|
159 </div>
|
|
|
160 -->
|
|
|
161 <!-- PAGE -->
|
|
|
162 <div class="slide">
|
|
|
163 <h1>TreeVNCの設計</h1>
|
|
58
|
164 <table>
|
|
|
165 <tr>
|
|
|
166 <td>
|
|
|
167 <li>木構造での接続</li>
|
|
|
168 <li>クライアントの管理を行うTop Proxyを置く。</li>
|
|
|
169 <li>データは木の下へと流していくようにする。</li>
|
|
|
170 </td>
|
|
|
171 <td>
|
|
57
|
172 <!-- <li>tightVNC ViewerのJava版を元にTreeVNCの実装を行う。</li> -->
|
|
|
173 <p style="text-align: center;">
|
|
|
174 <img class="scale" src="./pix/TreeVNC0.png" width="500" heigth="500">
|
|
|
175 </p>
|
|
58
|
176 </td>
|
|
|
177 </tr>
|
|
|
178 </table>
|
|
57
|
179 </div>
|
|
|
180
|
|
|
181 <!-- PAGE -->
|
|
|
182 <div class="slide">
|
|
|
183 <div class="taninaritop">
|
|
|
184 <h1>木の構成手順</h1>
|
|
|
185 <table class="tanitable">
|
|
|
186 <tr>
|
|
|
187 <td width=50%>
|
|
58
|
188 <center><img class="scale" style="display: block; width: 70%; margin: auto;" src="pix/tree1.png" alt=""></center>
|
|
57
|
189 </td>
|
|
|
190 <td valign="top">
|
|
|
191 <Font size="6">
|
|
58
|
192 ２分木の場合の木の構成について説明する。<br>
|
|
|
193 クライアントは一旦Top Proxyに接続して、自分の接続先をProxyから取得する。<br>
|
|
57
|
194 </td>
|
|
|
195 </tr>
|
|
|
196 </table>
|
|
|
197 </div>
|
|
|
198 </div>
|
|
58
|
199
|
|
|
200 <!-- PAGE -->
|
|
57
|
201 <div class="slide">
|
|
|
202 <div class="taninaritop">
|
|
|
203 <h1>木の構成手順</h1>
|
|
|
204 <table class="tanitable">
|
|
|
205 <tr>
|
|
58
|
206 <td width=50%>
|
|
|
207 <center><img class="scale" style="display: block; width: 70%; margin: auto;" src="pix/tree2.png" alt=""></center>
|
|
57
|
208 </td>
|
|
|
209 <td valign="top" style="display: block; width: 100%; margin: auto;">
|
|
|
210 <Font size="6">
|
|
58
|
211 親を決定する方法はTop Proxyで<br>
|
|
57
|
212 <Font color="red">
|
|
58
|
213 parentNumber = (myNumber - 1) / treeBranch<br>
|
|
57
|
214 </Font>
|
|
58
|
215 を計算してクライアントにどの親に接続すればよいかを知らせる。
|
|
57
|
216 </td>
|
|
|
217 </tr>
|
|
|
218 </table>
|
|
|
219 </div>
|
|
|
220 </div>
|
|
|
221
|
|
58
|
222 <!-- PAGE -->
|
|
|
223 <div class="slide">
|
|
|
224 <div class="taninaritop">
|
|
|
225 <h1>木の構成手順</h1>
|
|
|
226 <table class="tanitable">
|
|
|
227 <tr>
|
|
|
228 <td width=50%>
|
|
|
229 <center><img class="scale" style="display: block; width: 70%; margin: auto;" src="pix/tree3.png" alt=""></center>
|
|
|
230 </td>
|
|
|
231 <td valign="top" style="display: block; width: 100%; margin: auto;">
|
|
|
232 <Font size="6">
|
|
|
233 親を決定する方法はTop Proxyで<br>
|
|
|
234 <Font color="red">
|
|
|
235 parentNumber = (myNumber - 1) / treeBranch<br>
|
|
|
236 </Font>
|
|
|
237 を計算してクライアントにどの親に接続すればよいかを知らせる。
|
|
|
238 </td>
|
|
|
239 </tr>
|
|
|
240 </table>
|
|
|
241 </div>
|
|
|
242 </div>
|
|
57
|
243
|
|
58
|
244 <!-- PAGE -->
|
|
|
245 <div class="slide">
|
|
|
246 <div class="taninaritop">
|
|
|
247 <h1>木の構成手順</h1>
|
|
|
248 <table class="tanitable">
|
|
|
249 <tr>
|
|
|
250 <td width=50%>
|
|
|
251 <center><img class="scale" style="display: block; width: 70%; margin: auto;" src="pix/tree4.png" alt=""></center>
|
|
|
252 </td>
|
|
|
253 <td valign="top" style="display: block; width: 100%; margin: auto;">
|
|
|
254 <Font size="6">
|
|
|
255 親を決定する方法はTop Proxyで<br>
|
|
|
256 <Font color="red">
|
|
|
257 parentNumber = (myNumber - 1) / treeBranch<br>
|
|
|
258 </Font>
|
|
|
259 を計算してクライアントにどの親に接続すればよいかを知らせる。
|
|
|
260 </td>
|
|
|
261 </tr>
|
|
|
262 </table>
|
|
|
263 </div>
|
|
|
264 </div>
|
|
57
|
265
|
|
|
266 <!--PAGE-->
|
|
|
267 <div class="slide">
|
|
|
268 <div class="taninaritop">
|
|
|
269 <h1>木の再構成手順</h1>
|
|
|
270 <table class="tanitable">
|
|
|
271 <tr>
|
|
|
272 <td>
|
|
|
273 <center><img class="scale" src="pix/reconnection1.png" alt=""></center>
|
|
|
274 </td>
|
|
|
275 <td valign="top">
|
|
|
276 <Font size="6">
|
|
58
|
277 クライアント１が落ちたときの説明<br>
|
|
|
278 クライアント１が落ちたとき子供のリーダー(クライアント３)がTop Proxyに親が落ちたことを報告する。<br>
|
|
|
279 Top Proxyからラストノードに対して、落ちたノードの代わりをするように命令が行く。<br>
|
|
57
|
280 </Font>
|
|
|
281 </Font>
|
|
|
282 </td>
|
|
|
283 </tr>
|
|
|
284 </table>
|
|
|
285 </div>
|
|
|
286 </div>
|
|
|
287
|
|
|
288 <!--PAGE-->
|
|
|
289 <div class="slide">
|
|
|
290 <div class="taninaritop">
|
|
|
291 <h1>木の再構成手順</h1>
|
|
|
292 <table class="tanitable">
|
|
|
293 <tr>
|
|
|
294 <td>
|
|
|
295 <center><img class="scale" src="pix/reconnection2.png" alt=""></center>
|
|
|
296 </td>
|
|
|
297 <td valign="top">
|
|
|
298 <Font size="6">
|
|
58
|
299 命令を受けたラストノードが落ちたノードの代わりとなる。<br>
|
|
|
300 子供たちが新しい親に対して接続を行う。
|
|
57
|
301 </Font>
|
|
|
302 </td>
|
|
|
303 </tr>
|
|
|
304 </table>
|
|
|
305 </div>
|
|
|
306 </div>
|
|
|
307
|
|
|
308 <!-- PAGE -->
|
|
|
309 <div class="slide">
|
|
|
310 <h1>TreeVNCの設計</h1>
|
|
|
311 <table class="center" width=100% style="text-align: center;">
|
|
|
312 <tr>
|
|
|
313 <td><small>通常のVNC</small></td>
|
|
|
314 <td><small>TreeVNC</small></td>
|
|
|
315 </tr>
|
|
|
316 <tr>
|
|
|
317 <td>
|
|
|
318 <img class="scale" src="./pix/NormalVNC3.png" width="300">
|
|
|
319 </td>
|
|
|
320 <td>
|
|
|
321 <img src="./pix/TreeVNC3.png" width="300">
|
|
|
322 </td>
|
|
|
323 </tr>
|
|
|
324 </p>
|
|
|
325 </table>
|
|
|
326 <li>クライアントが増えてもかかる負荷一定。</li>
|
|
|
327 <li>通信網1本に対する負荷が減り、安定した通信ができる(有線)。</li>
|
|
|
328 </div>
|
|
|
329 </div>
|
|
|
330 <!-- PAGE -->
|
|
|
331 <div class="slide">
|
|
|
332 <h1>TreeVNCの設計</h1>
|
|
|
333 <table class="center" width=100% style="text-align: center;">
|
|
|
334 <tr>
|
|
|
335 <td><small>通常のVNC</small></td>
|
|
|
336 <td><small>TreeVNC</small></td>
|
|
|
337 </tr>
|
|
|
338 <tr>
|
|
|
339 <td>
|
|
|
340 <img class="scale" src="./pix/NormalVNC3.png" width="300">
|
|
|
341 </td>
|
|
|
342 <td>
|
|
|
343 <img src="./pix/TreeVNC3.png" width="300">
|
|
|
344 </td>
|
|
|
345 </tr>
|
|
|
346 </p>
|
|
|
347 </table>
|
|
|
348 <table class="center" border=1 cellspacing="0" width=100%>
|
|
|
349 <tr>
|
|
|
350 <td></td>
|
|
|
351 <td>通常のVNC</td>
|
|
|
352 <td>TreeVNC</td>
|
|
|
353 </tr>
|
|
|
354 <tr>
|
|
|
355 <td>通信量</td>
|
|
|
356 <td> N*データ量 (クライアントの数に比例) </td>
|
|
|
357 <td> (M+1) * データ量</td>
|
|
|
358 </tr>
|
|
|
359 </table>
|
|
|
360 <p style="text-align: center;"><small>クライアントの数をN、木構造の子供の数をMとする</small> </p>
|
|
|
361 </div>
|
|
|
362 </div>
|
|
|
363
|
|
|
364
|
|
|
365 <!--RFBPROTOCOL説明-->
|
|
|
366
|
|
|
367
|
|
|
368 <!-- PAGE -->
|
|
|
369 <div class="slide">
|
|
|
370 <h1>画像の更新(FramebufferUpdate)</h1>
|
|
|
371 <li>転送される画面(フレームバッファ)のデータは変更があった部分(差分)だけが矩形単位で送られる。</li>
|
|
|
372 <table class="center" width=100%>
|
|
|
373 <tr>
|
|
|
374 <td>
|
|
|
375 <img src="./pix/hadesScreen1.png">
|
|
|
376 </td>
|
|
|
377 <td>
|
|
|
378 <img src="./pix/rightArrow.png">
|
|
|
379 </td>
|
|
|
380 <td>
|
|
|
381 <img src="./pix/hadesScreen2.png">
|
|
|
382 </td>
|
|
|
383 </tr>
|
|
|
384 </table>
|
|
|
385 <small>
|
|
|
386 <p style="text-align: center;"><font color=red>赤枠 </font>で囲まれている矩形のデータだけが送られてくる。 </p>
|
|
|
387 </small>
|
|
|
388 </div>
|
|
|
389 <!-- PAGE -->
|
|
|
390 <div class="slide">
|
|
|
391 <h1>データの転送</h1>
|
|
|
392 <li>クライアントから接続されるとsenderスレッドが作られる。</li>
|
|
|
393 <li>senderスレッドによりデータの転送は並列に行われる。</li>
|
|
|
394 <p class="textcenter">
|
|
|
395 <img src="./pix/MulticastQueue3.png">
|
|
|
396 </p>
|
|
|
397 <li class="incremental">MulticastQueueクラスを用いた並列な転送を行った。</li>
|
|
|
398 </div>
|
|
|
399
|
|
|
400 <!--MulticastQueueが必要になった経緯-->
|
|
|
401 <div class="slide">
|
|
|
402 <h1>MulticastQueue</h1>
|
|
|
403 <li>クライアントは、自分のペースでデータを読み込みたい。</li>
|
|
|
404 <li></li>
|
|
|
405 <li class="incremental">TreeVNCではVNCサーバとの接続はこのZRLEを扱う。</li>
|
|
|
406 </div>
|
|
|
407
|
|
|
408 <!-- PAGE -->
|
|
|
409 <div class="slide">
|
|
|
410 <h1>MulticastQueue</h1>
|
|
|
411 <table class="textcenter" style="margin-top: 50px" width=100% border=1 cellspacing="0">
|
|
|
412 <tr>
|
|
|
413 <td>
|
|
|
414 <img src="./pix/MulticastQueue_proxy2.png" width="600">
|
|
|
415 </td>
|
|
|
416 <td style="text-align: left;" width=50%>
|
|
|
417 <li>putでデータの入力</li>
|
|
|
418 <li>pollでデータの取り出し</li>
|
|
|
419 <li>Proxyは常に最新のデータの参照を渡す</li>
|
|
|
420 </td>
|
|
|
421 </tr>
|
|
|
422 <tr>
|
|
|
423 <td width=50%>
|
|
|
424 <img src="./pix/MulticastQueue_proxy3.png" width="600">
|
|
|
425 </td>
|
|
|
426 <td style="text-align: left;">
|
|
|
427 <li>クライアントは最新のデータから読み込み始める。</li>
|
|
|
428 </td>
|
|
|
429 </tr>
|
|
|
430 </table>
|
|
|
431 </div>
|
|
|
432 <!-- PAGE -->
|
|
|
433 <div class="slide">
|
|
|
434 <h1>MulticastQueueの問題点</h1>
|
|
|
435 <li>クライアントがデータを読み込まない時...
|
|
|
436 <table class="textcenter" width=100% style="margin-top: 50px; margin-bottom: 50px;">
|
|
|
437 <tr>
|
|
|
438 <td width=50%>
|
|
|
439 <img src="./pix/MCTimeOut1.png">
|
|
|
440 </td>
|
|
|
441 <td>
|
|
|
442 <img src="./pix/MCTimeOut2.png">
|
|
|
443 </td>
|
|
|
444 </tr>
|
|
|
445 </table>
|
|
|
446 <li>読み込まれないデータはProxyのメモリに残り続ける。</li>
|
|
|
447 </div>
|
|
|
448 <!-- PAGE -->
|
|
|
449 <div class="slide">
|
|
|
450 <h1>MulticastQueueの問題点</h1>
|
|
|
451 <li>TimeOut(TO)スレッドを走らせ、最新のデータから取得できるようする。</li>
|
|
|
452 <table class="textcenter" width=100% style="margin-top: 50px; margin-bottom: 50px;">
|
|
|
453 <tr>
|
|
|
454 <td width=50%>
|
|
|
455 <img src="./pix/MCTimeOut3.png">
|
|
|
456 </td>
|
|
|
457 <td>
|
|
|
458 <img src="./pix/MCTimeOut4.png">
|
|
|
459 </td>
|
|
|
460 </tr>
|
|
|
461 </table>
|
|
|
462 <li>どこからも参照されないデータはProxyのメモリから削除される。</li>
|
|
|
463 </div>
|
|
|
464 <!-- PAGE -->
|
|
|
465 <div class="slide">
|
|
|
466 <h1>エンコード</h1>
|
|
|
467 <li>MAC OS XではZRLEを使ってVNCを行うことができる</li>
|
|
|
468 <li>ZRLEはデータ量がRAWデータの約4分の1ですむ。</li>
|
|
|
469 <li class="incremental">TreeVNCではVNCサーバとの接続はこのZRLEを扱う。</li>
|
|
|
470 </div>
|
|
|
471 <!-- PAGE -->
|
|
|
472 <div class="slide">
|
|
|
473 <h1>ZRLE</h1>
|
|
|
474 <li>ZRLE : Zlib Run-Length Encoding </li>
|
|
|
475 <ul>
|
|
|
476 <li>Zlib圧縮(gzip)されたデータ扱うエンコーディング。</li>
|
|
|
477 </ul>
|
|
|
478 <li>最初の4バイトにはZlibのデータの長さが、続いてZlibのデータが送られてくる。</li>
|
|
|
479 <small>
|
|
|
480 <table border=1 width=50% cellspacing="0">
|
|
|
481 <tr>
|
|
|
482 <td>バイト数</td>
|
|
|
483 <td><pre>型 </pre></td>
|
|
|
484 <td>説明 </td>
|
|
|
485 </tr>
|
|
|
486 <tr>
|
|
|
487 <td>4</td>
|
|
|
488 <td>U32</td>
|
|
|
489 <td>length</td>
|
|
|
490 </tr>
|
|
|
491 <tr>
|
|
|
492 <td>length</td>
|
|
|
493 <td>U8 array</td>
|
|
|
494 <td>ZlibData</td>
|
|
|
495 </tr>
|
|
|
496 </table>
|
|
|
497 </small>
|
|
|
498 <li class="incremental">Zlibデータは辞書を元にデータの解凍を行う</li>
|
|
|
499 <li class="incremental">辞書がなければデータを正しく解凍できない</li>
|
|
|
500 </div>
|
|
|
501 <!-- PAGE -->
|
|
|
502 <div class="slide">
|
|
|
503 <h1>ZRLEE</h1>
|
|
|
504 <li>そこで、ProxyがZRLEを使ってデータを受け取り圧縮し直して木の下へ流していくことにした。</li>
|
|
|
505 <li><small>この圧縮し直したデータはZRLEEと名付けた。</small></li>
|
|
|
506 <table class="textcenter" width=100%>
|
|
|
507 <tr>
|
|
|
508 <td>
|
|
|
509 <img src="./pix/ZRLEE2.png" width="600">
|
|
|
510 </td>
|
|
|
511 <td>
|
|
|
512 <img src="./pix/ZRLEE3.png" width="600">
|
|
|
513 </td>
|
|
|
514 </tr>
|
|
|
515 </table>
|
|
|
516 </div>
|
|
|
517 <!-- PAGE -->
|
|
|
518 <div class="slide">
|
|
|
519 <h1>ZRLEEの疑問点</h1>
|
|
|
520 <li>ZRLEEには毎回辞書が付与されている。</li>
|
|
|
521 <p class="textcenter">
|
|
|
522 <img src="./pix/ZRLEE2.png" width="600">
|
|
|
523 </p>
|
|
|
524 <li class="incremental">ZRLEに比べるとデータ量は増えないのか...?</li>
|
|
|
525 <li class="incremental">-> ZRLEと比較してみるとデータ量は少なくなった。</li>
|
|
|
526 </div>
|
|
|
527 <!-- PAGE -->
|
|
|
528 <div class="slide">
|
|
|
529 <h1>ZRLEEのデータ量</h1>
|
|
|
530 <p style="text-align: center;">
|
|
|
531 <small>1920*1080の描画にかかったデータ量</small>
|
|
|
532 </p>
|
|
|
533 <table class="textcenter" width=100%>
|
|
|
534 <tr>
|
|
|
535 <td width=50%>
|
|
|
536 <img src="./pix/dataLength.png" width="450" heigth="325">
|
|
|
537 </td>
|
|
|
538 <td>
|
|
|
539 <table border=1 cellspacing="0" width=100%>
|
|
|
540 <tr>
|
|
|
541 <td></td>
|
|
|
542 <td>ZRLE</td>
|
|
|
543 <td>ZRLEE</td>
|
|
|
544 </tr>
|
|
|
545 <tr>
|
|
|
546 <td>データ量</td>
|
|
|
547 <td>3.4M</td>
|
|
|
548 <td>3.2M</td>
|
|
|
549 </tr>
|
|
|
550 </table>
|
|
|
551 </td>
|
|
|
552 </tr>
|
|
|
553 </table>
|
|
|
554 <li>ZRLEよりデータ量が多くなるどころか少ない。</li>
|
|
|
555 <li>原因</li>
|
|
|
556 <ul>
|
|
|
557 <li>ZRLEEは送られるデータ毎で最適な辞書が使われる。</li>
|
|
|
558 </ul>
|
|
|
559 </div>
|
|
|
560
|
|
|
561
|
|
|
562 <!-- PAGE -->
|
|
|
563 <div class="slide">
|
|
|
564 <h1>データ転送量</h1>
|
|
|
565 <p style="text-align: center;">
|
|
|
566 <small>矩形の大きさと描画に必要なデータ量(単位:Byte)</small>
|
|
|
567 </p>
|
|
|
568 <table class="center" border=1 cellspacing="0" width=80%>
|
|
|
569 <tr>
|
|
|
570 <td>矩形の大きさ \ エンコード</td>
|
|
|
571 <td>RAW</td>
|
|
|
572 <td>ZRLE</td>
|
|
|
573 </tr>
|
|
|
574
|
|
|
575 <tr>
|
|
|
576 <td>724 * 449</td>
|
|
|
577 <!--
|
|
|
578 <td>1300304</td>
|
|
|
579 <td>796642</td>
|
|
|
580 -->
|
|
|
581 <td>1.3M</td>
|
|
|
582 <td>0.8M</td>
|
|
|
583 </tr>
|
|
|
584
|
|
|
585 <tr>
|
|
|
586 <td>1920 * 64</td>
|
|
|
587 <!--
|
|
|
588 <td>491520</td>
|
|
|
589 <td>309602</td>
|
|
|
590 -->
|
|
|
591 <td>0.5M</td>
|
|
|
592 <td>0.15M</td>
|
|
|
593 </tr>
|
|
|
594
|
|
|
595 <tr>
|
|
|
596 <td>1920 * 1080</td>
|
|
|
597 <!--
|
|
|
598 <td>8294400</td>
|
|
|
599 <td>3472780</td>
|
|
|
600 -->
|
|
|
601 <td>8.2M</td>
|
|
|
602 <td>3.4M</td>
|
|
|
603 </tr>
|
|
|
604
|
|
|
605 </table>
|
|
|
606
|
|
|
607 <p style="text-align: center;">
|
|
|
608 <img src="./pix/dataLength.png" width="450" heigth="325"> <br>
|
|
|
609 <small>RAW、ZRLE、ZRLEEエンコードのデータ量の比較</small>
|
|
|
610 </p>
|
|
|
611 </div>
|
|
|
612 <!-- PAGE -->
|
|
|
613 <div class="slide">
|
|
|
614 <h1>既存のプログラムとの比較</h1>
|
|
|
615 <li>VNC Reflector</li>
|
|
|
616 <ul>
|
|
|
617 <li>tightVNCの作者が作成したプログラム</li>
|
|
|
618 <li>VNC Reflecotrにクライアントが接続することでVNCを行うことができる</li>
|
|
|
619 </ul>
|
|
|
620 </div>
|
|
|
621 <!-- PAGE -->
|
|
|
622 <!-- PAGE -->
|
|
|
623 <div class="slide">
|
|
|
624 <h1>質問タイム</h1>
|
|
|
625 </div>
|
|
|
626 </body>
|
|
|
627 </html>
|
