2014-10-06 111 views
0

我有一個SlimDX RenderForm(它繼承了System.Windows.Forms.Form),其中我有一個Panel用於渲染地圖。我想在地圖上畫出城市的名字。當用戶放大和縮小地圖時,文本不應該改變大小,但只需要將它們分開並靠得更近。我想到了5種方法可以做到這一點,並且每種方法都存在一個問題:SlimDX DirectX11和文本精靈

  1. 使用精靈來繪製文本。問題:DirectX11和Sprites不能混用。

  2. 等待DirectX11完成繪圖,然後使用GDI手動將文本繪製到面板上。問題:處理儘可能多的文本需要太長的時間,而且文本在每次重繪時都會出現惱人的閃光。

  3. 根據Label創建一個自定義類,設置類以允許透明背景,將面板設置爲其父類,並在用戶縮放時移動這些標籤。問題:將標籤賦予透明背景實際上並不會使其透明。這只是意味着它借用了Panel DirectX的背景顏色,並將自定義類的背景設置爲該背景。我也嘗試覆寫OnPaintBackground函數,什麼都不做,但是這只是給了標籤黑色背景。

  4. 給窗體一個TransparencyKey,並給面板一個這種顏色的背景。然後,將這些面板放在後面,製作全新的RenderForms,在其上進行DirectX繪圖,並將文本放置在現在透明的面板上的標籤上。問題:點擊地圖空間後,RenderForms會出現在後焦點上,這意味着當點擊該空間時,文本消失在這些窗體後面。我可以給主窗體AlwaysOnTop,但我真的不想這樣做,因爲用戶可能想在我的應用程序運行時做其他事情。另外,如果我調出另一個窗口,然後返回到我的應用程序,這些表單不會出現在我的主窗體後面。

  5. 做類似於3的操作,並操作Region屬性以匹配文本的GraphicsPath。問題:當我移動它們時,它有時不會兌現我製作的地區,並且回到黑色背景。

有沒有我錯過的解決方案或任何方式來使這些工作?

編輯:

基礎上給出一個答案的建議,我現在試圖用幾何着色器基本上做一個子畫面產生。但是當我只有6個不同的精靈時,繪製需要很長的時間。只有1個精靈可以接受,但是當我嘗試添加更多時,它變得太多了。

+0

雖然我沒有用SlimDX自己,它看起來像有在SlimDX.Toolkit包雪碧和字體渲染支持:https://code.google.com/p/slimdx/source/browse/ branches/lite/SlimDX.Toolkit /?r = 2195#SlimDX.Toolkit%2FFonts – megadan 2014-10-06 22:00:09

+0

是的,但我非常肯定,這些將不適用於DirectX-11的使用,但僅適用於DirectX-9,或者可能適用於DirectX -10 – KairisCharm 2014-10-07 15:11:14

+0

看着源代碼,它們是用D3D11對象編寫的,所以我不確定它們爲什麼不起作用。精靈只是在屏幕空間中定義的兩個帶紋理的三角形,沒有透視投影。 D3D11中沒有像D3DX9那樣的內置sprite批處理。 – megadan 2014-10-07 16:17:53

回答

0

我已經在我自己的引擎中解決了這個問題。我基本上創建了一個粒子系統,其中粒子頂點包含世界位置,顏色,字符索引,大小和大小模式。此點粒子然後轉換爲幾何着色器中的精靈。這兩種模式是世界大小恆定的(精靈在世界座標中是一個常量大小)或恆定的屏幕大小(精靈在屏幕座標中大小恆定)。然後您需要編寫一個方法,該方法接受一個字符串併爲每個頂點輸出這個粒子列表。如果你做得對,幾何着色器會爲你做所有的工作,即使攝像機移動,你也不需要做任何頂點緩衝區更新來定位文本。

就精靈配料而言,無需擔心繪製順序。丟棄每個像素周圍的透明像素以防止深度寫入。

小心地嘗試在您要繪製的面板上放置透明的.Net控件。這將需要控制重繪每次你呈現你的場景導致.Net來限制你的幀速率(真的很差!)。如果需要,我將控件放置在我的d3d面板上,但它們不透明,不需要不斷繪畫。

希望有所幫助。讓我知道你是否需要更多細節。

- 更新 -

讓我定義2個術語。 「角色精靈」是一個包含單個角色圖像的小精靈。 「字符串精靈」是字符精靈的集合,它移動並表現爲一個大精靈,並出現幾個字符。

用戶定義字符串精靈在世界空間中的位置。字符串中的每個字符用於定義字符精靈。具體來說,每個字符精靈都會得到一個與字符串精靈位置相距的屏幕空間偏移量。這使得所有的精靈都可以放置在三維空間中,而不需要在屏幕空間中將所有字符放在彼此的頂部。 (float3),「紋理座標」(float2),「紋理編號」(int),「屏幕空間偏移量」(float2)和「顏色」(float4)的點頂點。 。 「位置」對於字符精靈中的所有字符精靈都是相同的。「每個字符的紋理可以在單個圖像中定義,其中每個字符精靈都被賦予適當的紋理座標(我所做的)或紋理數組中。

enter image description here

- 更新 -

這裏是我使用的文本(低質量)圖像

enter image description here

這裏是TEX的表。根據字符分配給字符精靈的座標。

Char ASCII StrtPix EndPix PixWdth StartUTexCoord EndUTexCoord 

    32 0 0 40 0 0 
! 33 16 34 18 0.002222222 0.004722222 
" 34 56 97 41 0.007777778 0.013472222 
# 35 113 197 84 0.015694444 0.027361111 
$ 36 212 279 67 0.029444444 0.03875 
% 37 290 412 122 0.040277778 0.057222222 
& 38 423 512 89 0.058750000 0.071111111 
\ 39 512 567 55 0.071111111 0.07875 
( 40 572 611 39 0.079444444 0.084861111 
) 41 625 664 39 0.086805556 0.092222222 
* 42 681 743 62 0.094583333 0.103194444 
+ 43 761 842 81 0.105694444 0.116944444 
, 44 859 888 29 0.119305556 0.123333333 
- 45 902 945 43 0.125277778 0.13125 
. 46 981 997 16 0.136250000 0.138472222 
/ 47 991 1048 57 0.137638889 0.145555556 
0 48 1122 1188 66 0.155833333 0.165 
1 49 1142 1194 52 0.158611111 0.165833333 
2 50 1214 1278 64 0.168611111 0.1775 
3 51 1292 1355 63 0.179444444 0.188194444 
4 52 1365 1436 71 0.189583333 0.199444444 
5 53 1450 1511 61 0.201388889 0.209861111 
6 54 1524 1591 67 0.211666667 0.220972222 
7 55 1602 1668 66 0.222500000 0.231666667 
8 56 1680 1748 68 0.233333333 0.242777778 
9 57 1756 1824 68 0.243888889 0.253333333 
: 58 1849 1866 17 0.256805556 0.259166667 
; 59 1896 1925 29 0.263333333 0.267361111 
< 60 1954 2027 73 0.271388889 0.281527778 
= 61 2054 2129 75 0.285277778 0.295694444 
> 62 2156 2229 73 0.299444444 0.309583333 
? 63 2250 2305 55 0.312500000 0.320138889 
@ 64 2319 2425 106 0.322083333 0.336805556 
A 65 2434 2518 84 0.338055556 0.349722222 
B 66 2528 2599 71 0.351111111 0.360972222 
C 67 2607 2685 78 0.362083333 0.372916667 
D 68 2698 2779 81 0.374722222 0.385972222 
E 69 2792 2856 64 0.387777778 0.396666667 
F 70 2871 2932 61 0.398750000 0.407222222 
G 71 2936 3020 84 0.407777778 0.419444444 
H 72 3036 3109 73 0.421666667 0.431805556 
I 73 3126 3165 39 0.434166667 0.439583333 
J 74 3172 3217 45 0.440555556 0.446805556 
K 75 3236 3312 76 0.449444444 0.46 
L 76 3321 3381 60 0.461250000 0.469583333 
M 77 3389 3473 84 0.470694444 0.482361111 
N 78 3492 3565 73 0.485000000 0.495138889 
O 79 3579 3667 88 0.497083333 0.509305556 
P 80 3682 3744 62 0.511388889 0.52 
Q 81 3751 3841 90 0.520972222 0.533472222 
R 82 3853 3932 79 0.535138889 0.546111111 
S 83 3935 4008 73 0.546527778 0.556666667 
T 84 4011 4091 80 0.557083333 0.568194444 
U 85 4097 4170 73 0.569027778 0.579166667 
V 86 4178 4264 86 0.580277778 0.592222222 
W 87 4266 4383 117 0.592500000 0.60875 
X 88 4389 4468 79 0.609583333 0.620555556 
Y 89 4469 4547 78 0.620694444 0.631527778 
Z 90 4552 4625 73 0.632222222 0.642361111 
[ 91 4642 4677 35 0.644722222 0.649583333 
\ 92 4687 4744 57 0.650972222 0.658888889 
] 93 4749 4793 44 0.659583333 0.665694444 
^ 94 4805 4886 81 0.667361111 0.678611111 
_ 95 4893 4975 82 0.679583333 0.690972222 
' 96 4982 4998 16 0.691944444 0.694166667 
a 97 5010 5071 61 0.695833333 0.704305556 
b 98 5089 5152 63 0.706805556 0.715555556 
c 99 5161 5219 58 0.716805556 0.724861111 
d 100 5226 5287 61 0.725833333 0.734305556 
e 101 5303 5367 64 0.736527778 0.745416667 
f 102 5373 5418 45 0.746250000 0.7525 
g 103 5418 5479 61 0.752500000 0.760972222 
h 104 5499 5559 60 0.763750000 0.772083333 
i 105 5577 5597 13 0.774583333 0.776378888 
j 106 5595 5634 39 0.777083333 0.7825 
k 107 5652 5715 63 0.785000000 0.79375 
l 108 5725 5738 13 0.795138889 0.796944444 
m 109 5757 5860 103 0.799583333 0.813888889 
n 110 5878 5937 59 0.816388889 0.824583333 
o 111 5952 6016 64 0.826666667 0.835555556 
p 112 6030 6093 63 0.837500000 0.84625 
q 113 6103 6165 62 0.847638889 0.85625 
r 114 6184 6229 45 0.858888889 0.865138889 
s 115 6232 6287 55 0.865555556 0.873194444 
t 116 6293 6338 45 0.874027778 0.880277778 
u 117 6348 6407 59 0.881666667 0.889861111 
v 118 6419 6488 69 0.891527778 0.901111111 
w 119 6493 6588 95 0.901805556 0.915 
x 120 6593 6661 68 0.915694444 0.925138889 
y 121 6666 6735 69 0.925833333 0.935416667 
z 122 6742 6798 56 0.936388889 0.944166667 
{ 123 6810 6869 59 0.945833333 0.954027778 
| 124 6900 6913 13 0.958333333 0.960138889 
} 125 6944 7003 59 0.964444444 0.972638889 
~ 126 7022 7104 82 0.975277778 0.986666667 

這是我使用的HLSL幾何體着色器的片段。有了這個着色器,以及適當的頂點和像素着色器,我可以虛擬地渲染整段文本,以影響性能。 > 1,000個字符是不可知的。

struct VertexOutput 
{ 
    float4 Pos : SV_Position; 
    float4 Color : COLOR; 
    float2 TexCoords : TEXCOORD; 
    float4 Size : TEXCOORD1; 
}; 

struct GeometryOutput 
{ 
    float4 Pos : SV_Position; 
    float4 Color : COLOR; 
    float2 TexCoords : TEXCOORDS; 
}; 

struct Camera 
{ 
    float4x4 ViewProjection; 
    float4x4 Projection; 
    float4x4 View; 
    float4 Position; 
    float4 LookAt; 
}; 

texture2D <float> TextTextures : register(t6); 

[maxvertexcount(4)] 
void GShader(point VertexOutput Input[1], inout TriangleStream<GeometryOutput> OutputStream) 
{ 
    if(Input[0].TexCoords.x != Input[0].TexCoords.y) 
    { 
     GeometryOutput Output1 = (GeometryOutput)0; 
     GeometryOutput Output2 = (GeometryOutput)0; 
     GeometryOutput Output3 = (GeometryOutput)0; 
     GeometryOutput Output4 = (GeometryOutput)0; 

     if(Input[0].Pos.w == 1) 
      Output1.Pos = mul(Input[0].Pos, Cameras[0].ViewProjection); 
     else 
     { 
      Input[0].Pos.w = 1; 
      Output1.Pos = mul(Input[0].Pos, Cameras[0].ViewProjection); 
      Output1.Pos.xyz /= Output1.Pos.w; 
      Output1.Pos.w = 1; 
     } 
     Output2.Pos = Output1.Pos; 
     Output3.Pos = Output1.Pos; 
     Output4.Pos = Output1.Pos; 

     Output1.Pos.x += (Input[0].Size.z - Input[0].Size.x)/Resolution.x/2; 
     Output2.Pos.x += (Input[0].Size.z + Input[0].Size.x)/Resolution.x/2; 
     Output3.Pos.x += (Input[0].Size.z - Input[0].Size.x)/Resolution.x/2; 
     Output4.Pos.x += (Input[0].Size.z + Input[0].Size.x)/Resolution.x/2; 

     Output1.Pos.y += (Input[0].Size.w - Input[0].Size.y)/Resolution.y/2; 
     Output2.Pos.y += (Input[0].Size.w - Input[0].Size.y)/Resolution.y/2; 
     Output3.Pos.y += (Input[0].Size.w + Input[0].Size.y)/Resolution.y/2; 
     Output4.Pos.y += (Input[0].Size.w + Input[0].Size.y)/Resolution.y/2; 

     Output1.Color = Input[0].Color; 
     Output2.Color = Input[0].Color; 
     Output3.Color = Input[0].Color; 
     Output4.Color = Input[0].Color; 

     Output1.TexCoords = float2(Input[0].TexCoords.x,1); 
     Output2.TexCoords = float2(Input[0].TexCoords.y,1); 
     Output3.TexCoords = float2(Input[0].TexCoords.x,0); 
     Output4.TexCoords = float2(Input[0].TexCoords.y,0); 

     OutputStream.Append(Output1); 
     OutputStream.Append(Output3); 
     OutputStream.Append(Output2); 
     OutputStream.Append(Output4); 
    } 
} 
+0

有趣。我一定會考慮這個解決方案。我必須承認我之前從未做過粒子系統。我需要一些時間來解決它,但如果我這樣做,我一定會將其標記爲答案。謝謝。 – KairisCharm 2014-10-09 19:59:21

+0

我開始回來了。我一直忙於其他項目。 我在想這個,我在想你的解決方案的參數是什麼?你有沒有把它放在每個精靈都是不同的圖像的地方?因爲那是我需要的。一次有大約250張不同的圖像,性能會好嗎? – KairisCharm 2014-11-04 23:00:01

+0

我已經添加了一些更新的答案。 – 2014-11-05 19:47:47