关于前端:十天自制软渲染器DAY-01图形学学习建议与环境搭建

6次阅读

共计 2936 个字符,预计需要花费 8 分钟才能阅读完成。

举荐间接浏览博客原文,更新更及时,浏览体验更佳

如果你感觉我写的不错,就给我个 点个赞 吧????!谢谢你,这对我真的很重要!

十天自制软渲染器」这个题目我抵赖题目党了. 在对图形学无所不知的状况下想十天自制一个软渲染器,就好似一节课没上过却试图一个早晨看完《30 天精通 C++》而后第二天早上八点考试得满分一样,我抵赖世界上有这种蠢才,但很惋惜我不是。

就像前文所说,本系列造的轮子都是站在伟人的肩膀上实现的,须要对相干常识有肯定的理解和学习,如果你是一个图形学大牛,这种软渲染器必定是不屑于做的;如果你刚刚进入图形学的大门,造一个软渲染器的轮子,十分利于你坚固本人的底层常识。

本文次要(90%)参考 ssloy 大神的 tinyrenderer 教程,零依赖实现一个软渲染器,通过这个教程能够实现一个繁难版本的 OpenGL2.0(即 rendering pipeline 只反对 Vertex ShaderFragment Shader 两种自定义 Shader 类型),理解 OpenGL 这类图形学 API 在底层是如何工作的。

我本人造的轮子是 toyRenderer,在 tinyrenderer 的根底上退出了大量的正文并按本人的了解优化了局部代码(不排除有反向优化),如果大家对 tinyrenderer 感兴趣,能够参考一下我的实现和我当初写的这个教程,点个 star ???? 就更好不过了~

本专栏的目录构造和 tinyrenderer 保持一致,不便大家比照浏览。

前置常识

要想看懂 tinyrenderer 的代码,须要有肯定的常识储备,上面是我在造轮子时的一些总结,大家学习前能够参考一下。

1. 数学

对于图形学来说,数学是一道绕不过的坎儿;对于这个软渲染器器轮子来说,并没有波及太多的数学内容,我集体总结如下:

1.1 高中数学

造一个软渲染器须要你还记得一些高中几何的内容,难度都不大,比如说直线的坐标公式,重心坐标等。

1.2 微积分

微积分其实只有大量的波及,原教程里有一点点梯度的内容,个人感觉对整体学习进度影响不大。

1.3 线性代数

线性代数波及的内容比拟多,从最简略的向量,再到各种坐标系变换,都须要对线性代数有比拟扎实的了解。

如果你线性代数都忘的差不多了,这里我举荐 3Blue1Brown 的教程——《线性代数的实质》,这是我见过 最好的线性代数入门教程了。而且图形学里波及的矩阵变换绝大部分都是三维空间的,基本上看完这门课就能够上手图形学的学习了。

2. 图形学

图形学入门课程我只举荐一个,闫令琪 大神的《GAMES101- 古代计算机图形学入门》

闫令琪大神有多厉害我就不多介绍了,最要害的是 GAMES101 长处太多了:

  • 全中文解说,大大降低国内小伙伴的学习门槛
  • 课程十分新,2020 年初才开课,不会存在课程 / 教案过期的状况
  • 知识点全面,正如课程名「古代图形学入门」,本课程岂但讲了经典的光栅化成像,还讲了光线追踪等绝对较新较前沿的内容

学完这门课能够播种什么呢?比如说 2077 的图形设置面板你都晓得是啥意思了

如果跟着这门课学下来,其实课下作业就会实现一个小的软渲染器,但因为我是前期才退出学习的,所以作业也没有跟着做,通过搜寻发现 tinyrenderer 这个教程举荐的人最多,所以最初参照这个教程实现了本人的软渲染器。

闫老师的是视频教程,大家能够配合他的 PPT 学习。如果习惯看书,我这里举荐两本,一本是赫赫有名的虎书《Fundamentals of Computer Graphics 4th Edition》,另一本是《Real Time Rendering 4th》,都是十分经典十分有名的书籍。

这两本书国内都没有引进,我这里有英文版的 PDF,大家能够看我个人简介,关注「卤蛋实验室 」后回复「 图形学」获取下载链接。

3.C++

本渲染器是用 C++ 写的,但用到的都是根底语法,略微高级点儿的常识就是模版编程和操作符重载。集体认为只有有其余语言根底,看个半小时的 C++ 语法就能够上手实际了。

如果下面的三个知识点都把握的差不多了,我打保票十天内必定能写出一个软渲染器;如果没有把握好(尤其是图形学基础知识),十天内实现是有些够呛。废话不多说,咱们先去搭环境吧!


本教程要做的是一个 零依赖 软渲染器,所以依赖的环境就是 C++ 的开发环境。

注:零依赖 意味着这个我的项目不依赖任何第三方库,软渲染 意味着所有计算都是在 CPU 侧进行的,没有 GPU 参加

C++ 环境搭建配置有多种办法,最快捷的形式就是间接用高度集成的 IDE,win 电脑能够用 Visual Studio,Mac 用户能够用 Xcode。当然你也能够用 CMake + VSCode 搭建 C++ 运行环境。

我这个人很懒,平时开发 Xcode 用的又比拟多,不想多折腾了,所以间接用 Xcode 构建我的项目了,小伙伴们千万不要学习我这种坏习惯。

Xcode 创立 C++ 我的项目

1. 新建我的项目

1.Xcode 创立 C++ 我的项目非常简单,启动 XCode 后点击 Create a new Xcode project,创立一个新我的项目

2. 在跳出的弹框里抉择 Command Line Tool,而后点击 Next

3. 在新的弹窗里填写好 Product NameLanguage 抉择 C++,而后点击 Next

4. 在新的弹窗里抉择我的项目门路,点击 Create 创立我的项目

到这里我的项目就创立好了。

2. 配置相对路径

软渲染器须要对硬盘上的一些文件做一些 IO 操作,这时候就须要配置我的项目的相对路径。

首先依照 Product -> Scheme -> Edit Scheme 的秩序,关上一个弹窗。

而后在弹窗里勾选 Using custom working directory,并抉择我的项目文件所在门路就可:

3. 把源代码拖进去

因为本我的项目是零依赖的,渲染形式是依据源代码生成一张 tga 格局的图片。因为咱们是来写软渲染器而不是写图片编码器的,所以间接把源代码里的 tgaimage.htgaimage.cpp 拖到咱们的我的项目工程里就能够了。

加上 main.cpp,当初的工程目录里只有三个文件

.
├── main.cpp
├── tgaimage.cpp
└── tgaimage.h

而后咱们在 main.cpp 里写一些简略的代码——创立一个 100×100 的图片,在 (52, 41) 这个坐标上画一个红的的点(rgb(255, 0, 0)

#include "tgaimage.h"

const TGAColor red = TGAColor(255, 0, 0, 255);

int main(int argc, char** argv) {TGAImage image(100, 100, TGAImage::RGB);
  image.set(52, 41, red);
  image.flip_vertically();
  image.write_tga_file("output/lesson00.tga");
  return 0;
}

点击 Xcode 左上角三角形的 build 按钮,如果编译胜利并在 output 这个文件夹下生成一张名为 lesson00.tga 的图片,就阐明环境配置胜利了!
(红点只有一个像素大,看不清能够点击查看大图)

明天在图片上画了一个点,今天咱们就学习一下如何 高性能 的画一条直线。


如果你感觉我写的不错,就给我个 点个赞 吧????!谢谢你,这对我真的很重要!

正文完
 0