index.html

﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>向量圖形非寫實電腦計算繪製</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.lp.css">
	<link rel="stylesheet" type="text/css" href="css/landing-page.css">
	<link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic">
	<link rel="stylesheet" type="text/css" href="css/styleTest.css">
</head>

<body>
	<!----------------------------------- Dividing line----------------------------------------------------->
	
	<!-- Navigation -->
    <nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
        <div class="container topnav">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <a class="navbar-brand topnav" href="https://myweb.ntut.edu.tw/~tjhsieh/">
                ♪ 國立臺北科技大學 ♪ 資訊工程系 ♪ 計算機圖學實驗室 ♪</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="#top">回頂端</a>
                    </li>
					<li>
                        <a href="#demo1">摘要</a>
                    </li>
					<li>
                        <a href="#demo2">引用文獻</a>
                    </li>
                    <li>
                        <a href="#demo3">系統使用示範</a>
                    </li>
                    <li>
                        <!-- <a href="result_display.html" target="_blank">實驗結果</a> -->
                        <a href="#demo4">實驗結果</a>
                    </li>
					
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>


    <!-- Header -->
    <a name="top"></a>
    <div class="intro-header">
        <div class="container" style="height:350px;">

            <div class="row">
                <div class="col-lg-12" style="height:300px;">
                    <div class="intro-message" style="position: relative;padding-top: 0%;padding-bottom: 70%;">
                        <h1>向量圖形非寫實電腦計算繪製</h1>
                        <h2>
                            Vector Graphics Non-photorealistic Rendering
                        </h2>
                        <ul class="list-inline intro-social-buttons">
                            <li>
                                <a href="https://colab.research.google.com/drive/1Hcilmt9R5BzWolY8kBaYIzj3joWbM3oH?usp=sharing" class="btn btn-default btn-lg"> 
                                    <span class="network-name" style="font-weight: 900;">進入系統</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

        </div>
        <!-- /.container -->

    </div>
    <!-- /.intro-header -->

    <!-- Page Content -->
	<a  name="demo1"></a>
	<div class="content-section-a">

        <div class="container">
            <div class="row">
                <div class="col-lg-5 col-sm-6">
                    <hr class="section-heading-spacer">
                    <div class="clearfix"></div>
					<h2 class="section-heading">摘要</h2> <img src="chang.svg" width="100px">
                    <br><br>
					<p class="lead">圖形的非寫實計算繪製是電腦圖學領域中相當成熟的技術，有許多將現實虛擬化的種種應用。伴隨著可微分光柵化器的技術出現，使得不能進行卷積的向量結構也能夠利用梯度下降的方式進行機器學習。
                        本研究針對浮世繪代表的冨嶽三十六景，探索其進行向量非寫實電腦計算繪製的可能性。透過可微分光柵化器，遍歷關於構成向量圖的形狀選擇、形狀的數量以及迭代的次數所生成的向量非寫實電腦計算繪製結果向量圖。</p>
                    <br>
                    <p class="lead">可微分光柵化器於應用階段僅提供向量路徑之實作方法，本研究根據其工具底層所提供之圓形資料結構，設計適用於圓形之參數，使能夠以向量圓形生成非寫實計算繪製結果。
                        本研究並進一步產生向量非寫實計算繪製生成過程變化的動畫可縮放向量圖。
                        實驗結果證實，使用可微分光柵化器進行向量非寫實電腦計算繪製的結果，在色彩表現上遠勝於傳統向量化方法。
                        除此之外，實驗結果也表現出向量非寫實電腦計算繪製在生成任務上無論是不同圖片大小、色彩與圖片結構的泛用性。</p>
                </div>
                <div class="col-lg-5 col-lg-offset-2 col-sm-6">
					<br><br><br>
                    <!-- <img class="img-responsive" src="img/dog.png" alt=""> -->
                    <!-- <img class="img-responsive" src="imgs/painterly/origin/s_1500_w2_i200/iter_199.svg"> -->
                    <img class="img-responsive" src="https://github.com/hsiaohsc/thesis/assets/42900685/c653cff5-112b-4537-b45c-d45af3052efa" alt="">
                    <br>
                    <!-- <img class="img-responsive" src="imgs/painterly/origin/c_16275_w10_f1_i100/iter_99.svg" alt=""> -->
                    <img class="img-responsive" src="https://github.com/hsiaohsc/thesis/assets/42900685/052b1633-5d6a-4338-818e-8ff7c28d9305" alt="">
                </div>
            </div>

        </div>
        <!-- /.container -->

    </div>
    <!-- /.content-section-a -->

    <a  name="demo2"></a>	
	<div class="content-section-a">

        <div class="container">
            <div class="row">
                <div class="col-lg-5 col-sm-6">
                    <hr class="section-heading-spacer">
                    <div class="clearfix"></div>
                    <h2 class="section-heading">引用文獻</h2>
					<p class="lead">Li 等人於 2020 年提出可微分光柵化器 (Differentiable Rasterizer) 的架構，其主張反鋸齒處理是向量圖光柵化可微分的關鍵，解決了向量圖片的序列指令無法依靠微分來學習的問題。其提出的方法連結了向量與點陣圖片之間的轉換，使機器學習技術能夠使用在向量圖片的學習上，並以提出的可微分光柵化器為基礎，更進一步的推出了將向量圖與點陣圖交叉比對的向量圖編輯方法。</p>
                </div>
                <div class="col-lg-5 col-lg-offset-2 col-sm-6">
					<br><br><br><br><br><br>
                    <img class="img-responsive" src="imgs/diffvg_main.jpeg" alt="">
                </div>
            </div>
            <br><br><br>
            <a name="diffvg" href="https://dl.acm.org/doi/pdf/10.1145/3414685.3417871">
                [1] Tzu-Mao Li, Michal Lukáč, Michaël Gharbi, and Jonathan Ragan-Kelley. 2020. 
                Differentiable vector graphics rasterization for editing and learning. ACM Trans. Graph.
            </a>

        </div>
        <!-- /.container -->
        

    </div>
    <!-- /.content-section-a -->
	
	<a name="demo3"></a>
	<div class="content-section-a">

        <div class="container">
            <hr class="section-heading-spacer">
            <h2 class="section-heading">系統使用示範</h2>
            <p class="lead">點擊頁首「進入系統」使用 Google Colab，或是從 github <a href="https://github.com/hsiaohsc/vgnpr">https://github.com/hsiaohsc/vgnpr</a> 下載程式碼使用。</p>
            <p class="lead">觀看更多實驗結果圖片請點擊頁首「實驗結果」。</p>
            <br>
            <h3>Step 1. 程式安裝</h3>
            <p class="lead">執行程式儲存格進行程式安裝。</p>
            <img class="img-responsive" src="img/demo01.png" alt="">
            <br>

            <h3>Step 2. 選擇目標圖片</h3>
            <p class="lead">執行程式儲存格後使用圖形介面選擇或上傳目標圖片。本系統支援富嶽三十六景全系列 36 張與八大山人水墨畫 5 張圖片提供選擇。</p>
            <img class="img-responsive" src="img/demo02.png" alt="">
            <br>
            
            <h3>Step 3. 設定使用參數</h3>
            <p class="lead">執行程式儲存格後使用圖形介面設定使用參數。</p>
            <img class="img-responsive" src="img/demo03.png" alt="">
            <br>
            
            <h3>Step 4. 執行機器學習程式碼並生成結果</h3>
            <p class="lead">執行程式儲存格後呈現生成結果圖片。</p>
            <img class="img-responsive" src="img/demo04.png" alt="">
            <img class="img-responsive" src="img/demo05.png" alt="">
            <br>
            
            <h3>Step 5. 生成可縮放向量圖動畫</h3>
            <p class="lead">執行程式儲存格後生成結果動畫。</p>
            <img class="img-responsive" src="img/demo06.png" alt="">
            <br>
            
        </div>
        <!-- /.container -->

    </div>
    <!-- /.content-section-a -->
	
    <a name="demo4"></a>
	<div class="content-section-a">
        <div class="container">
            <hr class="section-heading-spacer">
            <h2 class="section-heading">實驗結果展示</h2>
            <div class="row">
                <div class="col-lg-5 col-sm-6">
                    <h3>實驗一、與傳統演算法比較</h3>
                    <p class="lead">與 SVG 編輯軟體 Inkscape 使用的 Potrace 演算法進行比較。</p>
                </div>
                <div class="col-lg-5 col-lg-offset-2 col-sm-6">
                    <br>
                    <a href="result_inkscape.html" class="btn btn-default btn-lg" target="_blank"> 
                        <span class="network-name" style="font-weight: 900;">看結果</span>
                    </a>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-5 col-sm-6">
                    <h3>實驗二、使用向量路徑</h3>
                    <p class="lead">使用彩帶(不封閉向量路徑)與色塊(封閉向量路徑)進行彩帶寬度、形狀數量與迭代回合數參數的實驗。</p>
                </div>
                <div class="col-lg-5 col-lg-offset-2 col-sm-6">
                    <br>
                    <a href="result_paths.html" class="btn btn-default btn-lg" target="_blank"> 
                        <span class="network-name" style="font-weight: 900;">看結果</span>
                    </a>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-5 col-sm-6">
                    <h3>實驗三、使用向量圓形</h3>
                    <p class="lead">使用向量圓形進行半徑寬度、半徑最大寬度限制與形狀數量參數的實驗。</p>
                </div>
                <div class="col-lg-5 col-lg-offset-2 col-sm-6">
                    <br>
                    <a href="result_circle.html" class="btn btn-default btn-lg" target="_blank"> 
                        <span class="network-name" style="font-weight: 900;">看結果</span>
                    </a>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-5 col-sm-6">
                    <h3>實驗四、富嶽三十六景系列</h3>
                    <p class="lead">使用彩帶、色塊與圓形針對富嶽三十六景全系列進行參數泛用性實驗。</p>
                </div>
                <div class="col-lg-5 col-lg-offset-2 col-sm-6">
                    <br>
                    <a href="result_fuyueorigin.html" class="btn btn-default btn-lg" target="_blank"> 
                        <span class="network-name" style="font-weight: 900;">看原圖</span>
                    </a>
                    <a href="result_fuyuestrip.html" class="btn btn-default btn-lg" target="_blank"> 
                        <span class="network-name" style="font-weight: 900;">看彩帶</span>
                    </a>
                    <a href="result_fuyueblob.html" class="btn btn-default btn-lg" target="_blank"> 
                        <span class="network-name" style="font-weight: 900;">看色塊</span>
                    </a>
                    <a href="result_fuyuecircle.html" class="btn btn-default btn-lg" target="_blank"> 
                        <span class="network-name" style="font-weight: 900;">看圓形</span>
                    </a>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-5 col-sm-6">
                    <h3>實驗五、八大山人系列</h3>
                    <p class="lead">使用彩帶、色塊與圓形針對八大山人水墨畫作進行參數泛用性實驗。</p>
                </div>
                <div class="col-lg-5 col-lg-offset-2 col-sm-6">
                    <br>
                    <a href="result_eightall.html" class="btn btn-default btn-lg" target="_blank"> 
                        <span class="network-name" style="font-weight: 900;">看結果</span>
                    </a>
                </div>
            </div>
            

        </div>
    </div>

	
    <!-- Footer -->
    <footer>
        <div class="container">
			<div class="row">
                <div class="col-lg-12">
                    <hr>
                    <p></p>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <p class="copyright text-muted small"><a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="創用 CC 授權條款" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png" /></a><span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/InteractiveResource" property="dct:title" rel="dct:type"></span>
                    </p>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <p class="copyright text-muted small">
			向量圖形非寫實電腦計算繪製，

            由<a xmlns:cc="http://creativecommons.org/ns#" href="http://www.cc.ntut.edu.tw/~tjhsieh/" property="cc:attributionName" rel="cc:attributionURL">國立臺北科技大學資訊工程系計算機圖學實驗室</a>製作，
			以<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">創用CC 姓名標示-非商業性-相同方式分享 4.0 國際 授權條款</a>釋出。
			姓名標示-非商業性-相同方式分享 CC BY-NC-SA
			本授權條款允許使用者對本著作進行重混、調整，以及依原著作建立新著作，但僅限於非商業目的之使用。唯使用者就其新創著作，必須按照表彰
			原作：國立臺北科技大學資訊工程系計算機圖學實驗室，並且將產出之新創著作採用相同的授權條款釋出。</p>
                </div>
            </div>
        </div>
    </footer>

    <!-- jQuery -->
    <script src="lib/jquery-2.1.3.min.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="lib/bootstrap.min.js"></script>

	
	
	
	
	
</body>
</html>