顯示具有 Texture 標籤的文章。 顯示所有文章
顯示具有 Texture 標籤的文章。 顯示所有文章

2015年3月7日 星期六

[PNG] PNG壓縮工具 - 更佳的壓縮率 - TinyPNG

TinyPNG是個將圖片壓縮成8 bit且可有透明效果的PNG壓縮軟體,其透明效果處理相當好,也能夠有效壓縮圖檔容量,相當好用。TinyPNG的定位與先前介紹過得PNG Gauntlet有所不同,但對於一般狀況來說TinyPNG是比較好用。

有提供線上直接壓縮,也可以安裝Photoshop Plug-in
https://tinypng.com/


2014年12月31日 星期三

[PNG] PNG壓縮工具 - 更佳的壓縮率 - PNG Gauntlet

對遊戲研發來說,美術素材絕對是整個遊戲容量的最大問題來源,尤其現在的手遊市場、中國低階市場對遊戲容量(包)的要求更是嚴苛。那麼美術人員能夠做什麼樣的優化,讓美術資源佔用更少容量呢?從量最大的Texture來說,大部分的美術人員用Photoshop等工具存出圖檔後就不會再做任何處理,但其實Photoshop在檔案輸出的部份優化的並不是很好,我們可以透過其他的工具讓輸出的圖片容量更小,且達到幾乎完全相同的品質。在此就介紹一個可以有效壓縮PNG的軟體「PNG Gauntlet」,這個軟體是我在參與2013 GDC Taipei時聽到Qubit Games的創始人兼美術總監路致遠先生提到才知道的,因為過往我也是個不太care這個問題的美術…

PNG Gauntlet

http://pnggauntlet.com/

2013年9月10日 星期二

[UVLayout] 基本教學

  今天用起多年未開過的UVLayout發現幾乎快忘光了,所以就在這記錄一下UVLayout要怎麼使用吧~免的下次再打開又忘光光了。因為UVLayout這款軟體極度不人性化、介面極度簡陋的特色,記不記得熱鍵是操作此軟體的最重要重點...下面附上官方的文件,以及一些重點操作的說明(UVLayout 2.06):


基本操作
  • 3D視角操作:
    • 旋轉(水平)
      • 以高度軸為基準 - LMB + 滑鼠水平移動
      • 以攝影機軸為基準 - Ctrl + LMB + 滑鼠水平移動
        (若發生基準軸錯誤問題,用Ctrl操作之後會恢復正常)
    • 透視切換 - O
    • Focus View - Home
  • 3D視窗:
    • Texture顯示
      • 切換Texture - T
      • 變換Texture尺寸 - +/-
    • 選取Shells
      • 選取 - Shift + LMB
      • 範圍框選 - Shift + Drag LMB
      • 清除所有選取 - Shift + LMB空白位置
  • UV操作:
    • Drop UV(3D編輯視窗) - D
    • 復原UV Drop(UV視窗) - Shift + D
    • UV切分 - C
    • UV黏合 - W
    • 將Shell對齊到要黏合的另一個邊上 - M
    • Shell的編輯
      • 放大 - Space + RMB
      • 旋轉 - Space + LMB
      • 移動 - Space + CMB 
    • UV Vertex編輯
      • 移動 - Ctrrl + RMB
    • 對稱
      • 尋找對稱 
        1. Menu>Symmerty Find
        2. 左鍵選UV Border
        3. 中鍵選對稱的UV Border
        4. Enter結束
      • 交換對稱 - Shift + S
      • 對齊對稱的Shell - S(在Shell上)
    • COPY UVs
      • 可用於對稱UV或相同Shell的堆疊
        1. Menu>Copy UVs 開啟Copy UVs的功能
        2. 第一下LMB選擇來源Shell上的一邊
        3. 第二下以後可依序選擇其他Shells上對應的邊
        4. 按下Space執行

參考文章

2013年6月21日 星期五

[Unity] 以ARGB4444搭配Dithering進行貼圖減量

  之前一直受ARGB Texture所困擾,在Mobile平台沒有合適的壓縮格式能在品質與容量之間取得較好的平衡,下面列出幾個格式的缺點
  • RGBA PVRTC 4 bits - iOS推薦的壓縮格式,但是4bits對於圖像品質的破壞太大
  • ARGB 32 bit - 雖能保有圖片品質,但所消耗的容量實在太龐大
  • ARGB 16 bit - 雖能降低貼圖容量,但是顏色有明顯的帶狀瑕疵(color banding)
  Android平台由於各家GPU所支援的壓縮格式各有不同,因此ARGB 16 bit也就是降低texture容量最適合的選項,但16 bit所造成的帶狀瑕疵十分明顯,若真的要使用也不太可能,正好前一陣子看到Unity IN上有Cytus開發者之一的syyang所發表的文章



  • 使用 RGBA4444 搭配 Dithering 減少記憶體用量 by syyang @ UNITYIN

  •   這篇文章正好解決了這個問題,利用Dithering在16bit color depth獲得較佳的圖像呈現,消除帶狀瑕疵。進行Dither處理之後,圖片的顏色資訊會被重新處理,檢視圖片可發現變的有顆粒狀感(抖色),當圖片在眼中的呈現越小時,就會發現看起來跟truecolor的圖片品質頗接近。由於是對顏色資訊做了重新的演算,所以並不受到Unity的轉檔所影響,只要在Import Settings中設定Format為16 bit的壓縮,即可省下容量又能保有還能接受的圖片品質。

      此外需要注意的是經過dither處理的texture若又被Unity重新壓縮到不同尺寸的圖片時,會加重顆粒感使圖片品質降低(因為顏色訊息被重新處理過了),因此輸出給Unity的texture asset必須要輸出成遊戲主要使用的texture size。此外,若處理過的貼圖是用於3D模型的話,經過UV的拉扯也會使圖片失真更加明顯。目前Unity本身並不支援dithering,在網上也還沒看到有人做出支援dither處理的script/plug-in,因此得要自行預先處理這些textures。

    經過UV拉扯、尺寸放大後失真變的相當明顯
    但dithering還是有其諸多限制,而最原始的作法當然就是使用RGB444的安全色系來繪製texture,及在各個channel中只使用:0, 15, 31, 47, 63, 79, 95, 111, 127, 143, 159, 175, 191, 207, 223, 239, 255。但除了顏色數便少之外,還得少用漸層表現,要犧牲的也是相當多,也許能在不影響美術風格的前提下選擇性使用。

      在以Gimp進行dithering處理時,須先將貼圖縮成最終使用的尺寸,在縮小圖片時三種內插法看起來效果幾乎相同,然後再執行Dither to ARGB,此時會多出一個圖檔視窗就是dithering後的圖檔,進行匯出之後即可。匯出PNG的設定所有選項皆可取消,但當texture需要再alpha邊緣作細緻的過度時,透明像素的色彩是必須要被儲存的。Compression Level 0跟9在色系較單純的圖片上是幾乎沒有差別。


    Gimp在安裝script之後可進行dithering處理
    Gimp匯出PNG時的設定

    參考資料


    延伸閱讀

    2013年3月7日 星期四

    Unity3D輸出之圖檔壓縮格式(行動平台)

    要對圖檔壓縮進行優化時,須先了解各圖檔之規格,Unity Manual中有提到各平台可支援的各種圖檔格式,請參考在本文結尾的參考文章中的[1]以及Wiki中的資訊。

    iOS:
    PVRCT
      貼圖尺寸須為二的冪次方之正方貼圖
    Android:
    RGB Compressed ETC 4 bits (ETC1)
     (Ericsson Texture Compression, supported by all OpenGL ES 2.0 GPUs)
     4bits / pixel,無Alpha,Android 2.2(Froyo)以上支援
    RGBA 16bit
     有Alpha,容量是ETC的四倍(請看參考[1])。

    若要減少Alpha對資源的佔用,有一些技巧可以解決(請看參考[3][4])。
     方法1,將Alpha Channel抽出,與Color Map連接拼成一張貼圖。
      優點:一張貼圖、Shader改動較小。
      缺點:貼圖只能二方連續(one direction wrap),提高shader效能消耗
     方法2,將Alpha Channel抽出,單獨存成一個檔案,再從shader進行結合。
      優點:貼圖可四方連續,運用上靈活性較高。
      缺點:shader需要額外多出一個sampler。
    當硬體不支援輸出之壓縮格式時,Unity會將資源以RGBA的方式做Decompress,如此會提高渲染時間、記憶體消耗和Decompress時間(增加讀取階段的時間)。

    下表是檔案容量對照(含MipMaps)

    尺寸 ETC 4bits RGBA 16bit RGBA 32bit
    2048
    2.7 mb
    10.7 mb
    21.3mb
    1024 682.8
    2.7 mb
    5.3mb
    512 170.8 682.7
    1.3mb
    256 42.8 170.7 341.3
    128 10.7 42.8 85.3
    64 2.7 10.7 21.3


    參考文章:
    [1]http://docs.unity3d.com/Documentation/Manual/Textures.html
    [2]http://docs.unity3d.com/Documentation/Manual/android-GettingStarted.html
    [3]http://forum.unity3d.com/threads/73998-DXT-or-PVRTC
    [4]http://malideveloper.arm.com/develop-for-mali/sample-code/etcv1-texture-compression-and-alpha-channels/
    http://gamedev.stackexchange.com/questions/44134/unity-android-truecolor-texture-performance-hit-and-alternatives-for-truecolor
    http://stackoverflow.com/questions/9148795/android-opengl-texture-compression

    http://zh.wikipedia.org/wiki/RGB
    http://en.wikipedia.org/wiki/Ericsson_Texture_Compression
    http://en.wikipedia.org/wiki/PVRTC

    2011年7月22日 星期五

    Bodypaint : 直接把圖貼到模型上

    假設模型上已有一部分貼圖是可以移植到另一個部位上,或者有圖片想直接貼到模型貼圖上
    可先將設些部份Ctrl+C至剪貼簿,開啟Bodypaint後,切到你要的角度Ctrl+V,
    就會把剪貼簿裏面的圖像直接貼到模型上,此時Bodypaint會進入投影模式,
    要繼續繪製時記得取消,否則接縫處會有縫隙。