乐趣区

关于android:小白安卓小白ios的都理解的渲染管线文章附可运行的安卓ios工程

jiezi

SoftRenderer


Android、iOS、Unity、Unreal 都能够运行，不应用任何图形库接口，纯代码来实现渲染管线，比起学习 Opengl 等更好的了解渲染管线，代码中都有具体注解。（感觉乏味麻烦给个 star）

平台 语言 工程门路 成果
https://github.com/wlxklyh/So… 2020-09-07-15-07-21.png
https://github.com/wlxklyh/So… 2020-09-16-20-43-34.png
https://github.com/wlxklyh/So… 2020-09-17-12-49-37.png
https://github.com/wlxklyh/So… 2020-09-17-12-49-41.png

前言

程序员的三大浪漫，编译原理、图形学、操作系统，所以我也有一种情节，想去学图形学。而后我拿起图形学的书，看完了第一章 似懂非懂，而后书又沾灰了。过了一段时间工作上遇到渲染管线相干的问题，而后又开始去网上看博客，看完之后也是似懂非懂，你是否也有跟我一样的经验了？Opengl 的接口背地是什么呢？渲染管线怎么用程序表白。于是我找到一个 skywind3000 的软渲染器，而后本人再实现一遍，这样之后对渲染管线的了解更加粗浅了。

通过代码来理解渲染管线 不调用图形库，ado、ios、unity、unreal 都能够运行

一、渲染管线

渲染管线流程图 

/*
 *  1、最简略的渲染流水线:
 *       分成 CPU 阶段和 GPU 阶段
 *      +--------------+     +-------------+
 *      |              |     |             |
 *      |     CPU      +----->     GPU     |
 *      |              |     |             |
 *      +--------------+     +-------------+
 *
 *  2、其中 CPU 阶段就是利用阶段  GPU 阶段包含了几何阶段和光栅化阶段
 *      +--------------+     +-----------------+  +----------------+   +----------------+
 *      |              |     |                 |  |                |   |                |
 *      |   利用阶段    +----->     几何阶段      +-->      光栅化     +--->     像素解决     |
 *      |              |     |                 |  |                |   |                |
 *      +--------------+     +-----------------+  +----------------+   +----------------+
 *
 *  3、几何阶段：*      +--------------+     +-----------------+  +------------------+   +-------------+  +-------------+
 *      |              |     |                 |  |                  |   |             |  |             |
 *      |  顶点着色器    +----->  曲面细分着色器    +-->     几何着色器     +--->    裁剪     |-->    屏幕投射  |
 *      |              |     |                 |  |                  |   |             |  |             |
 *      +--------------+     +-----------------+  +------------------+   +-------------+  +-------------+
 *
 *  4、光栅化阶段：*      +--------------+     +--------------+  +------------------+
 *      |              |     |              |  |                  |
 *      |  三角形遍历    +----->  三角形设置    +-->     片元着色器    |
 *      |              |     |              |  |                  |
 *      +--------------+     +--------------+  +------------------+
 *
 *  5、像素解决阶段：*        深度测试 ZTest
 *        颜色混合
 *      模板测试（模板缓冲）*

工程调用堆栈 

 *【阐明】：上面的代码依据下面的流水线来解说和划分
 *    绘制调用堆栈：*        HScreenDevice::Draw
 *            HScreenDevice::ClearScreen                                    清屏
 *            HCube::Draw                                                    Cube 绘制
 *                HCube::DrawBox                                            立方体绘制
 *                    HCube::DrawPlane                                    长方形绘制
 *                        HCube::DrawTriangle                                三角形绘制
 *
 *                            HCube::UpdateMVPMat()                            1、更新 MVP 矩阵                           -|
 *                            HCube::vert()                                    2、顶点着色器 之后就是裁剪空间坐标了           |
 *                                                                             3、曲面细分着色器 几何着色器【TODO】|---> 几何阶段
 *                            HCube::CheckTriangleInCVV()                      4、裁剪 查看在不在裁剪空间外面                |
 *                            HCube::CalTriangleScreenSpacePos()               5、屏幕投射                               -|
 *
 *                            HCube::InitTriangleInterpn()                     1、插值初始化 前面透视校对用               -|
 *                            Triangle::CalculateTrap() DrawTrap DrawScanline  2、三角形设置、三角形遍历 失去片元信息        |---> 光栅化阶段
 *                            HCube::frag                                      3、片元着色器                            -|
 *
 *                            ZTest Zwrite

二、工程阐明

Ado

  • 根本介绍：

用了 ImageView 来显示 HScreenDevice 的 buffer，次要去看 FirstFragment 这个的代码。

  • 如何关上工程：

用 AndroudStudio 关上

  • 主代码：

具体看代码的正文：
https://github.com/wlxklyh/So…

iOS

  • 根本介绍：

用了 UIImage 来显示 HScreenDevice 的 buffer，次要去看 SoftRenderer.h 这个的代码。

  • 如何关上工程：

xcode 关上工程

  • 主代码：

具体看代码的正文：
https://github.com/wlxklyh/So…

unity

  • 根本介绍：

MainScene 上面有个 Canvas Canvas 有个 Image,MainCode.cs 脚本每帧会调用软渲染器的 Draw, 而后把 FrameBuffer 数据取出来 调用 Unity 的 Texture2D.SetPixel 接口 而后用 Image 把这个 Texture2d 显示进去。

  • 如何关上工程：

Unity 关上工程 MainScene

  • 主代码：

具体看代码的正文：
https://github.com/wlxklyh/So…

Unreal

  • 根本介绍：

UMainUICpp 外面有个 MainImage 每帧会把软渲染器的数据显示到 MainImage 中，除此之外，没应用 Unreal 的其余接口。

  • 如何关上工程：

关上工程，关上 MainUILevel 关卡，而后运行就会如下显示

  • 主代码

具体看代码的正文：
https://github.com/wlxklyh/So…

三、TODO

后续要用 C ++ 跨平台。

  • 三角形裁剪欠缺
  • 几何着色器和片元着色器欠缺
  • BRDF 光照模型
  • 模板测试

附

欢送加微信探讨（备注 Gituhb）

个人简介：高级开发工程师，趣味和畛域（Unity、Unreal、cocos creator、安卓终端开发、ios 终端开发、音视频开发、图形学），欢送加 W：wlxklyh 探讨问题。（欢送 star：https://github.com/wlxklyh/So…）

个人简介：高级开发工程师，趣味和畛域（Unity、Unreal、cocos creator、安卓终端开发、ios 终端开发、音视频开发、图形学），欢送加 W：wlxklyh 探讨问题。（欢送 star：https://github.com/wlxklyh/So…）

退出移动版