小Q噗噗說

摘要 本文進一步探索 Blender 客製化 Geometry Node，包含呼叫其他 Geometry Node 的功能，能夠將原本的 Node Graph 轉為單一 Node。 前言 繼上一篇處理完卷殺折線的程序化生成後，原本想要進一步處理栱的部分，不過發現栱與抖有依賴的關係，栱的一部分數據需要來自枓，主要是枓底的尺寸。 製作這些枓的程序化生成模型，首先要看看這些枓有沒有共通點？ 枓的規則 枓的構成與尺寸示意 《營造法式》所有枓基本上都可以分成從上到下三個部位耳、平、欹，形狀上可以分為方或圓(現實實例的話則不只)。 基本上變化除了榫卯(包含包耳)以外還有尺寸的差異，而尺寸依然使用材分決定。整體尺寸上各種枓長寬高不同，會以相對比例決定耳、平、欹的尺寸，但在高度上耳、平、欹比例均各為 2:1:2 分配。欹䫜也不同。   枓的參數 從上面大致上整理一下，可以得到幾個可能的參數： 枓的種類：角櫨枓(方圓)、櫨枓(方圓)、散枓、交互枓、齊心枓、平盤枓 幾等材(U) 斗的長寬高：可從枓的種類求得 欹䫜的深度：可從枓的種類求得  包耳與開口的尺寸 ：可從枓的種類求得，但開口寬為固定一栔(栱或枋寬) 底部尺寸：可從枓的種類求得  附註 我在翻閱營造法式相關文獻時發現有對包耳功用的討論，有相關文獻指出可能是對斗耳的拉結加固，然而相關論文我目前上無法取得，不過的確是有趣的論點。   轉換成 Geometry Node 枓的模型會以 Geometry Node 來生成，為了介面方便會使用客製化的 Node。 Node 輸入輸出與屬性(Property) 這個 Node 有屬性，主要是因為沒有想要透過輸入的方式修改枓的類別，另外使用屬性儲存類別，可以依照條件顯示輸入輸出的 Port 和屬性，在此會來開關顯示選項。 輸入： Unit(cm)          : Float (單位公分) Quality Level     : UInt Has Joinery       : Boolean (不勾選則不開榫) 輸出： 枓     ...

摘要 本文探索了透過修改 Blender 原始碼來實作客製化的 Geometry Node。 前言 上一篇文提到計算卷殺的折線非常麻煩，需要計算各個等分點並計算交點。不過其實《營造法式》中提到的卷殺的折線其實十分固定，不同部位的折線只要等分的數字相同，皆可以被視作同樣的折線經過線性變換，也就是說我們只要計算一個折線後透過仿射變換就能套用到其他構件上的不同位置上，只要等分數相等。 另外我們也可以透過調整等分數來調整折線的柔化程度，例如實例中有些栱頭卷殺的等分點就不是 4 * 4，可能是 3 * 3，藉由簡單的線性變換也能控制卷殺曲線的長寬。 那麼不同等分的折線有沒有辦法找出各點的座標的公式呢？我發現其實可以。以下就用長寬相等的矩形，以二等分和三等分的卷殺為例。 二與三等分的卷殺推導公式  簡單繪製兩等分與三等分的卷殺如下圖： 若以 Start 為原點，矩形為 1 * 1 的正方形，Start 和 End 在圖中只有繪製在三等分的圖上，實際上二等分亦同樣位置。 Start 和 End 的點座標為： Start(0, 0) End  (1, 1) 二等分的 D1 點座標為： D1(1/3, 2/3) 三等分的 T1、T2 點座標為： T1(1/6, 3/6) T2(3/6, 5/6) 此時還未看見規律，但是依照順序從 Start 到 End 逐一計算座標差值即可以發現規律： 二等分的座標差值： D1-Start(1/3, 2/3) End-D1  (2/3, 1/3) 三等分的座標差值： T1-Start(1/6, 3/6) T2-T1   (2/6, 2/6) End-T2  (3/6, 1/6) 從此可以發現各個點的座標會是等差級數。當有 N 等分，分母就是前 N 個自然數的和，而各個點由 Start 開始到 End 的 Index K 為 [0, N]，共 N + 1 個點。 X 的分子便是前 K 個自然數的和，而 Y 的分子為反向，為由 N 開始 K 個的遞減自然數和，而這樣才能使得最後一個點座標為 (1, 1)。 折線點公式 N為自然數時，對於 N 等分的卷殺其產生的折線上， Index K 由 0 開始時，其第 K 點 P K 座標為： P K (S K /S N , T N /S N ) S K =...

摘要 本文初步探索了透過使用 Blender 內建 Geometry Node 來程序化生成建築構件。 前言 最近正在學習 Blender 的 Geometry Node，使用程序化生成模型非常的吸引我，看了一些教學後在想時不是要做些什麼當作練習。第一個想到的其實是應用在建築構件的生成。 營造法式的大木作構件感覺就是一個很好的題材，因為大木作構建本身在營造法式中已經很詳細載明了做法。所以很適合做成程序化生成模型，此外我想到另一個優點是可以快速透過調整參數控制品質，例如曲線的段數和榫卯可以透過參數調整，便於處理 LOD 或是不同使用情境。 這次初探會針對梭柱嘗試製作程序化生成模型，首先我們要了解營造法式中針對梭柱的規則，再來藉由這些規格轉化成程程序化生成模型的邏輯。  該專案也有上傳至 Github 術語簡單介紹 因為再來會很常使用到中國傳統建築的一些術語，所以先在此簡單解釋： 卷殺：是指對構件砍削出折線或曲線的行為，藉以柔化外觀 材分 ：宋代《營造法式》中使用的這個建築尺度單位，主要用來控制建築構件尺寸的模數。1 材可細分為 15 分，但是這個一材的大小隨著等級可大可小。另外還有栔，為 10 分。 梭柱的規格 梭柱的規定在 《營造法式》第五卷·大木作制度二 有敘述，這邊只擷取與梭柱相關，亦不擷取與升起側腳相關的部分。 凡用柱之製，若殿閣即徑兩材兩栔至三材，若廳堂柱即徑兩材一栔，餘屋即徑一材一栔至兩材。若廳堂等屋內柱，皆隨舉勢定其短長，以下檐柱為則。（若副階廊舍，下檐柱雖長，不越間之廣。 …… 凡殺梭柱之法，隨柱之長，分為三分。上一分又分為三分，如栱卷殺，漸收至上，徑比櫨枓底四周各出四分；又量柱頭四分，緊殺如覆盆樣，令柱頭與櫨枓底相副。其柱身下一分殺令徑圍與中一分同。 …… 從以上敘述可以知道柱子有三個主要的參數，直徑與高（長）、材分等級來決定一分(U)的大小，然而高卻沒有非常詳細的規定，此處以實例常見的直徑(D)與高度(H)比為 1:9 假定。 H = 9 * D D = 42 ~ 45 * U 有關卷殺，柱身上方寫的非常清楚，柱身下方卻不是很明瞭，我們此處假設只有上方有卷殺，也就是如上敘述的柱身上方 1/3 的部分進行卷殺。 另外一個問題來了「徑比櫨枓底四周...

這本書的內容主要是偏向理論性的手法，與實作較無關聯（畢竟叫原理）。作者提到內容主要是理性嚴謹的分析，較不探討感性與直覺的部分，而且著重黑白。所以這本書基本上不會去談怎麼配色好看、字體怎麼選用、如何排版的東西，那類是偏實作。而是探討一個複雜或簡單的平面圖象是如何被設計出來的，背後使用了哪些手法。 裡面談到的每項原理都有提供簡單的示意圖，每章也有提供較為複雜的習作，藉由分析這些習作可以思考這些原理是如何被使用的。 我認為這本書裡面歸納的原理可以用來分析日常生活上看見的那些眼花撩亂的平面設計，思考是怎麼設計出來的。

    前陣子接觸到Unity的新的UI工具UIToolkit，讓我想到以前碰到網頁排版和樣式要寫CSS的日子。很好奇目前重製版專案裡的UI是否也能順利轉換到UIToolkit上，由於我UI在功能上有用到Zenject所以想趁著這陣子有空來測試看看，能不能順利轉換。 之所以寫這篇文章是因為網路上查到有用 UIToolkit和Zenject在一起的人並不多，所以想拋磚引玉看看有沒有人也有類似經驗可分享。 測試對象：一個會使用到Zenject和Localization功能的按鈕 測試的項目很簡單，挑一個比較有代表性的元素做測試。 我選擇的是一個帶有文字敘述和圖片的按鈕，這個按鈕其實是展示畫作圖片的按鈕。UGUI版本中是一個Prefab，上面有個元件可以指定這個按鈕的圖片和文字敘述，文字敘述會由Localization這個插件負責載入在地化版本的文本，而這個按鈕的功能很簡單，按下去後會使用Zenject的Signal發出訊息，會滿版顯示這個按鈕的圖片和文字敘述，以下的影片為UGUI版本的展示： 由於我選擇的按鈕文字敘述和圖片是綁在一起的， 所以我就用ScriptableObject包起來，裡面裝有LocalizedString和Sprite。其中有個事件，用來通知在地化文本的語言變更，UI的部分接收到通知後再取得最新的在地化文本。 怎麼寫客製化的VisualElement 針對怎麼寫一個客製化的VisualElement在官方的文件有簡單的說明，可以先看此： Using custom (C#) elements 我這邊客製化的VisualElement稱作ImageBoxElement，以下的程式也會用這個名字示範。 客製化的VisualElement裡面的內容可以透過程式添加，類似這樣： ImageBoxElement.Add(new Label("NewLabel")); 或者是透過UIBuilder做出一個範本(類型是VisualTreeAsset)，並透過在程式中載入的方式添加，有點像是在UGUI排好UI元素然後做成Prefab的概念。記住裡面會用程式控制的元素記得命名。 如下圖就是我製作的範本，稱作ImageBox： 載入並動態生成的方法，我是用Addressables載入： public class ImageBoxElemen...

    最近終於製作好了一個餵魚的小遊戲，是四景山水圖秋景-URP重製版這個專案裡的一部分，內容很簡單只有餵魚的互動功能而已，主要會做這個的動機還是添增趣味。 在傳統園林裏面水是很重要的，雖然這個專案目前看大概不會太著重在怎麼理水這方面，因為一些素材都沒有(石材駁岸和植栽的模型之類)，所以也沒有辦法做太多處理，但是水的部分只有湖面就很無聊，所以加一點可互動的功能。之後肯定還會在水裡加上其他細節像是植栽之類的，讓水體這個部分變得豐富一些。   這個餵魚小遊戲分成兩個部分，魚的模型和渲染以及互動的部分 魚的模型和渲染 魚隻的渲染是利用Shader來處理魚的變形動畫和花色的變化。   魚的互動 互動包括游動、吃飼料和如何灑飼料。魚隻游動吃飼料都是依靠插件完成，插件使用的是 FlockBox ，基本上魚類游動與吃飼料可以簡單的做到，但是有個問題是與地形的碰撞，目前為止然有些障礙，有些魚會穿過地形。除此之外魚類游動的時候還會計算角度的差值傳給Shader做魚隻模型的變形。 灑飼料和水花這些都是依靠粒子系統搭配腳本控制，灑出來的飼料一開始是一般的粒子，等到碰到水面後才變成可以被魚隻辨別並吃掉的物件(在插件裡稱做Agent)，飼料的物件用物件池管理，等要生成時才依照對應的參數召喚。