是一组脚本，可让您使用散焦相机的散景/景深效果轻松可视化简单的几何形状。 它内部使用使开发着色器和运行它所需的WebGL程序变得容易。
通过使用数百万个粒子绘制库支持的图元来生成散景效果。 然后，这些粒子将以纹理的形式积累，并根据它们离焦平面的距离随机地排列成一个圆形。
这些是我最近使用模糊创建的一些场景：
由于库本身非常简单，并且您不需要了解三个以上的函数就可以开始使用，因此我决定编写使用Blurry制作的场景的本演练。 它将教您如何使用各种技巧来创建生成艺术家作品中经常出现的几何形状。 这也有望向您显示简单的工具如何产生有趣而复杂的结果。
在这个关于模糊的简短介绍中，我们将尝试使用从生成艺术的世界中借鉴的各种技术来重新创建以下场景：
还有一些其他的按键绑定可以更改渲染器的各种参数，例如焦距，曝光，散景强度等。 这些在屏幕的左下方可见。
所有的魔术都发生在libs / createScene.js中，您可以在其中实现使用Blurry渲染某些东西所需的两个功能。 本文定义的所有代码段都将最终保存在createScene.js中。
要重新创建本文开头显示的场景，我们需要实现的最重要的功能是createScene() ，在渲染器将基元推入GPU进行实际渲染之前，其他脚本将调用该函数。现场。
我们将定义的另一个函数是setGlobals() ，该函数用于定义将渲染场景的着色器的参数，例如散景效果的强度，曝光度，背景色等。
的自述文件中对每个参数都有解释。 此刻的重要信息是，摄像头将开始位于(x：0，y：0，z：115)处，并且cameraFocalDistance (与将聚焦图元的摄像头之间的距离)将设置为100，意味着距离相机100个单位的每个点都会清晰对焦。
要考虑的另一个变量是pointsPerFrame ，它在内部用于为所有要在单个帧中渲染的图元分配一定数量的点。 如果发现您的GPU挣扎于50000，请降低该值。
在开始实现createScene()之前，让我们先定义一些初始全局变量，这些变量稍后将有用：
我将在继续介绍这些变量的用法。 vec3()只是创建Three.js向量的简单快捷方式，而不必每次都键入THREE.Vector3(…)。
我经常发现有必要“重复”在一个有问题的场景中随机产生的数字序列。 如果必须依靠标准Math.random()函数，则每次刷新页面都会给我不同的随机数，这就是为什么我在项目中包括了种子式随机数生成器的原因。
目前，您只能在模糊中绘制两个简单的图元：线条和四边形。 在本文中，我们将重点介绍行。 这是生成10条连续直线的代码：
lines是用于存储要渲染的线的简单全局数组。 我们.push()进入数组的每一行都将被渲染。
v1和v2是线的两个顶点。 c1和c2是与每个顶点关联的颜色，作为RGB三元组。 请注意，对于RGB颜色的每个分量，模糊不限于[0…1]范围。 在这种情况下，对每个组件使用5将给我们一条白线。
如果到现在为止一切都正确，那么从本地服务器启动index.html时，屏幕上将显示10条直线。
由于我们不是在这里画直线，因此现在我们将借助这两个新功能来制作更有趣的形状：
这里的目标是创建一串遵循球体形状的垂直线。 由于我们无法绘制曲线，因此我们将沿此球体将每条直线分解成细小的直线。 (x1，y1，z1)和(x2，y2，z2)将是我们在循环的每次迭代中绘制的直线的端点。 r2用于确定要在球体表面上绘制多少垂直线，而r1是要用于绘制的每条曲线的微小直段的数量。
phi和theta变量表示两个点的球坐标，然后将其转换为笛卡尔坐标，然后再将新线推入lines数组。
每次输入外循环(j)时， phi1和phi2将决定垂直线以哪个角度开始(目前，它们将保持相同的精确值)。 内循环(i)中的每次迭代将通过在每次迭代中稍微增加theta角度来构造细小的片段，从而创建垂直线。
转换后，结果的笛卡尔坐标将与.multiplyScalar(15)乘以15个世界单位，因此我们绘制的曲线被放置在半径为15的球体表面上。
为了使事情变得更有趣，让我们通过以下简单更改来扭曲这些垂直线：
如果我们在构建直线时在向上移动时稍微扭曲phi角度，最终将得到：
最后，让我们将两个点的z轴与y轴交换：
现在，有趣的部分开始了。 为了重新创建这些线之间的交点类型
…我们需要对射线平面相交进行一些操作。 以下是我们的工作概述：
给定我们在3D场景中制作的直线，我们将创建一个具有随机方向的无限平面，并将该平面与场景中所有的直线相交。 然后，我们选择与平面相交的这些线之一(随机选择)，然后找到与该平面相交的最接近的线。
让我们用一个数字使示例更容易理解：
假设图片中的所有片段都是场景中与随机平面相交的线。 红线是从所有相交的线中随机选择的。 每条线在3D空间中的特定点与平面相交。 我们将红线与随机平面的接触点称为“ x”。
下一步是从与平面相交的其他线的所有其他接触点中找到最接近“ x”的点。 在图中，绿点“ y”是最接近的。
一旦有了这两个点“ x”和“ y”，我们将简单地创建另一条连接它们的线。
如果我们多次运行此过程(创建随机平面，与线相交，找到最接近的点，绘制新线)，我们将得到所需的结果。 为了使之成为可能，让我们将findIntersectingEdges()定义为：
如果返回值ires不是未定义的，这意味着在ires变量中存储了一个交点，我们将ires变量保存在contactPoints数组中。
如果您想了解更多信息，请在该功能的原始版本，我不会详细介绍该功能的工作原理。
现在，转到第2步：选择一个随机接触点(我们将其称为randCp )并找到其最近的邻居接触点。 将此代码段附加到findIntersectingEdges()的末尾：
现在我们有了例程来测试3D平面上的相交，让我们针对已经在球体表面上制作的线重复使用它。 在computeWeb()的末尾附加以下代码：
如果您遵循，应该得到这个结果
查看到目前为止的资源。
我们快完成了！ 为了使景深效果更加突出，我们将在场景中填充少量闪光。 因此，现在该定义我们缺少的最后一个函数了：
让我们开始解释这一行：
在这里，我们正在创建一个3D向量，该向量具有介于-1和+1之间的三个随机值。 然后，通过执行.normalize() ，将其设为“单位向量”，即长度恰好为1的向量。
如果使用此方法绘制了许多点(在[-1，+1]之间选择三个随机分量，然后对向量进行归一化)，您会注意到绘制的所有点最终都在球体的表面上(它们具有一个半径恰好为一)。
由于我们在computeWeb()中绘制的球体的半径正好为15个单位，因此我们要确保所有火花都不会落在computeWeb()生成的球体内。
通过用.multiplyScalar(18…)将每个矢量分量乘以一个比球体半径大的标量，然后通过加上+ rand()* 65为其添加一些随机性，可以确保所有点都距球体足够远。
c是我们正在计算的闪光的颜色强度的乘数。 至少它将是1.325 *(0.3)，如果rand()最终以尽可能高的值结束，则c将是1.325 *(1)。
该行if(rand()> 0.9)c * = 4; 可以理解为“每10个闪光，使一个颜色强度比其他闪光大四倍”。
对line.push()的两个调用绘制了大小为s的水平线和中心v0 ，以及大小为s的垂直线和中心v0 。 实际上，所有的火花都是很小的“加号”。
到此为止，我们要做的是：
我们进行模糊之旅的最后一步是更改线条的颜色以匹配最终场景的颜色。
在我们这样做之前，我将对称为“点积”的代数运算进行非常简单的解释。 如果我们在3D空间中绘制两个单位矢量，则可以测量它们指向的方向有多“相似”。
两个并行单位向量的点积为1，而正交单位向量的点积为0。相反的单位向量的点积为-1。
将此图片作为点积值的参考，具体取决于两个输入单位向量：
我们可以使用此操作来计算两个方向之间的“接近程度”，然后将其用于伪造漫射照明并创建两个光源照亮场景的效果。
这是一张希望可以使我们更容易理解的图纸：
球体表面上的红色和白色点具有与之关联的红色单位矢量方向。 现在让我们想象一下，紫罗兰色矢量代表从定向光源发出的光，绿色矢量是紫罗兰色矢量的相反矢量(按代数形式，绿色矢量是紫罗兰色矢量的取反)。 如果我们取红色和绿色矢量之间的点积，则将获得两个矢量指向同一方向的估计值。 值越大，该点接收的光量越大。 该过程背后的直观推理本质上是将我们直线中的每个点想象成非常小的平面。
如果这些小平面朝向光源，它们将吸收并反射更多的光。
但是请记住，点操作也可以返回负值。 我们将通过确保该函数返回的最小值大于或等于0来捕获该错误。
现在，让我们用单词对到目前为止所说的内容进行编码，并在createScene()定义之前定义两个新的全局变量：
您可以将两个变量都视为上图中的两个绿色矢量，它们指向两个不同的定向光源。
我们还将创建一个normal1变量，该变量将用作上图中的“红色矢量”，并计算normal1与我们刚刚添加的两个光方向之间的点积。 每个光方向将具有与其关联的颜色。 在使用点积计算出两个方向上反射的光量后，我们将两种颜色加在一起(将RGB三元组相加)，并将其用作我们将创建的线条的新颜色。
最后，让我们在computeWeb()的末尾添加一个新的代码段，这将更改我们在先前步骤中计算出的行的颜色：
请记住，我们正在做的是一种非常非常简单的方式来重建漫射光照，并且由于许多原因它是不正确的，这是因为我们只考虑了每条线的第一个顶点，然后将计算出的光贡献分配给线的第一个和第二个顶点，都没有考虑到第二个顶点可能与第一个顶点相距甚远的事实，因此最终以不同的法向矢量和不同的光贡献结束。 但是出于本文的目的，我们将接受这种简化。
我们还要更新用computeSparkles()创建的行，以同样反映这些更改：
您最终将看到的场景与我们希望在本文开头重新创建的场景非常相似。 唯一的区别是，我要计算的computeWeb()和computeSparkles()的光贡献为：
如果到此为止，您现在将知道这个非常简单的库的工作原理，并希望您为以后的生成艺术项目学到了一些窍门！
这个小项目仅将线条用作图元，但是您也可以使用纹理四边形，运动模糊和自定义着色器通道，我最近使用它们来重新创建体积光轴。 如果您想查看这些功能的运行情况，请查看libs / scenes /中的示例。
如果您对库有任何疑问，或者想提出一个功能/更改，请随时在打开一个问题。 我很想听听您的建议！
点击联系发帖人
