前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Nebula3绘制2D纹理

Nebula3绘制2D纹理

作者头像
逍遥剑客
发布2018-05-23 12:56:22
4320
发布2018-05-23 12:56:22
举报
文章被收录于专栏:逍遥剑客的游戏开发

上次已经绘制过基本图元了, 这次只不过要贴张图而已.....

本来我想用Graphics的Model渲染流程来做, 不过这一层太高级了, 都是什么场景管理资源映射之类的

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

图形渲染的底层是CoreGraphics, 这个层我不打算再单独写(翻译)一篇了, 因为都是Direct3D概念的一些抽象. 也就是说D3D用熟了基本上一看就明白(用GL的我就不清楚啦, 嘿嘿, N3的作者都放弃用GL去实现@_@).

还记得D3D Tutorial中的Textured例子不? 需要的东西有带纹理坐标的点, 纹理. N3中也一样, 不过, 这里没法用固定管线了.

N3的设计的时候就放弃了固定管线(多么明智呀, 别喷我-_-, 我只会shader.......), 所以在这之前我们要先写一个shader来进行绘制.

因为我们只是进行简单的演示, 就尽量简单了, 写一个2D的纹理绘制, 你可以用来做UI:

代码语言:javascript
复制
//------------------------------------------------------------------------------  
//  texture2d.fx  
//  texture shader for 2D(UI)  
//  (C) xoyojank  
//------------------------------------------------------------------------------  
float2 halfWidthHeight  : HalfWidthHeight;  
texture diffMap     : DiffMap0;  
sampler diffMapSampler = sampler_state  
{  
    Texture = <diffMap>;  
    AddressU = Clamp;  
    AddressV = Clamp;  
    MinFilter = Point;  
    MagFilter = Point;  
    MipFilter = None;  
};  
struct VS_INPUT  
{  
    float3 pos  : POSITION;  
    float2 uv       : TEXCOORD;  
};  
struct VS_OUTPUT  
{  
    float4 pos  : POSITION;  
    float2 uv       : TEXCOORD;  
};  
//------------------------------------------------------------------------------  
/** 
*/ 
VS_OUTPUT  
VertexShaderFunc(VS_INPUT input)  
{  
    VS_OUTPUT output;  
    output.pos.xy = float2(input.pos.x - halfWidthHeight.x, halfWidthHeight.y - input.pos.y) / halfWidthHeight;  
    output.pos.zw = float2(input.pos.z, 1.0f);  
    output.uv = input.uv;  
 return output;  
}  
//------------------------------------------------------------------------------  
/** 
*/ 
float4  
PixelShaderFunc(float2 uv : TEXCOORD0) : COLOR  
{  
 return tex2D(diffMapSampler, uv);  
}  
//------------------------------------------------------------------------------  
/** 
*/ 
technique Default  
{  
    pass p0  
    {  
        ColorWriteEnable  = RED|GREEN|BLUE|ALPHA;  
        ZEnable           = False;  
        ZWriteEnable      = False;  
        StencilEnable     = False;  
        FogEnable         = False;  
        AlphaBlendEnable  = True;  
        SrcBlend          = SrcAlpha;  
        DestBlend         = InvSrcAlpha;  
        AlphaTestEnable   = False;  
        ScissorTestEnable = False;  
        CullMode          = CW;          
        VertexShader = compile vs_3_0 VertexShaderFunc();  
        PixelShader = compile ps_3_0 PixelShaderFunc();  
    }  
}  

值得一提的是CullMode = CW, 为什么? 因为N3用的右手坐标系, 这点又跟D3D不一样了........为什么呢? 难道写MAYA跟MAX的插件的时候比较省事?

还是要跟上一次一样设置顶点格式并载入VertexBuffer:

代码语言:javascript
复制
// vertex  
Array<VertexComponent> vertexComponents;  
vertexComponents.Append(VertexComponent(VertexComponent::Position, 0, VertexComponent::Float3));  
vertexComponents.Append(VertexComponent(VertexComponent::TexCoord, 0, VertexComponent::Float2));  
float vertex[4][5] = {  
    {0.0f,  0.0f,   0.0f,   0.0f, 0.0f},  
    {0.0f,  256.0f, 0.0f,   0.0f, 1.0f},   
    {256.0f,0.0f,   0.0f,   1.0f, 0.0f},   
    {256.0f,256.0f, 0.0f,   1.0f, 1.0f}  
};  
vertexBuffer = VertexBuffer::Create();  
Ptr<MemoryVertexBufferLoader> vbLoader = MemoryVertexBufferLoader::Create();  
vbLoader->Setup(vertexComponents, 4, vertex, 4 * 5 * sizeof(float));  
vertexBuffer->SetLoader(vbLoader.upcast<ResourceLoader>());  
vertexBuffer->Load();  
vertexBuffer->SetLoader(NULL);  

纹理的创建其实跟顶点差不多, 因为它都是属于资源的一种, 详见Nebula3资源子系统

代码语言:javascript
复制
 // texture  
texture = Texture::Create();  
texture->SetResourceId(ResourceId("bin:razor.jpg"));  
texture->SetLoader(StreamTextureLoader::Create());  
texture->Load();  
texture->SetLoader(NULL);  

shader的加载跟上一次一样, 只是参数不同:

代码语言:javascript
复制
// shader  
this->shaderInstance = this->shaderServer->CreateShaderInstance(ResourceId("shd:texture2d"));  
Ptr<ShaderVariable> halfWidthHeight = this->shaderInstance->GetVariableBySemantic(ShaderVariable::Semantic("HalfWidthHeight"));  
float2 halfWH = float2(this->renderDevice->GetDefaultRenderTarget()->GetWidth(), this->renderDevice->GetDefaultRenderTarget()->GetHeight()) * 0.5f;  
halfWidthHeight->SetFloatArray(&halfWH.x(), 2);  
Ptr<ShaderVariable> diffMap = this->shaderInstance->GetVariableBySemantic(ShaderVariable::Semantic("DiffMap0"));  
diffMap->SetTexture(texture); 

绘制嘛, 当然改成矩形了, 图片可贴不到一跟线上:

代码语言:javascript
复制
this->renderDevice->BeginFrame();  
this->renderDevice->BeginPass(this->renderDevice->GetDefaultRenderTarget(), this->shaderInstance);  
PrimitiveGroup primGroup;  
primGroup.SetBaseVertex(0);  
primGroup.SetNumVertices(4);  
primGroup.SetPrimitiveTopology(PrimitiveTopology::TriangleStrip);  
this->renderDevice->SetVertexBuffer(this->vertexBuffer);  
this->renderDevice->SetPrimitiveGroup(primGroup);  
this->renderDevice->Draw();  
this->renderDevice->EndPass();  
this->renderDevice->EndFrame();  
this->renderDevice->Present();  

上图:

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2008年11月30日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档