在stage3D中实现后期处理

也许后期处理这个词很难理解,实际上就是对 GPU渲染完成的帧再进行处理。
在stage3D中,我们可以将GPU的图形渲染到纹理中,然后对这张图片进行各种处理,比如雾化,HDR, 模糊, 扭曲 等等 …

实际操作起来非常简单,代码也非常的少。 先上效果图,然后是源码,最后是Demo

postProcessing

我们要做的仅仅几步
[cc lang=”actionscript3″]
private function renderPostProcessing() : void
{
// Render the scene to the scene texture
m_context.setRenderToTexture(m_sceneTexture, true);
renderCube();
m_context.setRenderToBackBuffer();

m_context.setProgram(m_normalShader);
m_context.setTextureAt(0, m_sceneTexture);
m_context.clear(0.5,0.5,0.5);

m_modelMatrix.identity();
m_modelMatrix.appendTranslation(0,0,1.21);

m_finalMatrix.identity();
m_finalMatrix.append(m_modelMatrix);
m_finalMatrix.append(m_viewMatrix);
m_finalMatrix.append(m_projMatrix);

m_context.setVertexBufferAt(0, m_sceneVertexBuffer, 0, Context3DVertexBufferFormat.FLOAT_3);
m_context.setVertexBufferAt(1,m_sceneVertexBuffer, 3, Context3DVertexBufferFormat.FLOAT_2);

m_context.setProgramConstantsFromMatrix(Context3DProgramType.VERTEX, 0, m_finalMatrix, true);

m_context.drawTriangles(m_sceneIndexBuffer,0,2);
m_context.setTextureAt(0,null);
m_context.setVertexBufferAt(0,null);
m_context.setVertexBufferAt(1,null);
}
[/cc]

重点就3句,设置GPU输出图像到指定的纹理。
因此事先需要创建一张和视口等大的贴图
m_context.setRenderToTexture(m_sceneTexture, true);
绘制原始的场景
renderCube();
现在纹理已经被填充了,因此我们设置GPU输出到后缓冲,也就是视口
m_context.setRenderToBackBuffer();

之后我们就可以对纹理做些奇怪的事情了。
你可以按1,2,3,4,5 来看各种效果, 按0重置
Demo is Here : demo

我已经把源码上传到github
https://github.com/dreamfairy/3DDemo/blob/master/StencilShadow/src/PostProcessing.as

接下来,我打算来实现HDR效果~一定很棒!

发表评论

电子邮件地址不会被公开。 必填项已用*标注