小白安卓、小白ios的都理解的渲染管线文章(附可运行的安卓、ios工程)

wlxklyh 2020/10/15 8:03:41

SoftRenderer Android、iOS、Unity、Unreal都可以运行,不使用任何图形库接口,纯代码来实现渲染管线,比起学习Opengl等更好的理解渲染管线,代码中都有详细注解。(觉得有趣麻烦给个star) 平台 语言 工程路径 效果 android Java https://github.com/wlxklyh/SoftRender…

SoftRenderer

Android、iOS、Unity、Unreal都可以运行,不使用任何图形库接口,纯代码来实现渲染管线,比起学习Opengl等更好的理解渲染管线,代码中都有详细注解。(觉得有趣麻烦给个star)

平台 语言 工程路径 效果
android Java https://github.com/wlxklyh/SoftRenderer/tree/master/Ado 图片描述
iOS oc https://github.com/wlxklyh/SoftRenderer/tree/master/iOS 图片描述
Unity C# https://github.com/wlxklyh/SoftRenderer/tree/master/Unity 图片描述
Unreal C++ https://github.com/wlxklyh/SoftRenderer/tree/master/Unreal 图片描述

图片描述

前言

程序员的三大浪漫,编译原理、图形学、操作系统,所以我也有一种情节,想去学图形学。然后我拿起图形学的书,看完了第一章 似懂非懂,然后书又沾灰了。过了一段时间工作上遇到渲染管线相关的问题,然后又开始去网上看博客,看完之后也是似懂非懂,你是否也有跟我一样的经历了?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/SoftRenderer/blob/master/Ado/app/src/main/java/com/wlxklyh/softrenderer/FirstFragment.java

iOS

  • 基本介绍:
    用了UIImage来显示HScreenDevice的buffer,主要去看SoftRenderer.h这个的代码。

  • 如何打开工程:
    xcode打开工程

  • 主代码:
    具体看代码的注释:
    https://github.com/wlxklyh/SoftRenderer/blob/master/iOS/SoftRenderer/SoftRenderer/SoftRenderer.h

unity

  • 基本介绍:
    MainScene下面有个Canvas Canvas有个Image,MainCode.cs脚本每帧会调用软渲染器的Draw,然后把FrameBuffer数据取出来 调用Unity的Texture2D.SetPixel接口 然后用Image把这个Texture2d显示出来。

  • 如何打开工程:
    Unity打开工程 MainScene

  • 主代码:
    具体看代码的注释:
    https://github.com/wlxklyh/SoftRenderer/blob/master/Unity/Assets/MainCode.cs

Unreal

  • 基本介绍:
    UMainUICpp里面有个MainImage 每帧会把软渲染器的数据显示到MainImage中,除此之外,没使用Unreal的其他接口。

  • 如何打开工程:
    打开工程,打开MainUILevel关卡,然后运行就会如下显示

  • 主代码
    具体看代码的注释:
    https://github.com/wlxklyh/SoftRenderer/blob/master/Unreal/Source/Graphic/SoftRenderer/ScreenDevice.h

三、TODO

后续要用C++跨平台。

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

个人简介:高级开发工程师,兴趣和领域(Unity、Unreal、cocos creator、安卓终端开发、ios终端开发、音视频开发、图形学),欢迎star:https://github.com/wlxklyh/SoftRenderer

随时随地学软件编程-关注百度小程序和微信小程序
关于找一找教程网

本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[小白安卓、小白ios的都理解的渲染管线文章(附可运行的安卓、ios工程)]http://www.zyiz.net/tech/detail-148024.html

上一篇:一套全面又有实际意义的axios封装+api管理方案

下一篇:没有了

赞(0)

共有 条评论 网友评论

验证码: 看不清楚?
    关注微信小程序
    程序员编程王-随时随地学编程

    扫描二维码或查找【程序员编程王】

    可以随时随地学编程啦!

    技术文章导航 更多>
    扫一扫关注最新编程教程