cg
嘿克不黑
因为热爱,成就梦想。
展开
-
实现一个简单的软光栅
0. 前言网上都说入门图形学需要手写一个软光栅。虽然我接触dx挺久了,去年也使用miniEngine实践了一下dx12的龙书。但总感觉还是什么都不会。网上搜索了很多图形学的东西,于是决定写一个简单的软光栅,把零散的知识点串一下。参考文章:如何开始用 C++ 写一个光栅化渲染器?想用C++实现一个软件渲染器参考源码:tinyrenderer1. 创建一个win32窗口这一步非常的简单。参照官方代码即可。创建win32窗口#include <windows.h>L转载 2020-05-16 12:18:11 · 2573 阅读 · 1 评论 -
深入探索透视纹理映射(下)
在上一篇文章中,我们探讨了学习透视纹理映射所需要的基础知识。我们知道了顶点在通过透视投影变换之后,是如何一步一步通过流水线进入屏幕空间的。也知道了一个非常简单的三角形扫描线转换算法,以及通过线性插值实现的仿射纹理映射。尽管我们使用的这个流程非常的直接、简洁,还有大量的细节没有添加(片元操作、雾化、颜色累加、混合等等等等),但这些真的就是组成一个固定流水线的简单光栅器的基本步骤了。但我们目前所提及的...转载 2020-05-07 09:33:46 · 523 阅读 · 0 评论 -
ACM几何基础篇
文章目录 1 前言 1.1 生产生活 1.2 ICPC竞赛 2 准备知识 2.1 头文件及函数及常量 2.2 浮点误差 2.2.1 计算误差 2.2.2 判等 2.2.2.1 解决方案 1 误差判别法 2...转载 2020-05-06 10:51:02 · 582 阅读 · 0 评论 -
图形流水线中光栅化原理与实现
光栅化主要解决的问题在传统图形学流水线,技术难点可以分为两大类:可见性(visibility) 着色(shading文章https://zhuanlan.zhihu.com/p/96055193中的坐标系变换和本文介绍的光栅化就是解决 可见性(visibility) 的关键技术。着色(shading) 涉及到后续局部光照模型以及全局光照模型。这类知识点在以后我学明白后再写文...转载 2020-05-06 08:22:32 · 704 阅读 · 0 评论 -
SoftRenderer&RenderPipeline(从迷你光栅化软渲染器的实现看渲染流水线)
简介这是可能一篇没有什么实际作用的文章,因为没有任何shader效果实现,整篇文章到最后,我只实现了一个旋转的立方体(o(╯□╰)o,好弱),和游戏引擎渲染的万紫千红的3D世界显得有很大落差,仿佛一切都回到了最初的起点(不知道有没有人能猜出来左侧的是哪部游戏大作的截图(*^▽^*))。不过实时渲染繁华的背后,还是这看似简单的光栅化。今天,本人打算学习一下基本的光栅化渲染的过程,看一下怎样把...转载 2020-05-05 20:14:40 · 1303 阅读 · 0 评论 -
FreeImage
一、什么是FreeImage? FreeImage 是一款免费的、开源的、跨平台(Windows、Linux 和Mac OS X)的,支持20 多种图像类型的(如BMP 、JPEG、GIF 、PNG、TIFF 等)图像处理库。其最大优点就是采用插件驱动型架构,具有快速、灵活、简单易用的特点,得到了广泛使用。相关的源码、库文件及帮助文档可以从http://freeima...转载 2020-05-04 09:09:49 · 576 阅读 · 0 评论 -
透视矫正插值
1、介绍翻译 2020-05-04 15:02:56 · 836 阅读 · 0 评论 -
点在三角形中的测试
同侧技术检查点是否在三角形中的一种常见方法是,找到将点连接到三角形三个顶点中每个顶点的向量,并求出这些向量之间的角度之和。如果角度之和为2*pi,则该点位于三角形内,否则不在三角形内。它起作用,但速度很慢。这篇文章解释了一个更快更简单的方法。首先,原谅那些讨厌的颜色。我真的很抱歉。诚实。好的,ABC形成一个三角形,里面所有的点都是黄色的。AB线、BC线和CA线各将空间分成两半,其...翻译 2020-05-03 20:27:35 · 609 阅读 · 0 评论 -
图形学 光照原理详解
在光栅化和坐标系空间变换里,我讲了怎么让图形显示在屏幕上并着色(shade),但这个只是简单的纯色,在现在的渲染引擎或游戏引擎里,让画面更加真实,还需要光照和贴图。本篇只讲光照的实现。首先,在物理学里我们知道,物体的颜色其实是它反射的光的颜色。光是白色的,但它的白色是由许许多多不同颜色不同频率的光混在一起呈现的,也就是光谱(spectrum)。红色的物体反射红光比较多,蓝光和绿光则被吸收。白色...转载 2020-05-03 19:37:38 · 1413 阅读 · 0 评论 -
为什么3D游戏相机会抖动?详解Gimbal Lock
当大家在玩3D自由视角的游戏时,如果你向上或者向下看,有时会出现相机突然向某个方向抽搐了一下的情况,这种现象在图形学中有个专有称谓,叫Gimbal Lock (万向节死锁,或叫 环向锁节)参考视频:Euler (gimbal lock) Explained首先,我们知道在三维坐标系下,相机可以沿着X, Y, Z三个轴转动,也就是传统的欧拉坐标系旋转。如图,绿色代表Y轴转动轴,红色代表...转载 2020-05-03 16:17:07 · 776 阅读 · 0 评论 -
图形学 遮挡剔除算法综述
1. Hidden Line Removal (HLR)在光栅化的文章中,我们使用Z-Buffer来判断三角形面片是否遮挡,但Z-Buffer不适用于纯线框的模型的遮挡剔除。原因如下。就如同上图左侧,在A点的位置,左侧的三角形由于只画边不画面,所以A点它是不画的,所以就没有Z值来与右侧的三角形的A点的Z值做比较,因此就没法判断A点是谁在前谁在后。HLR算法总结 Ray...转载 2020-05-03 15:46:00 · 1582 阅读 · 0 评论 -
如何判断屏幕的哪些像素点在该三角形内部?
如何判断屏幕的哪些像素点在该三角形内部?主流的算法有两种:1.LEE(Linear Expression Evaluation)2.Scan Line本期只讲LEE,因为Scan Line我没有亲自搞过。LEE大致原理如下:首先因为屏幕只有二维,所以判断点和边的位置关系的时候可以先不管Z,Z只是用来判断前后遮挡的。 按照顺时针(或者逆时针)的顺序,连接v1v2, v2v3, v3v1...转载 2020-05-03 15:28:22 · 1401 阅读 · 0 评论 -
用C++编写一个简单的光栅化渲染器:2D篇
本篇文章将会介绍2D的几何图元光栅化算法,此外还会涉及几何裁剪算法。1.2D坐标系本文在光栅化过程中所采用的2D坐标系(Screen space)如下:红色框为Viewport,Viewport左上角为坐标系原点,y轴向下此2D坐标系以Viewport左上角为原点,处于Viewport中的点的坐标范围为:2.画点绘制2D点直接将点的颜色设置到对应坐标即可:vo...转载 2020-05-03 15:07:42 · 1253 阅读 · 0 评论 -
简单易用的图像解码库介绍 —— stb_image
说到图像解码库,最容易想起的就是 libpng 和 libjpeg 这两个老牌图像解码库了。libpng 和 libjpeg 分别各自对应 png 和 jpeg 两种图像格式。这两种格式的区别如下:png 支持透明度,无损压缩的图片格式,能在保证不失真的情况下尽可能压缩图像文件的大小,因此图像质量高,在一些贴纸应用中也大部分用的是 png 图片。jpg 不支持透明度,有损压缩的图片格式...转载 2020-05-02 08:35:17 · 4994 阅读 · 0 评论 -
浅谈 GPU图形固定渲染管线
阅读目录1. 应用程序阶段(CPU) 1.1 视锥裁剪 1.2场景图 1.3四叉树与八叉树 2. 几何阶段(GPU) 2.1 坐标系统 局部坐标系 世界坐标系 观察坐标系 视口坐标系(屏幕坐标系) 2.2图元装配 3. 光栅化阶段 3.1 背面剔除 3.2 alpha测试 3.3 模板测试 3.4 深度测试 3....转载 2020-05-01 20:00:50 · 478 阅读 · 0 评论 -
深入探索透视纹理映射(上)
在这篇文章中,我们将探讨图形流水线中另一个复杂的主题——透视纹理映射(Perspective Texture Mapping)。你可能听说过仿射纹理映射(Affine Texture Mapping)(没听过?没关系,我会让你理解的),并且知道在大多数情况下仿射的已经足够了,但如果不能很好的理解透视纹理校正,可能某一天当你在3D空间中移动相机的时候,突然发现你所熟悉的一些场景开始在屏幕上剧烈地“蠕...转载 2020-05-01 15:46:28 · 469 阅读 · 0 评论 -
一个简单光栅器的实现(五) 光栅化阶段
在几何阶段我们通过顶点变换获得了世界坐标下的顶点最终渲染到屏幕上的位置和它们的深度值,并且在剔除掉了不在视锥体内顶点,接下来要做的就是根据顶点的位置和三角形索引渲染出模型的每一个三角形。这个简单的光栅器会实现三种渲染模式,分别是贴图模式、顶点插值和线框模式。对于线框模式,需要做的就是根据每一个边的端点的坐标,通过计算,找出最拟合这条直线的一系列的像素。而贴图模式和顶点插值模式模式的...转载 2020-05-01 12:06:40 · 1041 阅读 · 1 评论 -
一个简单光栅器的实现(四) 几何阶段的坐标变换的C++实现
之前介绍了几何阶段坐标变换的原理,接下来使用C++来进行实现。Transform首先定义一个Transform类,它存储了之前介绍的3个重要的变换矩阵和屏幕的宽高,负责处理顶点的变换,剔除class Transform{public: Matrix4f _worldTransform, _viewTransform, _perspectiveTransform, _t...转载 2020-05-01 10:45:24 · 420 阅读 · 0 评论 -
一个简单光栅器的实现(三) 几何阶段的坐标变换
顶点空间(Model Space)->世界空间(World Space)从顶点空间到世界空间的变换实际上就是平移、旋转和缩放的组合,如果用过Unity,你会发现Transform组件中对应的Position、Rotation和Scale对应的就是这平移、旋转和缩放变换。所以我们可以用之前的编写数学库轻易的构造出一个世界变换矩阵(World Transform)。...转载 2020-05-01 09:38:54 · 772 阅读 · 0 评论 -
一个简单光栅器的实现(二) 基础数学与数学库的实现
理解了绘制管线,我们发现其中充满对矩阵和向量等数学工具的运用,在实现流水线之前,我们需要实现一套自己的C++数学库。为了方便管理,先定义一些常用的数据类型using _DOUBLE = double;using _FLOAT = float;using _LONG = long;using _INT32 = int;using _UINT32 = unsigned int;us...转载 2020-04-30 20:42:36 · 474 阅读 · 0 评论 -
一个简单光栅器的实现(一) 渲染管线的简述
经典的图形学书籍<<Real-Time Rendering, Third Edition>>书中将渲染流程分成了三个部分,应用阶段(Application Stage),几何阶段(Geometry Stage),光栅化阶段(Rasterizer Stage)。不过这些阶段仅仅是在概念上的,本身GPU渲染的过程是一个流水线的过程。渲染流程应用阶段从名字中就可以...转载 2020-04-30 19:46:06 · 402 阅读 · 0 评论 -
软件光栅化(确定3d三角形的三个顶点的坐标位置。)
计算三个点的坐标,那么熟悉模型的朋友应该知道要有两个数据,一个是顶点坐标数据,一个是顶点索引数据,在dx11和opengl中,都会把这两个数据缓存在硬件缓存区中,软件光栅化,我们拿到这两个数据,取出一个三角形的三个点的坐标,通过mvp变换就可以完成坐标得一部分转换,但是还有一部分是什么呢?如上图,乘上mvp矩阵后,也就相当于完成了投影变换,仅此而已,下边的步骤一般是硬件为我们完成的,但是软件光...转载 2020-04-30 15:44:38 · 769 阅读 · 0 评论 -
齐次空间的裁剪
图形流水线中齐次空间的裁剪(1)1. 本文将分为下面三部分引入:为什么不在投影除法后裁剪? 为什么能用齐次坐标进行裁剪 使用齐次坐标裁剪的步骤2. 引入:为什么不在投影除法后裁剪 在齐次空间对顶点和线裁剪是如今图形学管线进行裁剪的标准做法。一个世界坐标系下点经过观察变换后会映射到屏幕空间,在这其中会经过如下的矩阵变换:世界坐标系到相机坐标系的变化,相机坐标系下的透视投影变换...转载 2020-04-30 08:21:00 · 905 阅读 · 1 评论 -
推导正交投影变换
之前我们在《深入探索透视投影变换》以及《深入探索透视投影变换(续)》中研究了OpenGL、D3D以及M3G的透视投影变换的原理以及生成方法。这些方法在当前的主流图形API中得到了普遍使用。但关于投影应用,还有一类经常使用的投影方式需要我们深入理解——正交投影,我们在本篇文章里面研究它(这里假设读者已经看过前两篇文章,并理解了绝大多数的理论,因为正交投影比透视投影的推导关系简单得多,因此我们的推导...转载 2020-04-29 20:37:09 · 531 阅读 · 0 评论 -
光线追踪渲染(RayTracing Render)核心原理详解
转载 2020-04-29 08:00:04 · 1004 阅读 · 0 评论 -
从零实现3D图像引擎:(15)三角形的光栅化
1. 为什么要光栅化一个三角形我们不能总让我们的引擎显示线框,要支持实心颜色、光照还有纹理贴图,这些都需要光栅化一个三角形作为支持。2. 三角形的类型为了方便光栅化,一般将三角形分为以下4种:3. 平底三角形光栅化先上图:光栅化平底三角形的原理很简单,就是从上往下画横线。在图里我们取任意的一条光栅化直线,这条直线左边的端点x值为XL,右边的为XR。y值就不用考虑了,...转载 2020-04-28 19:38:21 · 544 阅读 · 0 评论 -
从零实现3D图像引擎:(14)背面消隐的三大陷阱
1. 为什么要背面消隐通过之前的DEMO,能够知道如果在渲染过程中多边形越多,那么要不处理的内容就越多,就越消费计算机的处理能力。对于物体来说,一般我们只看到它面对我们的面,可能不是正对着,但是肯定有很多面是完全背对我们的,我们就应该在渲染时跳过他们。这将减少大约一半的三角形渲染量。原理其实很简单,就是向量与平面的关系,这个原理我在参数化直线与平面的那篇文章中特意推导了整个来龙去脉。我喜欢...转载 2020-04-28 19:13:46 · 538 阅读 · 0 评论 -
深入探索透视投影变换(续)
在上一篇文章中我们讨论了透视投影变换的原理,分析了OpenGL所使用的透视投影矩阵的生成方法。正如我们所说,不同的图形API因为左右手坐标系、行向量列向量矩阵以及变换范围等等的不同导致了矩阵的差异,可以有几十个不同的透视投影矩阵,但它们的原理大同小异。这次我们准备讨论一下Direct3D(以下简称D3D)以及J2ME平台上的JSR184(M3G)(以下简称M3G)的透视投影矩阵,主要出于以下几个目...转载 2020-04-28 17:37:37 · 359 阅读 · 0 评论 -
深入探索透视投影变换
透视投影是3D固定流水线的重要组成部分,是将相机空间中的点从视锥体(frustum)变换到规则观察体(Canonical View Volume)中,待裁剪完毕后进行透视除法的行为。在算法中它是通过透视矩阵乘法和透视除法两步完成的。透视投影变换是令很多刚刚进入3D图形领域的开发人员感到迷惑乃至神秘的一个图形技术。其中的理解困难在于步骤繁琐,对一些基础知识过分依赖,一旦对它们中的任何地方感到陌生...转载 2020-04-28 16:31:06 · 431 阅读 · 0 评论 -
View Transform(视图变换)详解
什么是View Transform我们可以用照相机的原理来阐释3D图形的绘制过程,想象一下,我们在摄影的时候都需要做哪些工作,大致可分为如下几个步骤摆放好待拍摄的物品,或者人物。 调整好拍摄角度。 调整焦距。 拍摄。好了,来分析一下,上面的第一步就相当于世界变换了,将一个模型置于一个公认的坐标系中,这里所谓的公认,也就是大家都遵守的,目的是保证待拍摄的物体和照相机在同一个坐标系。第...转载 2020-04-28 15:11:06 · 1045 阅读 · 0 评论 -
将法线从模型空间变换到世界空间
问:cg语言漫反射光照模型中的worldMatrix_IT是什么意思?是世界变换矩阵的转置的逆?struct VertexIn{ float4 position : POSITION; float4 normal : NORMAL;};struct VertexScreen{ float4 oPosition : POSITION; float4 color : COLO...原创 2020-04-28 08:09:25 · 2057 阅读 · 0 评论 -
矩阵和向量的乘法顺序
矩阵和向量的乘法顺序似乎经常有人被这个问题转晕。向量有两种表达形式,行向量和列向量,对应的矩阵也有行矩阵和列矩阵。采用哪种形式和左右手系无关。行矩阵: 三个轴向量为前三行,最后一行为位移变换 连乘时从左到右接合,左边的变换先应用 变换向量时为vector * matrix列矩阵: 三个轴向量为前三列,最后一列为位移变换 连乘时从右到左接合,右边的变换...转载 2020-04-28 07:43:10 · 958 阅读 · 0 评论 -
GPU图形绘制管线
摘抄“GPU Programming And Cg Language Primer 1rd Edition” 中文名“GPU编程与CG语言之阳春白雪下里巴人”第二章。 图形绘制管线描述GPU渲染流程,即“给定视点、三维物体、光源、照明模式,和纹理等元素,如何绘制一幅二维图像”。本章内容涉及GPU的基本流程和实时绘制技术的根本原理,在这些知识点之上才能延伸发展出基于GPU的各项技术,所以本章的...转载 2020-04-28 06:58:00 · 416 阅读 · 0 评论 -
向量几何在游戏编程中的使用3
2-D边界碰撞检测一、使用向量进行障碍检测的原理上次说了使用向量模拟任意角度的反弹,这次谈谈它的前提---障碍碰撞。在游戏中进行障碍碰撞检测,基本思路是这样的:给定一个障碍范围,判断物体在这次移动后会不会进入这个范围,如果会,就发生碰撞,否则不发生碰撞。在实际操作中,是用物体的边界来判断还是其他部位判断完全取决于编程者。这时候,就可以从这个部位沿着速度的方向引出一条速度向量线,判断一下...转载 2020-04-23 12:29:10 · 311 阅读 · 0 评论 -
多边形区域填充算法--递归种子填充算法
平面区域填充算法是计算机图形学领域的一个很重要的算法,区域填充即给出一个区域的边界(也可以是没有边界,只是给出指定颜色),要求将边界范围内的所有象素单元都修改成指定的颜色(也可能是图案填充)。区域填充中最常用的是多边形填色,本文中我们就讨论几种多边形区域填充算法。一、种子填充算法(Seed Filling) 如果要填充的区域是以图像元数据方式给出的,通常使用种子填充算法(S...转载 2020-04-22 16:32:51 · 1694 阅读 · 1 评论 -
EasyX简易绘图实例
绘制一个圆从左向右移动#include <graphics.h>int main(){ initgraph(640,480);//绘图环境640*480 setcolor(WHITE);//绘图前景色为白色 setfillstyle(BS_SOLID);//填充样式为固实填充 setfillcolor(RED);//填充颜色为蓝色 Be...转载 2020-04-22 10:12:54 · 1155 阅读 · 0 评论 -
球碰撞模拟物理效果
通过EasyX实现代码如下:#include<graphics.h>#include<conio.h>#include<time.h>const int xPosMax(800);//屏幕大小const int yPosMax(480);const int R = 30; //半径const int BallSpeed(1...原创 2020-04-22 09:56:35 · 786 阅读 · 0 评论 -
圆生成算法
在平面解析几何中,圆的方程可以描述为(x – x0)2 + (y – y0)2 = R2,其中(x0, y0)是圆心坐标,R是圆的半径,特别的,当(x0, y0)就是坐标中心点时,圆方程可以简化为x2 + y2 = R2。在计算机图形学中,圆和直线一样,也存在在点阵输出设备上显示或输出的问题,因此也需要一套光栅扫描转换算法。为了简化,我们先考虑圆心在原点的圆的生成,对于中心不是原点的...转载 2020-04-22 08:51:28 · 1596 阅读 · 0 评论 -
鼠标用弹簧挂着一串小方块
看到最近力学程序受欢迎,我就翻出来以前收藏的一个 javascript 脚本,也是力学相关的,模拟出几个小方块用弹簧连接到鼠标上的效果。当鼠标在绘图窗口上移动时,可以看到小方块连续受力的效果。动态程序就不再抓图了。源代码如下:#include <graphics.h>#include <math.h>#include <time.h>const...转载 2020-04-22 08:34:43 · 369 阅读 · 0 评论 -
模拟橡皮筋
一个模拟橡皮筋的程序。#define _CRT_SECURE_NO_WARNINGS#include <graphics.h>#include <conio.h>#include <stdio.h>#define NODES 20#define GRAVITY 1#define ITER 8struct Vector{ float x...转载 2020-04-22 08:34:53 · 402 阅读 · 0 评论