【Away3D代码解读】(三):渲染核心流程(渲染)

时间:2023-03-08 21:58:34
【Away3D代码解读】(三):渲染核心流程(渲染)

还是老样子,我们还是需要先简略的看一下View3D中render方法的渲染代码,已添加注释:

 //如果使用了 Filter3D 的话会判断是否需要渲染深度图, 如果需要的话会在实际渲染之前先渲染深度图
if (_requireDepthRender)
//深度图会被渲染到 _depthRender 这个贴图对象上
renderSceneDepthToTexture(_entityCollector); // todo: perform depth prepass after light update and before final render
if (_depthPrepass)
renderDepthPrepass(_entityCollector); _renderer.clearOnRender = !_depthPrepass; //判断是否使用了滤镜
if (_filter3DRenderer && _stage3DProxy._context3D) {
//使用滤镜会进行特殊的渲染
_renderer.render(_entityCollector, _filter3DRenderer.getMainInputTexture(_stage3DProxy), _rttBufferManager.renderToTextureRect);
//滤镜渲染对象再渲染一次
_filter3DRenderer.render(_stage3DProxy, camera, _depthRender);
} else {
//如果没有使用滤镜则直接使用默认的渲染对象进行渲染
_renderer.shareContext = _shareContext;
if (_shareContext)
_renderer.render(_entityCollector, null, _scissorRect);
else
_renderer.render(_entityCollector); }

添加filters包中的滤镜可以通过设置View3D的filters3d属性,设置方法和原生显示对象的filters属性一致,不过需要注意的是该属性是针对整个3D场景渲染的。

本笔记的渲染流程解读就暂时抛开滤镜的渲染,专门解读核心的渲染流程。

说到Away3D的渲染,那么away3d.core.render这个包就一定要看一下,我们打开这个包后会发现多个以Renderer结尾的类,这些类都是核心的渲染类,我们主要查看DefaultRenderer类即可,Away3D默认的渲染类就是该类。

渲染流程:

我们先看看DefaultRenderer类的render方法,位于其父类RendererBase中:

 arcane function render(entityCollector:EntityCollector, target:TextureBase = null, scissorRect:Rectangle = null, surfaceSelector:int = 0):void
{
if (!_stage3DProxy || !_context)
return; //更新摄像机的投影矩阵
_rttViewProjectionMatrix.copyFrom(entityCollector.camera.viewProjection);
_rttViewProjectionMatrix.appendScale(_textureRatioX, _textureRatioY, 1); //执行渲染的方法
executeRender(entityCollector, target, scissorRect, surfaceSelector); // clear buffers
for (var i:uint = 0; i < 8; ++i) {
_context.setVertexBufferAt(i, null);
_context.setTextureAt(i, null);
}
}

我们发现实际是执行executeRender这段代码,先看DefaultRenderer的部分:

 protected override function executeRender(entityCollector:EntityCollector, target:TextureBase = null, scissorRect:Rectangle = null, surfaceSelector:int = 0):void
{
//更新光照数据
updateLights(entityCollector); //供 filters3d 使用, 我们可以不看
// otherwise RTT will interfere with other RTTs
if (target) {
drawRenderables(entityCollector.opaqueRenderableHead, entityCollector, RTT_PASSES);
drawRenderables(entityCollector.blendedRenderableHead, entityCollector, RTT_PASSES);
} //父级方法
super.executeRender(entityCollector, target, scissorRect, surfaceSelector);
}

再看RendererBase的部分:

 protected function executeRender(entityCollector:EntityCollector, target:TextureBase = null, scissorRect:Rectangle = null, surfaceSelector:int = 0):void
{
_renderTarget = target;
_renderTargetSurface = surfaceSelector; //对收集到的实体对象进行排序
if (_renderableSorter)
_renderableSorter.sort(entityCollector); //渲染到一个纹理, DefaultRenderer 中始终为 false, 略过即可
if (_renderToTexture)
executeRenderToTexturePass(entityCollector); //如果 target 存在则渲染到 target 对象, 否则渲染到后台缓冲区
_stage3DProxy.setRenderTarget(target, true, surfaceSelector); //清除 3D 场景
if ((target || !_shareContext) && _clearOnRender)
_context.clear(_backgroundR, _backgroundG, _backgroundB, _backgroundAlpha, 1, 0);
//设置深度测试
_context.setDepthTest(false, Context3DCompareMode.ALWAYS);
//设置裁剪区域
_stage3DProxy.scissorRect = scissorRect;
//背景渲染, 这个可以在底部绘制一个图像, 具体可以参考 BackgroundImageRenderer 类
if (_backgroundImageRenderer)
_backgroundImageRenderer.render(); //调用绘制方法
draw(entityCollector, target); //和 Starling 集成时需要还原深度测试
//line required for correct rendering when using away3d with starling. DO NOT REMOVE UNLESS STARLING INTEGRATION IS RETESTED!
_context.setDepthTest(false, Context3DCompareMode.LESS_EQUAL); //是否需要截屏到 _snapshotBitmapData 对象中
if (!_shareContext) {
if (_snapshotRequired && _snapshotBitmapData) {
_context.drawToBitmapData(_snapshotBitmapData);
_snapshotRequired = false;
}
}
//清空裁剪区域
_stage3DProxy.scissorRect = null;
}

我们先看看对实体对象进行排序的类,位于away3d.core.sort包中(包含接口IEntitySorter和类RenderableMergeSort),我们大概了解一下排序类的功能:通过排序获得更好的渲染效率。实体对象会先根据其使用的纹理和与摄像机之间的距离进行排序,不透明的物体会按从前到后的顺序排序,有混合模式的物体也会进行排序以确保得到正确的效果。

我们发现主要的渲染是通过调用自身的draw方法进行的,我们看下DefaultRenderer的draw方法:

 override protected function draw(entityCollector:EntityCollector, target:TextureBase):void
{
//设置混合因子
_context.setBlendFactors(Context3DBlendFactor.ONE, Context3DBlendFactor.ZERO); //如果存在天空盒就先绘制天空盒
if (entityCollector.skyBox) {
if (_activeMaterial)
_activeMaterial.deactivate(_stage3DProxy);
_activeMaterial = null; _context.setDepthTest(false, Context3DCompareMode.ALWAYS);
drawSkyBox(entityCollector);
} //设置深度测试
_context.setDepthTest(true, Context3DCompareMode.LESS_EQUAL); var which:int = target? SCREEN_PASSES : ALL_PASSES;
//渲染不透明的实体对象
drawRenderables(entityCollector.opaqueRenderableHead, entityCollector, which);
//渲染带有混合模式的实体对象
drawRenderables(entityCollector.blendedRenderableHead, entityCollector, which); //设置深度测试
_context.setDepthTest(false, Context3DCompareMode.LESS_EQUAL); //销毁 _activeMaterial 对象
if (_activeMaterial)
_activeMaterial.deactivate(_stage3DProxy); _activeMaterial = null;
}

我们来看看drawRenderables方法实现了什么功能:

 private function drawRenderables(item:RenderableListItem, entityCollector:EntityCollector, which:int):void
{
var numPasses:uint;
var j:uint;
var camera:Camera3D = entityCollector.camera;
var item2:RenderableListItem; //item 是类似于链表的结构, 通过 item 的 next 属性遍历所有需要渲染的实体对象
while (item) {
//获取纹理对象
_activeMaterial = item.renderable.material;
_activeMaterial.updateMaterial(_context); //获取纹理的 Pass 数量, 每个纹理可以附带多个 Pass 对象, Pass 对象进行最终的绘制操作
numPasses = _activeMaterial.numPasses;
j = 0; //下面是遍历纹理中的所有 Pass 对象
do {
item2 = item; var rttMask:int = _activeMaterial.passRendersToTexture(j)? 1 : 2; //这个判断还是判断是否需要渲染到纹理
if ((rttMask & which) != 0) {
//激活 Pass 对象
_activeMaterial.activatePass(j, _stage3DProxy, camera);
//渲染纹理相同的后续实体对象
do {
//使用 Pass 对象进行渲染
_activeMaterial.renderPass(j, item2.renderable, _stage3DProxy, entityCollector, _rttViewProjectionMatrix);
item2 = item2.next;
} while (item2 && item2.renderable.material == _activeMaterial);
//取消 Pass 对象的激活
_activeMaterial.deactivatePass(j, _stage3DProxy);
} else {
//跳过纹理相同的后续实体对象
do
item2 = item2.next;
while (item2 && item2.renderable.material == _activeMaterial);
} } while (++j < numPasses); item = item2;
}
}

其实到这里我们可以看到,Away3D中的渲染实际是遍历所有的SubMesh对象,通过调用SubMesh所指定的Material的renderPass方法来进行实际的渲染,而renderPass方法的第一个参数表示使用第几个Pass进行渲染,通过改变该参数到达遍历所有Pass对象进行渲染的目的。

接下来我们的解读暂停一下,看看新出现的Pass和Method对象:

  • 每一类纹理对应一个或多个Pass,其提供主要的渲染控制,每种纹理对应不同的渲染方式,具体点说就是主要提供AGAL的代码。
  • 每一个Pass可以添加多个Method,每一个Method对应一段追加的渲染脚本,本意就是在现有的渲染流程中提供一定的变数,比如颜色转换,纹理模糊、阴影等。

可以理解为Pass提供核心的渲染代码,而Method可以提供类似原生显示列表中的滤镜的功能,每当给一个纹理添加一个Method之后,对应的Method会对该Pass的片段着色器添加多行实现代码,同时也会提供部分可变参数作为常量提交到GPU。

具体的把Method的AGAL代码合并到Pass中是在ShaderCompiler的compileMethods方法中实现的。

下面我们继续解读渲染代码,我们看看MaterialBase类的renderPass方法:

 arcane function renderPass(index:uint, renderable:IRenderable, stage3DProxy:Stage3DProxy, entityCollector:EntityCollector, viewProjection:Matrix3D):void
{
//如果存在光源则处理光源
if (_lightPicker)
_lightPicker.collectLights(renderable, entityCollector); //获取对应的 pass 对象
var pass:MaterialPassBase = _passes[index]; //存在动画则更新动画状态
if (renderable.animator)
pass.updateAnimationState(renderable, stage3DProxy, entityCollector.camera); //使用 pass 进行渲染
pass.render(renderable, stage3DProxy, entityCollector.camera, viewProjection);
}

我跟着Basic_View示例进行调试时进入了CompiledPass类的render方法,当前随着不同的Pass对象,实际进行渲染的代码会不一样:

 arcane override function render(renderable:IRenderable, stage3DProxy:Stage3DProxy, camera:Camera3D, viewProjection:Matrix3D):void
{
var i:uint;
var context:Context3D = stage3DProxy._context3D;
if (_uvBufferIndex >= 0)
renderable.activateUVBuffer(_uvBufferIndex, stage3DProxy);
if (_secondaryUVBufferIndex >= 0)
renderable.activateSecondaryUVBuffer(_secondaryUVBufferIndex, stage3DProxy);
if (_normalBufferIndex >= 0)
renderable.activateVertexNormalBuffer(_normalBufferIndex, stage3DProxy);
if (_tangentBufferIndex >= 0)
renderable.activateVertexTangentBuffer(_tangentBufferIndex, stage3DProxy); if (_animateUVs) {
var uvTransform:Matrix = renderable.uvTransform;
if (uvTransform) {
_vertexConstantData[_uvTransformIndex] = uvTransform.a;
_vertexConstantData[_uvTransformIndex + 1] = uvTransform.b;
_vertexConstantData[_uvTransformIndex + 3] = uvTransform.tx;
_vertexConstantData[_uvTransformIndex + 4] = uvTransform.c;
_vertexConstantData[_uvTransformIndex + 5] = uvTransform.d;
_vertexConstantData[_uvTransformIndex + 7] = uvTransform.ty;
} else {
_vertexConstantData[_uvTransformIndex] = 1;
_vertexConstantData[_uvTransformIndex + 1] = 0;
_vertexConstantData[_uvTransformIndex + 3] = 0;
_vertexConstantData[_uvTransformIndex + 4] = 0;
_vertexConstantData[_uvTransformIndex + 5] = 1;
_vertexConstantData[_uvTransformIndex + 7] = 0;
}
} _ambientLightR = _ambientLightG = _ambientLightB = 0; if (usesLights())
updateLightConstants(); if (usesProbes())
updateProbes(stage3DProxy); if (_sceneMatrixIndex >= 0) {
renderable.getRenderSceneTransform(camera).copyRawDataTo(_vertexConstantData, _sceneMatrixIndex, true);
viewProjection.copyRawDataTo(_vertexConstantData, 0, true);
} else {
var matrix3D:Matrix3D = Matrix3DUtils.CALCULATION_MATRIX;
matrix3D.copyFrom(renderable.getRenderSceneTransform(camera));
matrix3D.append(viewProjection);
matrix3D.copyRawDataTo(_vertexConstantData, 0, true);
} if (_sceneNormalMatrixIndex >= 0)
renderable.inverseSceneTransform.copyRawDataTo(_vertexConstantData, _sceneNormalMatrixIndex, false); if (_usesNormals)
_methodSetup._normalMethod.setRenderState(_methodSetup._normalMethodVO, renderable, stage3DProxy, camera); var ambientMethod:BasicAmbientMethod = _methodSetup._ambientMethod;
ambientMethod._lightAmbientR = _ambientLightR;
ambientMethod._lightAmbientG = _ambientLightG;
ambientMethod._lightAmbientB = _ambientLightB;
ambientMethod.setRenderState(_methodSetup._ambientMethodVO, renderable, stage3DProxy, camera); if (_methodSetup._shadowMethod)
_methodSetup._shadowMethod.setRenderState(_methodSetup._shadowMethodVO, renderable, stage3DProxy, camera);
_methodSetup._diffuseMethod.setRenderState(_methodSetup._diffuseMethodVO, renderable, stage3DProxy, camera);
if (_usingSpecularMethod)
_methodSetup._specularMethod.setRenderState(_methodSetup._specularMethodVO, renderable, stage3DProxy, camera);
if (_methodSetup._colorTransformMethod)
_methodSetup._colorTransformMethod.setRenderState(_methodSetup._colorTransformMethodVO, renderable, stage3DProxy, camera); var methods:Vector.<MethodVOSet> = _methodSetup._methods;
var len:uint = methods.length;
for (i = 0; i < len; ++i) {
var set:MethodVOSet = methods[i];
set.method.setRenderState(set.data, renderable, stage3DProxy, camera);
} context.setProgramConstantsFromVector(Context3DProgramType.VERTEX, 0, _vertexConstantData, _numUsedVertexConstants);
context.setProgramConstantsFromVector(Context3DProgramType.FRAGMENT, 0, _fragmentConstantData, _numUsedFragmentConstants); renderable.activateVertexBuffer(0, stage3DProxy);
context.drawTriangles(renderable.getIndexBuffer(stage3DProxy), 0, renderable.numTriangles);
}

代码较多,也没有加上注释,大体上是对光源、动画、Method的处理,最后调用了Context3D的drawTriangles方法,对我们当前的Mesh对象进行了最终的绘制。