如何繪制根據相機變焦調整的動態二維網格：OpenGL

Question

所以我的問題和標題一樣。 我不是在尋找具體的代碼示例，只是關於任何首選方法的一些想法/指南。

在我的 2D 游戲引擎中，我喜歡有一個網格來表示一定數量的像素（例如 32x32 像素）。 我特別希望能夠定義世界空間中每個網格的寬度和高度，在所有線條上具有一致的筆划寬度，並且能夠根據相機縮放調整圖塊大小。

我過去嘗試過幾種不同的方法來繪制這個網格：

1. 我嘗試的第一件事是使用自定義着色器來繪制網格。 我在網上找到了一些代碼，這些代碼使用了一些我不理解的概念，只是在 2D 平面上繪制網格。 這種方法的問題是我不知道如何在我的游戲世界中控制確切的大小，也不了解它是如何工作的。

2. 我的第二種方法是使用我的調試繪圖工具。 我編寫了一套函數，允許我在世界空間中添加不同筆划寬度的線條，我通過為每一幀的每一行動態生成四邊形來實現這一點。 然后我可以畫一堆線，給我一個網格。

3. 我的第三種方法是繪制一堆四邊形，並使用自定義着色器給它們一個輪廓。 然后我只畫了一堆帶有黑色輪廓的白色四邊形，呈現出網格的外觀。

有人有更好的解決方案嗎？ 在我所有的方法中，我也從未嘗試過根據相機的縮放級別動態調整網格。 因此，對於這些方法是否是典型解決方案或是否有更好的解決方案的任何想法將不勝感激。 此外，如果您對如何將這些方法擴展到 3D 空間有任何想法，那也很好，我似乎找不到在世界空間中繪制的線條上獲得統一筆划寬度的好方法。

我的引擎目前也在使用 Opengl 和 C++ 進行編碼，所以我主要關心如何使用現代 opengl 來實現這一點，而不是立即模式。

這是我要實現的目標的圖像：

編輯：我主要關心渲染技術。 你使用幾個四邊形嗎？ 一個平面和一個復雜的着色器？ 或者您是否為每條線使用四邊形？ 還是完全不同的東西？

這是我的嘗試之一，作為我試圖實現的外觀和感覺的另一個參考。 我只是忍不住認為必須有比我嘗試過的方法更好的方法。

Answer 1

不管渲染方法如何 首先你必須計算網格。 我這樣做：

1. 在世界坐標中獲取屏幕的 AABB (x0,y0,x1,y1)

   最好的方法是累積所有從世界坐標轉換到 GL 屏幕空間的 3x3 矩陣：

    vec2 world,screen; mat3 w2s; screen = w2s*world;

   要獲得 AABB，我們需要將屏幕角落轉換為世界：

    mat3 s2w; s2w = inverse(w2s); world = s2w*screen;

   因此，只需將(+/-1,+/-1)的所有 4 種組合轉換為世界並記住最小和最大x,y (AABB) 讓我們稱它們為(x0,y0,x1,y1)這個矩陣也非常有用用於鼠標交互，因為它將鼠標（如果轉換為屏幕坐標）轉換為可用於編輯、選擇的世界坐標...

2. 網格大小gx

   從 AABB 計算網格大小。 簡單地說，如果您的網格是某個世界單位大小的基數（例如 10），那么只需簡單的網格正方形有多大。 為簡單起見，我將只做單軸（使用 2 個軸中的最小值或分別做兩個軸）：

    // let consider x0=-50, x1=+180 gx = log10(x1-x0); // bigest power of 10 to fit inside gx = 2.3617278360175928788677771122512 gx = floor(gx-1); // round down and use 10 times smaller grid gx = pow(10,gx); // your grid size in world coordinates gx=10

3. 電網啟動 position

   只需將x0,y0與gx,gy...再次對齊一個軸：

    x0 = floor(x0/gx)-1 x0*= gx

4. 使成為

   只需按步gx從x0循環到x1並渲染線條...當我按gx/10步進並在gx步進線之前僅渲染一個點或不太亮/粗的線時，我通常還會做另一遍。