点燃火柴的博客

第一张是对方形圆柱进行扭曲操作的效果图，第二张图是对扁平立方体面进行弯曲操作的效果图，第三张图是从内到外依次是原物体，裁剪后的物体，裁剪后掏空物体的效果，从左到右依次对圆柱、球体、甜圈圈进行同样变换的效果

三维场景下SDF建模，平滑交集、平滑并集、平滑差集1. demo效果2. 实现要点2.1 平滑运算方法定义2.2 模型计算3. demo代码1. demo效果 smooth-operate 如上所示，三个展示的模型分别为球体和立方体进行平滑交集、平滑并集、平滑差集运算的效果2. 实现要点2.1 平滑运算方法定义demo用到平滑交集、平滑并集、平滑差集运算，它们的定义如下//平滑

RayMarching三维场景下使用交集、并集、差集方法CSG建模1. CSG介绍2. demo效果3. 实现过程3.1 交集、并集、差集函数3.2 旋转矩阵3.3 基础形状3.4 组合过程3.4.1 互相垂直圆柱实现3.4.2 相交的球体与立方体3.4.3 二者取差集4. demo代码1. CSG介绍上一篇文章学习了模型的基本变换(旋转、缩放、平移)，这篇简单说说CSG建模，即构造实体形状，它是一种通过交集、并集、差集的运算用简单的几何形状创建复杂几何形状的方法，下面的图片可以清楚的描述这种方式建

RayMarching三维场景下模型基本变换1. demo概述2. 实现过程2.1 模型的旋转操作2.2 模型的缩放操作2.3 模型的平移操作1. demo概述在之前的一篇文章中讲述了，二维空间中物体的基本变换，即旋转、缩放、平移，现在学习一下三维空间下的基本变换，思路与原理是一样的，只不过是由二维提升为三维2. 实现过程2.1 模型的旋转操作分别绕X轴旋转，Y轴旋转，Z轴旋转的矩阵如下//绕z轴旋转矩阵mat3 rotZ(float a) { return mat3(cos(a),-si

RayMarching与Blinn-Phong光照模型搭建三维场景1. demo概述与效果2. Blinn-Phong光照模型介绍3. demo实现3.1 场景物体准备3.2 rayMarching调整3.3 Blinn-Phong光照计算4. demo代码1. demo概述与效果上一篇文章学习了RayMarching，但是做出的场景的效果是黑白，这一篇在上一篇内容的基础上，进行改进，使用Blinn-Phong光照模型渲染出不同色彩的物体，下面是demo的最终效果，不同的物体有了属于自己的色彩

RayMarching与SDF结合开始三维探索1. 单色背景颜色1. 单色背景颜色人们之所以可以看到物体，是因为光线从光源发出照射到物体，之后反射进入人们的眼睛，这样就看到了物体，在三维模型中使模型呈现在场景中，光线从光源出发，照射到物体，反射后到达相机，反之，同样可以从相机出发光线摄像物体之后反射到光源，RayMarching 算法就是从相机发射光线，具体请看下图从相机出发，向屏幕中的每一个像素发射一条光线，以其中一条光线为例，光线开始以一定的步长前进，每前进一步判断是否达到物体表面，如果没有继续

shader编程-着色器中颜色基础1. 屏幕颜色2. 颜色根据屏幕坐标变化3. 形状颜色处理4. 借助A通道处理形状颜色1. 屏幕颜色在之前的文章中我们用一个三维向量表示颜色vec3 line_color = vec3(1.0,1.0,0.0);vec3 color = vec3(0.6);用三维向量表示颜色因为正好它的三个分量可以代表RGBA格式的颜色中的Red（红色）Green（绿色）Blue（蓝色）分量，我们在最后通常会有一句gl_FragColor = vec4(color, 1.0

shader编程-2D基本图形SDF有向距离场介绍与使用1. 有向距离场介绍2. SDF绘制圆3. SDF绘制矩形4. SDF绘制线段1. 有向距离场介绍有向距离场，英文名Signed Distance Field，简称SDF，把空间中与物体表面的距离进行采样，使用负值表示物体内部，使用正值表示物体外部，与物体的表面的距离为0，大于0，小于0和等于0区分物体的区域，你很快可以联想到之前使用的step函数和smoothstep函数，是的，通过与这两个函数的配合，就可以像前面样绘制图形了2. SDF绘制圆

shader编程-通过交集、并集、差集实现形状的合并1. 准备2. 交集实现3. 并集实现3. 差集实现4. 示例代码1. 准备先复习一下数据概念，交集、并集、差集如下图所示我们准备拿圆做实验，绘制圆的函数如下float circle(vec2 st,vec2 center,float radius) { float blur = 0.002; float pct = distance(st,center);//计算任意点到圆心的距离 return 1.0-smoothste

shader编程-二维空间中使用矩阵实现物体的旋转、缩放、平移变换1. 变换前物体的绘制2. 旋转的实现1. 变换前物体的绘制在进行变换操前先绘制出要操作的物体，我们就简单的绘制一个矩形来代表，利用之前的绘制矩形的代码稍作修改，之前用的是step函数，现在调整为smoothstep函数，因为旋转时使用step函数绘制的矩形边缘会出现锯齿，具体如下float box(vec3 st){ float right = 0.15; float top = 0.1; float blur = 0.0

绘制矩形、矩形框、圆形、圆形框1.绘制矩形1.1 使用if语句绘制1.2 使用step函数绘制1.3 使用step函数简化方法绘制1.4 使用abs对称思想绘制1.5 绘制矩形边框2. 绘制圆2.1 绘制圆形2.2 绘制圆形框3. demo代码1.绘制矩形上一篇文章学习如何绘制线，现在学习如何绘制面，先从绘制矩形开始，其实绘制矩形的思想与绘制线的思想一样，只不过绘制线时限制的区域窄一些，绘制矩形限制的区域宽一些，先来看看绘制第一种绘制矩形的代码1.1 使用if语句绘制思想上面已经说过了，这里只是实践

GLSL ES 绘制点、线、面1. 绘制点1.1 绘制方点1.2 绘制圆点2. 绘制线3. 绘制面1. 绘制点1.1 绘制方点1.2 绘制圆点2. 绘制线3. 绘制面