產生超高解析度圖檔 - aTileSaver.pde 的疑問

[sheng-po]

這幾天研究了一下如何將processing產生的內容儲存成高解析度圖檔 (可用來做列印輸出)，得到以下結論：

1. 內容必須是程式產生出來的 (例如幾何圖形), 才能產生高解析度圖檔

2. 使用現成圖檔(例如美女圖)，是不可能將原本的解析度變成更高解析度且影性清晰如故 (別夢想了，除非是向量檔)

3. 目前研究到的作法都是使用移動camera的方式，將原始內容透過camera的perspective的設定，將原始內容分割程很多個小圖 (每個小圖即原始圖檔的一角, 可以想成是將camera做pan又做zoom-in, 但不完全是這樣)，然後拼貼成一個高解析的大圖

目前找到最具參考價值的是這篇完張跟source code

http://workshop.evolutionzone.com/2007/03/24/code-tilesaverpde/

該source code雖然是2007年寫的，當時對象是processing還沒變成1.0時

但是我測試了一下，該source code其實在processing 2.0b7也可以跑 (稍做修改)

於是想嘗試了解其運作原理

但唯有一處無法了解：

  public void setupCamera() {  
    p.camera(width/2.0f, height/2.0f, cameraZ,  
      width/2.0f, height/2.0f, 0, 0, 1, 0);  
 
    if(isTiling) {  
      float mod=1f/10f;  
      p.frustum(width*((float)tileX/(float)tileNum-.5f)*mod,  
        width*((tileX+1)/(float)tileNum-.5f)*mod,  
        height*((float)tileY/(float)tileNum-.5f)*mod,  
        height*((tileY+1)/(float)tileNum-.5f)*mod,  
        cameraZ*mod, 10000);  
    }  

請問各位高手, 

為何mod要設成 1f/10f ?

以及frustum() 裏面的參數是根據什麼基礎產生的？ (特別是為何需要 .5f ?)

若有任何想法或參考資訊

都非常感謝！！

shengpo#

[sheng-po]

我稍微改過的程式在此

https://docs.google.com/file/d/0B0Xsp1mEbqHAY0dRTGswc1I1MFU/edit

(其實只有把smooth()去掉, 跟把OPENGL改成P3D而已, 要繼續改下去時就看不懂前述的程式碼片段XD)

程式run起來後, 按 t 鍵, 會儲存成大圖

但目前存檔的結果有點問題但至少是存成大圖沒錯

sheng-po於 2013年1月21日星期一UTC+8下午3時50分46秒寫道：

[MAO]

https://docs.google.com/folder/d/0B4DaHwRIerOCSy1haUVsOWIzcWs/edit

修正後確定可以跑的版本為上面連結，為了檢驗方便，我新增時間參數讓畫面分割稍微跑慢一點，以及會將每個畫面輸出出來

注意輸出為.tga會有畫面像素跑位的問題（這個問題我找超久才發現是檔案類型的問題），改為png就搞定了

sheng-po於 2013年1月21日星期一UTC+8下午11時05分36秒寫道：

[sheng-po]

感謝小毛！

我來研究一下你的code

希望能將它改寫成更容易使用的版本

另外你提到為何不直接使用PDF做向量輸出？

因為使用 PDF library 遇到的問題如下：

- 3D資料會被平面化, 由三角形及線條組成 (所以圓形不是真正的圓形)

- 3D感消失，每個3D物件被"個別"平面化，彼此之間的關係呈現不出來 (例如: 交錯)

- alpha值 不正確

- 當內容資料同時含有2D及3D時，PDF輸出結果的誤差會更大 (2D資料完全失誤)

PDF輸出的測試程式碼如下，執行一次便能了解以上所述問題

import processing.pdf.*;

boolean record = true;

void setup() {  
  size(500,500, P3D);  
  noStroke();  
}  
 
public void draw() {  
  if(record){
      beginRaw(PDF, "output.pdf");  
//      beginRecord(PDF, "output.pdf");  //僅能紀錄2D data, 無法紀錄3D data
  }
   
  background(0,50,0);  
 
  //3D data
  lights();    
  translate(width/2,height/2);  
  rotateY(PI/4);  
  rotateX(PI/4);  
  scale(8);  
  fill(240,255,0,220);  
  box(10,50,10);  
  fill(150,255,0,220);  
  box(50,10,10);  
  fill(255,150,0,220);  
  box(10,10,50);  
 
  fill(255, 0, 0, 100);
  sphere(15);


  //2D data  
  fill(0, 0, 255, 100);
  rect(0, 0, 300, 300);


  if(record){
      endRaw();
//      endRecord();    //僅能紀錄2D data, 無法紀錄3D data
      record = false;
      println("PDF file is output !");
  }  
}  

MAO於 2013年1月22日星期二UTC+8上午5時07分06秒寫道：

[sheng-po]

感謝小毛的修改版程式!

我將程式碼整理了一下

也將一些地方做了修改. 現在程式碼應該是更好閱讀以及更容易了解

儲存成 .tga 也不會有問題了

程式可至下列兩個地方下載

- https://docs.google.com/file/d/0B0Xsp1mEbqHAYmJnRnNkSkRPc2M/edit

- https://github.com/shengpo/processing_snips/tree/master/aTileSaverSimpleTest

在修正程式的過程中

癥結點在於

- camera的座標系統 跟 一般drawing的座標系統不同

- camera() 參數的定義 (注意upY參數的方向, 1的話表示向上遞增!)

- frustum() 參數的定義 (注意left, right, bottom, top的順序)

- 注意tile產生的順序 and 結合的順序

ps. camera() 及 frustum() 的詳細說明之後有時間再細說

sheng-po於 2013年1月22日星期二UTC+8下午8時24分02秒寫道：