Mercurial > hg > Papers > 2009 > gongo-master

comparison presen/presen.html @ 28:356077fb1c38

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
add resume
author gongo@gendarme.cr.ie.u-ryukyu.ac.jp
date Tue, 17 Feb 2009 12:27:00 +0900
parents 90128e098120
children
comparison
equal deleted inserted replaced
27:90128e098120 28:356077fb1c38
522 <li>データの分割<ul> 522 <li>データの分割<ul>
523 <li>分割できるデータ構造の採用が必要となる</li> 523 <li>分割できるデータ構造の採用が必要となる</li>
524 </ul> 524 </ul>
525 </li> 525 </li>
526 </ul> 526 </ul>
527 <p>二つの分割は自明には行えず、工夫が必要</p> 527 <p>二つの分割は自明には行えないことが多いため、工夫が必要</p>
528 </div> 528 </div>
529 <div class="slide" id="id7"> 529 <div class="slide" id="id7">
530 <h1>Many Core の同期</h1> 530 <h1>Many Core の同期</h1>
531 <dl class="docutils"> 531 <dl class="docutils">
532 <dt><strong>同期</strong></dt> 532 <dt><strong>同期</strong></dt>
535 <ul class="simple"> 535 <ul class="simple">
536 <li>他の CPU と干渉するデータ入出力の場合、待ち合わせる必要がある<ul> 536 <li>他の CPU と干渉するデータ入出力の場合、待ち合わせる必要がある<ul>
537 <li>待ち時間が無駄になる</li> 537 <li>待ち時間が無駄になる</li>
538 </ul> 538 </ul>
539 </li> 539 </li>
540 <li>データ待ちの為にストップする状態を減らす</li>
540 </ul> 541 </ul>
541 <div align="center"> 542 <div align="center">
542 &darr; 543 &darr;
543 </div><ul class="simple"> 544 </div><ul class="simple">
544 <li>データ待ちの為にストップする状態を減らす</li>
545 <li>各 CPU が独立に (ロック無しで) データにアクセスできる様にデータを分割すれば良い</li> 545 <li>各 CPU が独立に (ロック無しで) データにアクセスできる様にデータを分割すれば良い</li>
546 </ul> 546 </ul>
547 </div> 547 </div>
548 <div class="slide" id="id8"> 548 <div class="slide" id="id8">
549 <h1>並列プログラムの開発行程</h1> 549 <h1>並列プログラムの開発行程</h1>
573 <ol class="arabic simple" start="4"> 573 <ol class="arabic simple" start="4">
574 <li>分割したコードを並列実行する実装</li> 574 <li>分割したコードを並列実行する実装</li>
575 <li>アーキテクチャに特化した実装</li> 575 <li>アーキテクチャに特化した実装</li>
576 </ol> 576 </ol>
577 <ul class="simple"> 577 <ul class="simple">
578 <li>SIMD</li> 578 <li>Cell の場合は SIMD</li>
579 </ul> 579 </ul>
580 <p>4、5段階目でエラーが出た場合、一度 3. まで戻って 580 <p>4、5段階目でエラーが出た場合、一度 3. まで戻って
581 アルゴリズム、データ構造、プログラムの分割を確認する</p> 581 データ構造、プログラムの分割を確認する</p>
582 </div> 582 </div>
583 <div class="slide" id="task-manager"> 583 <div class="slide" id="task-manager">
584 <h1>Task Manager の実装</h1> 584 <h1>Task Manager の実装</h1>
585 <ul class="simple"> 585 <ul class="simple">
586 <li><span class="text-silver">Cell アーキテクチャの概要</span></li> 586 <li><span class="text-silver">Cell アーキテクチャの概要</span></li>
594 <div class="slide" id="id10"> 594 <div class="slide" id="id10">
595 <h1>Task Manager</h1> 595 <h1>Task Manager</h1>
596 <table> 596 <table>
597 <tr> 597 <tr>
598 <td><p>Task と呼ばれる、分割された各プログラムを管理する</p> 598 <td><p>Task と呼ばれる、分割された各プログラムを管理する</p>
599 <ul class="simple"> 599 <ul>
600 <li>Task はサブルーチンもしくは関数</li> 600 <li><p class="first">Task はサブルーチン</p>
601 <li>Task 同士の依存関係を考慮</li> 601 </li>
602 <li>実行状態になった Task を各 SPE に割り振る</li> 602 <li><p class="first">Task 同士の依存関係を考慮</p>
603 </ul> 603 </li>
604 <p class="small">Task Manager User API</p> 604 <li><p class="first">実行状態になった Task を各 SPE に割り振る</p>
605 </li>
606 <li><p class="first">C++ で実装</p>
607 <p><span class="text-maroon">Task Manager User API</span></p>
608 </li>
609 </ul>
605 <table border="1" class="small docutils"> 610 <table border="1" class="small docutils">
606 <colgroup> 611 <colgroup>
607 <col width="100%" /> 612 <col width="100%" />
608 </colgroup> 613 </colgroup>
609 <tbody valign="top"> 614 <tbody valign="top">
612 <dd>Task の生成</dd> 617 <dd>Task の生成</dd>
613 </dl> 618 </dl>
614 </td> 619 </td>
615 </tr> 620 </tr>
616 <tr><td><dl class="first last docutils"> 621 <tr><td><dl class="first last docutils">
617 <dt>void* TaskManager::allocate</dt> 622 <dt>void* TaskManager::allocate(int size)</dt>
618 <dd>実行環境のアライメントを考慮した allocator</dd> 623 <dd>実行環境のアライメントを考慮した allocator</dd>
619 </dl> 624 </dl>
620 </td> 625 </td>
621 </tr> 626 </tr>
622 </tbody> 627 </tbody>
623 </table> 628 </table>
624 </td> 629 </td>
625 <td><p class="small">Task API</p> 630 <td align="center"><p><span class="text-maroon">Task API</span></p>
626 <table border="1" class="small docutils"> 631 <table border="1" class="small docutils">
627 <colgroup> 632 <colgroup>
628 <col width="100%" /> 633 <col width="100%" />
629 </colgroup> 634 </colgroup>
630 <tbody valign="top"> 635 <tbody valign="top">
653 </td> 658 </td>
654 </tr> 659 </tr>
655 <tr><td><dl class="first last docutils"> 660 <tr><td><dl class="first last docutils">
656 <dt>task-&gt;set_cpu(CPU_TYPE type);</dt> 661 <dt>task-&gt;set_cpu(CPU_TYPE type);</dt>
657 <dd>Task を実行する CPU の設定</dd> 662 <dd>Task を実行する CPU の設定</dd>
663 </dl>
664 </td>
665 </tr>
666 <tr><td><dl class="first last docutils">
667 <dt>task-&gt;spawn(void);</dt>
668 <dd><p class="first">task を ActiveQueue へ格納する</p>
669 <p class="last">TaskManager は ActiveQueue にある task を
670 SPE へ割り振る</p>
671 </dd>
658 </dl> 672 </dl>
659 </td> 673 </td>
660 </tr> 674 </tr>
661 </tbody> 675 </tbody>
662 </table> 676 </table>
674 <dl class="docutils"> 688 <dl class="docutils">
675 <dt>Task ID</dt> 689 <dt>Task ID</dt>
676 <dd>各タスクに割り振られているグローバルID</dd> 690 <dd>各タスクに割り振られているグローバルID</dd>
677 </dl> 691 </dl>
678 <ul class="simple"> 692 <ul class="simple">
693 <li>逐次型プログラムでは、Task に関数ポインタを持たせれば良い</li>
679 <li>PPE と SPE ではアドレス空間が異なるため、 694 <li>PPE と SPE ではアドレス空間が異なるため、
680 単純に関数ポインタを持たせても意味が無い</li> 695 単純に関数ポインタを持たせても意味が無い</li>
681 <li>予め SPE 上の領域に置いてある Task (関数) を選択して実行するために 696 <li>予め SPE 上の領域に置いてある Task (関数) を選択して実行するために
682 ID を指定する</li> 697 ID を指定する</li>
683 <li>HTask が持つのは、SPE 上にある Task を実行するための情報</li> 698 <li>HTask が持つのは、SPE 上にある Task を実行するための情報</li>
684 </ul> 699 </ul>
685 <dl class="docutils">
686 <dt><strong>spawn()</strong></dt>
687 <dd><p class="first">Task を TaskManager が持つ ActiveQueue へ渡す</p>
688 <ul class="last simple">
689 <li>TaskManager は ActiveQueue から Task を取り出し、各 SPE へ割り振る</li>
690 </ul>
691 </dd>
692 </dl>
693 </div> 700 </div>
694 <div class="slide" id="id11"> 701 <div class="slide" id="id11">
695 <h1>Task の依存関係の解決</h1> 702 <h1>Task の依存関係の解決</h1>
696 <p>TaskManager はタスク依存を解決する機能をもつ</p> 703 <p>TaskManager はタスク依存を解決する機能をもつ</p>
697 <pre class="literal-block"> 704 <pre class="small literal-block">
698 /* task2 は task1、task3 の終了を待つ */ 705 /* task2 は task1、task3 の終了を待つ */
699 task2-&gt;wait_for(task1); 706 task2-&gt;wait_for(task1);
700 task2-&gt;wait_for(task3); 707 task2-&gt;wait_for(task3);
701 708
702 /* HTask が持つ依存関係の変数 */ 709 /* Task が持つ依存関係の変数 */
703 TaskQueuePtr wait_me; // List of task waiting for me 710 TaskQueuePtr wait_me; // List of task waiting for me
704 TaskQueuePtr wait_i; // List of task for which I am waiting 711 TaskQueuePtr wait_i; // List of task for which I am waiting
705 </pre> 712 </pre>
706 <div align="center" class="align-center"><img alt="images/tm_task_depend.jpg" class="align-center" src="images/tm_task_depend.jpg" style="width: 450px;" /></div> 713 <div align="center" class="align-center"><img alt="images/tm_task_depend.jpg" class="align-center" src="images/tm_task_depend.jpg" style="width: 430px;" /></div>
707 </div> 714 </div>
708 <div class="slide" id="task-cpu"> 715 <div class="slide" id="task-cpu">
709 <h1>Task を実行させる CPU の選択</h1> 716 <h1>Task を実行させる CPU の選択</h1>
710 <p>Task をどの CPU で実行させるかを明示的に選択できる</p> 717 <p>Task をどの CPU で実行させるかを明示的に選択できる</p>
711 <pre class="literal-block"> 718 <pre class="literal-block">
720 </pre> 727 </pre>
721 <ul class="simple"> 728 <ul class="simple">
722 <li>PPE 内でもタスクの実行が可能</li> 729 <li>PPE 内でもタスクの実行が可能</li>
723 <li>Mac OS X や Linux で実行する場合、SPE_* を指定したタスクは 730 <li>Mac OS X や Linux で実行する場合、SPE_* を指定したタスクは
724 そのままメインスレッドで実行される</li> 731 そのままメインスレッドで実行される</li>
725 <li>環境依存のプログラム変換はタスク内部だけでよい</li> 732 <li>違う環境へプログラムを移行する場合<ul>
733 <li>set_cpu で実行 CPU を変更する、もしくはそのままでもよい</li>
734 <li>環境依存のプログラム変換はタスク内部だけになる</li>
735 </ul>
736 </li>
726 </ul> 737 </ul>
727 </div> 738 </div>
728 <div class="slide" id="cpu"> 739 <div class="slide" id="cpu">
729 <h1>CPU スレッドスケジューラ</h1> 740 <h1>CPU スレッドスケジューラ</h1>
730 <table> 741 <table>
740 </td> 751 </td>
741 </tr> 752 </tr>
742 </table></div> 753 </table></div>
743 <div class="slide" id="id12"> 754 <div class="slide" id="id12">
744 <h1>メインスレッドと CPU スレッド間の同期</h1> 755 <h1>メインスレッドと CPU スレッド間の同期</h1>
745 <table> 756 <ul>
746 <tr> 757 <li><p class="first">同期は 32 ビットメッセージの交換 (Mailbox) により行う</p>
747 <td><img src="images/tm_sync.jpg" width="370px"></td> 758 </li>
748 <td><ul class="simple"> 759 <li><p class="first">同期のタイミング</p>
749 <li>同期は 32 ビットメッセージの交換 (Mailbox) により行う</li> 760 <p><span class="text-maroon">SPE -&gt; PPE</span></p>
750 <li>スレッド間の待ち合わせは起こらない</li> 761 <ul class="simple">
751 </ul> 762 <li>タスクの終了</li>
752 <p>Task Manager がもつ Thread</p> 763 <li>新しい TaskList のリクエスト</li>
753 <ul class="simple"> 764 </ul>
754 <li>PPE スレッド</li> 765 <p><span class="text-maroon">PPE -&gt; SPE</span></p>
755 <li>SPE スレッド</li> 766 <ul class="simple">
756 <li>SPE の起動、終了を見る Frontend スレッド</li> 767 <li>新しい TaskList の送信</li>
757 <li>SPE からの Mail を監視する Mail スレッド</li> 768 </ul>
758 </ul> 769 </li>
759 </td> 770 <li><p class="first">メッセージ交換なので、スレッド間の待ち合わせは起こらない</p>
760 </tr> 771 </li>
761 </table></div> 772 </ul>
773 </div>
762 <div class="slide" id="bitonic-sort"> 774 <div class="slide" id="bitonic-sort">
763 <h1>例題 Bitonic Sort</h1> 775 <h1>例題 Bitonic Sort</h1>
764 <p>Task Manager を用いて、学生が記述</p> 776 <p>Task Manager を用いて、学生が記述</p>
765 <div align="center" class="align-center"><img alt="images/tm_sort.jpg" class="align-center" src="images/tm_sort.jpg" style="width: 350px;" /></div> 777 <div align="center" class="align-center"><img alt="images/tm_sort.jpg" class="align-center" src="images/tm_sort.jpg" style="width: 350px;" /></div>
766 <ul class="simple"> 778 <ul class="simple">
812 </li> 824 </li>
813 </ul> 825 </ul>
814 </div> 826 </div>
815 <div class="slide" id="scene-graph"> 827 <div class="slide" id="scene-graph">
816 <h1>Scene Graph</h1> 828 <h1>Scene Graph</h1>
817 <div align="center" class="align-center"><img alt="images/cerium_sg_tree.jpg" class="align-center" src="images/cerium_sg_tree.jpg" style="width: 400px;" /></div> 829 <div align="center" class="align-center"><img alt="images/cerium_sg_tree.jpg" class="align-center" src="images/cerium_sg_tree.jpg" style="width: 95%;" /></div>
818 <ul class="simple"> 830 <ul class="simple">
819 <li>Blender <a class="footnote-reference" href="#id16" id="id15" name="id15">[1]</a> で生成したオブジェクトを 独自の XML 形式で出力</li> 831 <li>Blender <a class="footnote-reference" href="#id16" id="id15" name="id15">[1]</a> で生成したオブジェクトを 独自の XML 形式で出力</li>
820 <li>XML が持つ情報 (頂点座標、テクスチャ座標、イメージなど) から 832 <li>XML が持つ情報 (頂点座標、テクスチャ座標、イメージなど) から
821 SceneGraphNode を生成</li> 833 SceneGraphNode を生成</li>
822 <li>ポリゴン情報の他に、オブジェクトの操作(move, collision) を持つ</li> 834 <li>ポリゴン情報の他に、オブジェクトの操作(move, collision) を持つ</li>
835 <td><div align="center" class="align-center"><img alt="images/rendering.jpg" class="align-center" src="images/rendering.jpg" style="width: 400px;" /></div> 847 <td><div align="center" class="align-center"><img alt="images/rendering.jpg" class="align-center" src="images/rendering.jpg" style="width: 400px;" /></div>
836 </td> 848 </td>
837 <td><dl class="docutils"> 849 <td><dl class="docutils">
838 <dt>SG2PP</dt> 850 <dt>SG2PP</dt>
839 <dd>SceneGraph を操作後、ポリゴンに変換し PolygonPack (ポリゴンの集合)を生成する</dd> 851 <dd>SceneGraph を操作後、ポリゴンに変換し PolygonPack (ポリゴンの集合)を生成する</dd>
840 <dt>PP2SG</dt> 852 <dt>PP2SP</dt>
841 <dd>ポリゴンの中から、Span (ポリゴン内にあるx軸に水平な線分) を抽出し、 853 <dd>ポリゴンの中から、Span (ポリゴン内にあるx軸に水平な線分) を抽出し、
842 SpanPack (Span の集合)を生成する</dd> 854 SpanPack (Span の集合)を生成する</dd>
843 <dt>DrawSpan</dt> 855 <dt>DrawSpan</dt>
844 <dd>Span を使って 1 ラインずつ FrameBuffer に描画していく</dd> 856 <dd>Span を使って 1 ラインずつ FrameBuffer に描画していく</dd>
845 </dl> 857 </dl>
846 </td> 858 </td>
847 </tr> 859 </tr>
848 </table></div> 860 </table></div>
849 <div class="slide" id="rendering-task"> 861 <div class="slide" id="rendering-task">
850 <h1>Rendering Task のパイプライン</h1> 862 <h1>Rendering Task のパイプライン</h1>
851 <div align="center" class="align-center"><img alt="images/rendering_pipeline.jpg" class="align-center" src="images/rendering_pipeline.jpg" style="width: 350px;" /></div> 863 <div align="center" class="align-center"><img alt="images/rendering_pipeline.jpg" class="align-center" src="images/rendering_pipeline.jpg" style="width: 80%; height: 165px;" /></div>
852 <p>レンダリングはフレームが進む毎に全画面更新する</p> 864 <p>レンダリングはフレームが進む毎に全画面更新する</p>
853 <dl class="docutils"> 865 <dl class="docutils">
854 <dt><strong>フレーム</strong></dt> 866 <dt><strong>フレーム</strong></dt>
855 <dd>演算や描画の処理 1ループの間隔</dd> 867 <dd>演算や描画の処理 1ループの間隔</dd>
856 </dl> 868 </dl>
875 </li> 887 </li>
876 </ul> 888 </ul>
877 </div> 889 </div>
878 <div class="slide" id="id18"> 890 <div class="slide" id="id18">
879 <h1>ゲームの実行結果(速度検証)</h1> 891 <h1>ゲームの実行結果(速度検証)</h1>
880 <div align="center"><p class="small">ポリゴン数</p> 892 <table width="95%">
893 <tr>
894 <td align="center"><p class="small">ポリゴン数</p>
881 <table border="1" class="small docutils"> 895 <table border="1" class="small docutils">
882 <colgroup> 896 <colgroup>
883 <col width="56%" /> 897 <col width="56%" />
884 <col width="44%" /> 898 <col width="44%" />
885 </colgroup> 899 </colgroup>
889 </tr> 903 </tr>
890 <tr><td>敵機</td> 904 <tr><td>敵機</td>
891 <td>44</td> 905 <td>44</td>
892 </tr> 906 </tr>
893 <tr><td>背景</td> 907 <tr><td>背景</td>
894 <td>6</td> 908 <td>2</td>
895 </tr> 909 </tr>
896 </tbody> 910 </tbody>
897 </table> 911 </table>
898 <p class="small">Mac OS X 以外は Frame Buffer へ直接出力</p> 912 <p class="small">Mac OS X 以外は Frame Buffer へ直接出力</p>
899 <p class="small">Mac OS X は SDL 経由で出力している</p> 913 <p class="small">Mac OS X は SDL 経由で出力している</p>
900 <table border="1" class="small docutils"> 914 </td>
915 <td><table border="1" class="docutils">
901 <colgroup> 916 <colgroup>
902 <col width="40%" /> 917 <col width="40%" />
903 <col width="60%" /> 918 <col width="60%" />
904 </colgroup> 919 </colgroup>
905 <tbody valign="top"> 920 <tbody valign="top">
918 <tr><td>PS3 SPE 6 個</td> 933 <tr><td>PS3 SPE 6 個</td>
919 <td><span class="text-maroon">29.3 FPS</span></td> 934 <td><span class="text-maroon">29.3 FPS</span></td>
920 </tr> 935 </tr>
921 </tbody> 936 </tbody>
922 </table> 937 </table>
923 </div><ul class="simple"> 938 </td>
939 </tr>
940 </table><ul class="simple">
924 <li>SPE ６個で 1 個のものより 3.6 倍</li> 941 <li>SPE ６個で 1 個のものより 3.6 倍</li>
925 <li>現状<ul> 942 <li>現状<ul>
926 <li>SceneGraph の演算を SPE で行っていない</li> 943 <li>SceneGraph の演算を SPE で行っていない</li>
927 <li>SPE での処理に SIMD 演算を組み込んでいない</li> 944 <li>SPE での処理に SIMD 演算を組み込んでいない</li>
928 </ul> 945 </ul>
981 <li>出力解像度は 1920x1080</li> 998 <li>出力解像度は 1920x1080</li>
982 <li>地球のテクスチャを貼った球体のオブジェクトを表示</li> 999 <li>地球のテクスチャを貼った球体のオブジェクトを表示</li>
983 </ul> 1000 </ul>
984 </li> 1001 </li>
985 </ul> 1002 </ul>
986 <div align="center" class="align-center"><img alt="images/com_gallium.jpg" class="align-center" src="images/com_gallium.jpg" style="width: 350px;" /></div> 1003 <table width="90%">
987 <div align="center"> 1004 <tr>
988 ポリゴン数 : 1984<table border="1" class="small docutils"> 1005 <td><div align="center" class="align-center"><img alt="images/com_gallium.jpg" class="align-center" src="images/com_gallium.jpg" style="width: 350px;" /></div>
1006 </td>
1007 <td align="center"><p class="small">ポリゴン数 : 1984</p>
1008 <table border="1" class="small docutils">
989 <colgroup> 1009 <colgroup>
990 <col width="55%" /> 1010 <col width="55%" />
991 <col width="45%" /> 1011 <col width="45%" />
992 </colgroup> 1012 </colgroup>
993 <tbody valign="top"> 1013 <tbody valign="top">
1000 <tr><td>Cerium (SPE 6 個)</td> 1020 <tr><td>Cerium (SPE 6 個)</td>
1001 <td><span class="text-maroon">9.5 FPS</span></td> 1021 <td><span class="text-maroon">9.5 FPS</span></td>
1002 </tr> 1022 </tr>
1003 </tbody> 1023 </tbody>
1004 </table> 1024 </table>
1005 </div><ul class="simple"> 1025 </td>
1026 </tr>
1027 </table><ul class="simple">
1006 <li>Gallium には OpenGL API の機能が全て乗っているわけではない</li> 1028 <li>Gallium には OpenGL API の機能が全て乗っているわけではない</li>
1007 <li>Cerium とのレンダリングの機能の違い<ul> 1029 <li>Cerium とのレンダリングの機能の違い<ul>
1008 <li>光源、アルファブレンディング、etc..</li> 1030 <li>光源、アルファブレンディング、etc..</li>
1009 </ul> 1031 </ul>
1010 </li> 1032 </li>
1016 <dl class="docutils"> 1038 <dl class="docutils">
1017 <dt>OpenGL</dt> 1039 <dt>OpenGL</dt>
1018 <dd>オープンソースの3Dグラフィックスプログラムインターフェース</dd> 1040 <dd>オープンソースの3Dグラフィックスプログラムインターフェース</dd>
1019 </dl> 1041 </dl>
1020 <ul class="simple"> 1042 <ul class="simple">
1021 <li>変換行列、光源、カメラなどの API</li> 1043 <li>変換行列、光源、カメラなどの API を実装</li>
1022 <li>親子関係の表現も可能</li> 1044 <li>親子関係の表現も可能</li>
1023 </ul> 1045 </ul>
1024 <p>Cerium での OpenGL の使用の問題</p> 1046 <p>Cerium での OpenGL の使用の問題</p>
1025 <ul class="simple"> 1047 <ul class="simple">
1026 <li>SceneGraph の OpenGL の API にあわせるオーバーヘッド</li> 1048 <li>SceneGraph の OpenGL の API にあわせるオーバーヘッド</li>
1092 <ul class="simple"> 1114 <ul class="simple">
1093 <li>SceneGraph の SPE 上での実行</li> 1115 <li>SceneGraph の SPE 上での実行</li>
1094 <li>SIMD 演算の使用、もしくはそれに適したデータ構造の採用</li> 1116 <li>SIMD 演算の使用、もしくはそれに適したデータ構造の採用</li>
1095 <li>プログラムコードの SPE 上での On demand Load<ul> 1117 <li>プログラムコードの SPE 上での On demand Load<ul>
1096 <li>現在は予めコードを全て置いておく必要がある</li> 1118 <li>現在は予めコードを全て置いておく必要がある</li>
1119 <li>SPE のメモリ領域 (256KB) を考えると好ましくない</li>
1097 </ul> 1120 </ul>
1098 </li> 1121 </li>
1099 <li>レンダリングの機能の追加<ul> 1122 <li>レンダリングの機能の追加<ul>
1100 <li>Z-sort</li>
1101 <li>アルファブレンディング</li> 1123 <li>アルファブレンディング</li>
1102 <li>光源</li> 1124 <li>光源</li>
1103 </ul> 1125 <li>Z-sort</li>
1104 </li> 1126 </ul>
1105 </ul> 1127 </li>
1128 </ul>
1129 </div>
1130 <div class="slide" id="id23">
1131 <h1>終</h1>
1106 </div> 1132 </div>
1107 </div> 1133 </div>
1108 </body> 1134 </body>
1109 </html> 1135 </html>