飛揚天下

上次已經繪制過基本圖元了, 這次只不過要貼張圖而已.....

本來我想用Graphics的Model渲染流程來做, 不過這一層太高級了, 都是什么場景管理資源映射之類的

做低級的事情, 就要用低級的API嘛

圖形渲染的底層是CoreGraphics, 這個層我不打算再單獨寫(翻譯)一篇了, 因為都是Direct3D概念的一些抽象. 也就是說D3D用熟了基本上一看就明白(用GL的我就不清楚啦, 嘿嘿, N3的作者都放棄用GL去實現@_@).

還記得D3D Tutorial中的Textured例子不? 需要的東西有帶紋理坐標的點, 紋理. N3中也一樣, 不過, 這里沒法用固定管線了.

N3的設計的時候就放棄了固定管線(多么明智呀, 別噴我-_-, 我只會shader.......), 所以在這之前我們要先寫一個shader來進行繪制.

因為我們只是進行簡單的演示, 就盡量簡單了, 寫一個2D的紋理繪制, 你可以用來做UI:

1. //------------------------------------------------------------------------------
2. //  texture2d.fx
3. //  texture shader for 2D(UI)
4. //  (C) xoyojank
5. //------------------------------------------------------------------------------
7. float2 halfWidthHeight  : HalfWidthHeight;
8. texture diffMap     : DiffMap0;
9. sampler diffMapSampler = sampler_state
10. {
11.     Texture = <diffMap>;
12.     AddressU = Clamp;
13.     AddressV = Clamp;
14.     MinFilter = Point;
15.     MagFilter = Point;
16.     MipFilter = None;
17. };
19. struct VS_INPUT
20. {
21.     float3 pos  : POSITION;
22.     float2 uv       : TEXCOORD;
23. };
25. struct VS_OUTPUT
26. {
27.     float4 pos  : POSITION;
28.     float2 uv       : TEXCOORD;
29. };
31. //------------------------------------------------------------------------------
32. /**
33. */
34. VS_OUTPUT
35. VertexShaderFunc(VS_INPUT input)
36. {
37.     VS_OUTPUT output;
39.     output.pos.xy = float2(input.pos.x - halfWidthHeight.x, halfWidthHeight.y - input.pos.y) / halfWidthHeight;
40.     output.pos.zw = float2(input.pos.z, 1.0f);
41.     output.uv = input.uv;
43. return output;
44. }
46. //------------------------------------------------------------------------------
47. /**
48. */
49. float4
50. PixelShaderFunc(float2 uv : TEXCOORD0) : COLOR
51. {
52. return tex2D(diffMapSampler, uv);
53. }
55. //------------------------------------------------------------------------------
56. /**
57. */
58. technique Default
59. {
60.     pass p0
61.     {
62.         ColorWriteEnable  = RED|GREEN|BLUE|ALPHA;
63.         ZEnable           = False;
64.         ZWriteEnable      = False;
65.         StencilEnable     = False;
66.         FogEnable         = False;
67.         AlphaBlendEnable  = True;
68.         SrcBlend          = SrcAlpha;
69.         DestBlend         = InvSrcAlpha;
70.         AlphaTestEnable   = False;
71.         ScissorTestEnable = False;
72.         CullMode          = CW;        
73.         VertexShader = compile vs_3_0 VertexShaderFunc();
74.         PixelShader = compile ps_3_0 PixelShaderFunc();
75.     }
76. }

值得一提的是CullMode = CW, 為什么? 因為N3用的右手坐標系, 這點又跟D3D不一樣了........為什么呢? 難道寫MAYA跟MAX的插件的時候比較省事?

還是要跟上一次一樣設置頂點格式并載入VertexBuffer:

1. // vertex
2.             Array<VertexComponent> vertexComponents;
3.             vertexComponents.Append(VertexComponent(VertexComponent::Position, 0, VertexComponent::Float3));
4.             vertexComponents.Append(VertexComponent(VertexComponent::TexCoord, 0, VertexComponent::Float2));
5. float vertex[4][5] = {
6.                 {0.0f,  0.0f,   0.0f,   0.0f, 0.0f},
7.                 {0.0f,  256.0f, 0.0f,   0.0f, 1.0f}, 
8.                 {256.0f,0.0f,   0.0f,   1.0f, 0.0f}, 
9.                 {256.0f,256.0f, 0.0f,   1.0f, 1.0f}
10.             };
11.             vertexBuffer = VertexBuffer::Create();
12.             Ptr<MemoryVertexBufferLoader> vbLoader = MemoryVertexBufferLoader::Create();
13.             vbLoader->Setup(vertexComponents, 4, vertex, 4 * 5 * sizeof(float));
14.             vertexBuffer->SetLoader(vbLoader.upcast<ResourceLoader>());
15.             vertexBuffer->Load();
16.             vertexBuffer->SetLoader(NULL);

紋理的創建其實跟頂點差不多, 因為它都是屬于資源的一種, 詳見Nebula3資源子系統

1. // texture
2.             texture = Texture::Create();
3.             texture->SetResourceId(ResourceId("bin:razor.jpg"));
4.             texture->SetLoader(StreamTextureLoader::Create());
5.             texture->Load();
6.             texture->SetLoader(NULL);

shader的加載跟上一次一樣, 只是參數不同:

1. // shader
2. this->shaderInstance = this->shaderServer->CreateShaderInstance(ResourceId("shd:texture2d"));
3.             Ptr<ShaderVariable> halfWidthHeight = this->shaderInstance->GetVariableBySemantic(ShaderVariable::Semantic("HalfWidthHeight"));
4.             float2 halfWH = float2(this->renderDevice->GetDefaultRenderTarget()->GetWidth(), this->renderDevice->GetDefaultRenderTarget()->GetHeight()) * 0.5f;
5.             halfWidthHeight->SetFloatArray(&halfWH.x(), 2);
6.             Ptr<ShaderVariable> diffMap = this->shaderInstance->GetVariableBySemantic(ShaderVariable::Semantic("DiffMap0"));
7.             diffMap->SetTexture(texture);

繪制嘛, 當然改成矩形了, 圖片可貼不到一跟線上:

1. this->renderDevice->BeginFrame();
2. this->renderDevice->BeginPass(this->renderDevice->GetDefaultRenderTarget(), this->shaderInstance);
3.         PrimitiveGroup primGroup;
4.         primGroup.SetBaseVertex(0);
5.         primGroup.SetNumVertices(4);
6.         primGroup.SetPrimitiveTopology(PrimitiveTopology::TriangleStrip);
8. this->renderDevice->SetVertexBuffer(this->vertexBuffer);
9. this->renderDevice->SetPrimitiveGroup(primGroup);
10. this->renderDevice->Draw();
11. this->renderDevice->EndPass();
12. this->renderDevice->EndFrame();
13. this->renderDevice->Present();

上圖: