- 博客(36)
- 收藏
- 关注
RSS订阅原创 webgl入门-矩阵变换
这一篇主要讲解了如何使用矩阵统一变换一个物体的多个顶点，下一篇我们会让矩阵包含多种变换信息，比如移动加旋转，旋转加缩放。
2024-05-23 15:44:05
842
原创 webgl入门-js与着色器间的数据传输
webgl 的同步绘图的现象，其实是由webgl 底层内置的颜色缓冲区导致的。“胸有成竹”大家知道吧？这个颜色缓冲区就是“胸有成竹”的胸，它在电脑里会占用一块内存。在我们使用webgl 绘图的时候，是先在颜色缓冲区中画出来，这样的图像还在胸中，所以外人看不见，只有webgl系统自己知道。在我们想要将图像显示出来的时候，那就照着颜色缓冲区中的图像去画，这个步骤是webgl 内部自动完成的，我们只要执行绘图命令即可。颜色缓冲区中存储的图像，只在当前线程有效。
2024-05-14 12:23:47
775
原创 webgl入门
webgl 是在网页上绘制和渲染三维图形的技术，可以让用户与其进行交互。我们之前学过的div+css、canvas 2d 都是专注于二维图形的，它们虽然也能模拟一部分三维效果，但它们和webgl 比起来，那就是玩具枪和AK47的差别。综上所述，webgl 绘图好麻烦啊！麻烦不是不学的理由，因为后面还有three.js 为你排忧解难。那我们为啥不直接学习three.js 呢？那是因为three.js 若是只想画个旋转的立方体还好，若是要深入学习，实现复杂的模型交互逻辑，就必须要有webgl 基础了。
2024-05-14 10:26:03
399
原创 20 Games101 - 笔记 - 光场、颜色与感知
眼睛成像：我们看到这个三维世界，在眼睛里类似就是一幅二维的图。如果直接看到一幅记录了看到的光线信息的图，也能得到同样效果（虚拟现实）。
2024-04-11 20:12:49
1057
原创 19 Games101 - 笔记 - 相机与透镜
首先观察最下方的ISO变化对照片的影响，之前提到ISO就是一个简单的线性变化，对图像的结果乘上了一个倍数，随着ISO的值显著增大之后，虽然画面整体亮度会提升，但同时也会观察到画面有很多的噪点。但这种模糊也不一定不是坏事，正如上图例子所示，左边快门速度慢看到了锤子有落下的趋势，获得到了更多的图片信息，而右边的快门速度快，看上去更像是静止的画面，没有动态的效果。接着是中间一行的快门速度，图片下方的值越大代表速度越慢，快门打开时间越长，透镜的进光量越大，图片也就会越亮，但同时。
2024-04-11 19:10:55
649
原创 17 - Games101 - 笔记 - 材质与外观
自然界中的材质：丝绸、头发、蝴蝶翅膀表面、寿司表面等等图形学中的材质：同一个模型之所以渲染出不同结果的原因就是因为材质。在图形学中是给不同的物体指定不同的材质，知道它们如何和光线作用后就能正确的渲染。
2024-04-09 10:49:11
405
原创 Games101-作业5-光线与三角形相交
这次作业还是比较简单的，主要是光线投射，需要填的部分就是把相机发出的光线坐标变换到物体所在的世界坐标和利用上课讲过的公式计算射线与三角形的交点。想搞清楚这个过程可以参考。
2024-04-02 17:07:50
263
原创 基于three-mesh-bvh实现第一人称及第三人称的漫游
这篇文章主要介绍在3d场景中实现第一人称与第三人称切换以及碰撞监测的漫游方案。人称视角的场景漫游主要需要解决两个问题，人物在场景中的移动和碰撞检测。移动与碰撞功能是所有三维场景首先需要解决的基本问题，今天我们就通过最基本的threejs来完成第一人称视角的场景漫游功能。
2024-04-02 14:49:51
853
原创 16 Games101 - 笔记 - 光线追踪（蒙特卡洛积分与路径追踪）
我们通过每次对光线方向的采样从而解出方程，假设每次采样100条，那么从人眼出发的第一次采样就是100条，在进行第二次反射之后就是10000条，依次类推，反射越多次光线数量便会爆炸增长，计算量会无法负担，那么如何才能使得光线数量不爆炸增长呢？通过对经过像素的光线重复采样，每次在反射的时候只按分布随机选取一个方向，解决了只对经过像素的光线采样一次，而对反射光线按分布采样多次所导致的光线爆炸问题。至此，我们成功通过蒙特卡洛的方式解出了渲染方程的积分值，也通过考虑直接光照与间接光照解决了递归的问题。
2024-03-28 15:29:04
914
原创 15 Games101 - 笔记 - 光线追踪（辐射度量学、BRDF与渲染方程）
不难发现正如上图中所说的，入射光线的radiance不仅仅是光源所引起的，还有可能是其他物体上着色点的反射光线的radiance，恰好反射到当前的着色点p(即间接光照)，同时其他物体上的反射光线的radiance依然也是由直接光照和间接光照构成，因此这与whitted-style当中的光线追踪过程十分类似，也是一个递归的过程。(tips: 具体来说一般偏向用radiant flux来衡量光线的亮度，因为我们更关心的是单位时间的效果，事实上也是这么做的，想想在说白炽灯泡的时候也是说60W亮度，80W亮度)
2024-03-28 13:46:39
775
原创 14 Games101 - 笔记 - 光线追踪（利用包围盒技术加速光线追踪（KD-Tree and BVH）
以上就是本节的所有内容，首先详细介绍了加速光线追踪的基础即AABB，接着说明了为什么需要在AABB的基础之上设计别的加速方法，在这里具体介绍了Uniform spatial partition，KD-Tree，以及被广泛使用的BVH结构。
2024-03-28 09:45:26
898
原创 13 Games101 - 笔记 - 光线追踪（Whitted-Style光线追踪原理详解及实现细节)
光栅化的缺点：不能很好的处理全局光照。（因为Blinn-Phong这种局部模型无法处理全局效果！
2024-03-28 09:41:19
2241
原创 12 Games101 - 笔记 - 几何（网格处理）、阴影图
曲面细分是指将一个模型的面合理的分成更多小的面，从而提升模型精度，使模型越来越光滑，提高渲染效果。
2024-03-22 14:52:12
823
原创 11 Games101 - 笔记 - 几何（曲线与曲面）
贝塞尔曲线：由控制点和线段组成的曲线，控制点是可拖动的支点。如图，蓝色为贝塞尔曲线，p1, p2, p3为控制点，曲线和初始与终止端点相切，并且经过起点p0与终点p3。
2024-03-22 14:51:18
470
1
原创 10 Games101 - 笔记 - 几何（基本表示方法）
几何分类：隐式几何(Implicit Geometry)，显式几何(Explicit Geometry)
2024-03-22 14:15:39
379
1
原创 WebGL 理论基础 01 WebGL 基础概念
顶点着色器的作用是计算顶点的位置。根据计算出的一系列顶点位置，WebGL可以对点， 线和三角形在内的一些图元进行光栅化处理。当对这些图元进行光栅化处理时需要使用片段着色器方法。片段着色器的作用是计算出当前绘制图元中每个像素的颜色值。着色器获取数据的4种方法。属性（Attributes）和缓冲缓冲是发送到GPU的一些二进制数据序列，通常情况下缓冲数据包括位置，法向量，纹理坐标，顶点颜色值等。 你可以存储任何数据。属性用来指明怎么从缓冲中获取所需数据并将它提供给顶点着色器。 例如你可能在缓冲中用三个32位的浮点
2024-03-21 20:19:47
639
1
原创 09 Games101 - 笔记 - 着色-补充（纹理应用）
纹理在现代的GPU的理解：Texture = 一块内存+滤波/范围查询纹理不必只存储颜色，还可以是高度等等。可以“伪造”详细的几何。
2024-03-21 15:42:42
323
1
原创 Games101-作业3（管线分析、深度插值、libpng warning、双线性插值等）
在前两次作业的基础上，添加光照模型和材质处理。以下内容参考了论坛和博客。
2024-03-21 14:10:23
2212
1
原创 基于three.js实现第一人称的碰撞检测 （threejs官网games-fps案例复现及其理解）
通过three.js我们可以在网站中实现比较不错的3D效果，复现了three官网中game_fps的例子，代码基本与官网相同，注释比较全面，仅供参考。有兴趣可以下载查看一下。代码地址 https://github.com/shanchangshuiyuan/threejs-examples-recurrent利用git clone 地址为。
2024-03-20 21:23:35
958
1
原创 08 着色 - Games101-笔记 - （着色频率、图形管线、纹理映射）
07 着色（光照与基本着色模型）中提到Ping Point的概念，但并没有具体说是谁的法线向量，这就是着色频率的工作。着色频率上图分别对应着色应用在平面，顶点，像素的效果。
2024-03-16 16:07:42
985
1
原创 07 Games101-笔记 - 着色（光照与基本着色模型）
着色的定义：物体应用材质的过程我们为什么能看到物体：人眼接收到了物体来的光。●高光●漫反射●环境光照。
2024-03-16 15:55:04
345
1
原创 Games101-作业2-光栅化和Z-buffer（含提高）
仿照depth_buf和frame_buf的定义和初始化即可。声明raterizer.cpp 构造函数// 每个像素分成四个样本clear样本颜色、深度。
2024-03-15 15:42:04
905
1
原创 06 games101-光栅化（深度测试与抗锯齿）
●原始信号的任意一个位置，取其周围的平均●作用在一个信号上，用一种滤波操作，得到一个结果Result。
2024-03-14 12:52:17
1740
2
原创 05 games101-光栅化（三角形的离散化）
三角形的性质和优点：●最基础的多边形●其他图形可以拆解为三角形●三角形内一定是平面●内外的定义很明确●定义三个顶点后，三角形内可以插值。
2024-03-14 12:28:49
457
1
原创 Games101-作业1-旋转与投影（含提高）
根据作业的说明，可以明确框架已经完成了MVP中的模型和视图变换，我们要做的是投影变换和绕z轴旋转矩阵。这次作业框架知道main.cpp中流程是什么和每个接口的作用就可以了。读完说明和main.cpp注意：Eigen默认弧度制，但框架中接口函数参数提供的角为角度值，所以要先。
2024-03-12 11:21:51
1016
1
原创 04 games101-变换（模型、视图、投影）
MVP变换用来描述视图变换的任务，即将虚拟世界中的三维物体映射（变换）到二维坐标中。MVP变换分为三步：●模型变换(model tranformation)：将模型空间转换到世界空间（找个好的地方，把所有人集合在一起，摆个pose）●摄像机变换(view tranformation)：将世界空间转换到观察空间（找到一个放相机的位置，往某一个角度去看）●投影变换(projection tranformation)：将观察空间转换到裁剪空间（茄子！在这之后，还有一个视口变换。
2024-03-12 10:53:22
706
1
原创 Games101-作业0
本系列博客为记录笔者在学习课程时遇到的问题与思考。本次搭建过程参考https://blog.csdn.net/qq_21891843/article/details/130643143?以此记录方便自己下次使用。然后利用虚拟机镜像创建对应的Ubuntu虚拟机。创建完成后将和拖入虚拟机的Download文件夹中，并解压文件到当前目录下。双击文件即可将VScode安装至虚拟机中。之后配置g++、cmake和eigen环境。cmake 配置eigen 配置配置完成三件套之后再安装OpenCV依赖。
2024-03-11 19:36:12
862
1
原创 Canvas入门（二）Canvas图形
Canvas入门之图形的绘制 内容包括画布栅格（canvas grid）以及坐标空间的了解、绘制三角形、圆弧、贝塞尔曲线、矩形、以及两个实战小案例。
2023-10-31 14:29:03
142
1
原创 Canvas入门（一）canvas的概念
Canvas入门 主要内容为：了解Canvas 的概念、与svg的异同、使用canvas元素绘制一个红色矩形。
2023-10-31 14:25:19
61
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人