本文接上篇内容,继续挖掘应用ThreeJS的一些创新算法。
本文理解难度比较大,可以先看一些概念,在难的地方培养一些意识即可。
1、扭曲的自然
下面图本身是矩形的,为何它可以这么扭曲呢?它在随机处带有一定的规律,跟股票一样,开始难以捉摸。
这个效果是基于Poisson Disk Sampling(泊松圆盘采样)。该算法可以生成二维或三维空间中生成均匀分布的点集的算法。它的主要特点是确保生成的点之间保持一定的最小距离,从而避免点的聚集。这种方法在计算机图形学、游戏开发、物理模拟等领域中非常有用,尤其是在需要生成自然分布的对象(如树木、石头等)时。
接下来,每行采用多个正弦波叠加对左右前后进行裁剪。如果不进行裁剪,那么效果如下(初步的锯齿感是因为矩形内采样的结果)。水平裁剪函数为Math.sin(y * 3) * Math.sin(y * 2) * Math.sin(y * 4.7) * 0.5 - 0.5) * 0.7.
2、如何给每个方块投影纹理
这是本文名称的由来--Project Texture。
在上面那副图中,聪明的你一定初步猜到了每个方块的纹理是怎么得到的。对,正如你猜的那样,在每个方块要静止时候记录所在位置。在代码里,每个方块用savedModelMatri
x
存储了居中静止时候的矩阵。在着色器代码里面重算uv即可。
//顶点着色器
vWorldPosition = savedModelMatrix * vec4(position, 1.0);
vTexCoords = projectionMatrixCamera * viewMatrixCamera * vWorldPosition;
//片元着色器
vec2 uv = (vTexCoords.xy / vTexCoords.w) * 0.5 + 0.5;
uv.x = map(uv.x, 0.0, 1.0, 0.5 - widthScaled / 2.0, 0.5 + widthScaled / 2.0);
uv.y = map(uv.y, 0.0, 1.0, 0.5 - heightScaled / 2.0, 0.5 + heightScaled / 2.0);
vec4 color = texture2D(texture, uv);
为啥这么复杂呢,为啥不开始存储每个方块的UV呢?这个原因我也尝试了。下面代码的vTexCoords(=savedModelMatrix,已修改)记录方块所在的位置,vWorldPosition表示方块中像素的偏移。得到的效果如下。效果比较差是因为没有归一化。
vec2 uv =vec2((vTexCoords.x+vWorldPosition.x)/3.8+0.5,(vTexCoords.y+vWorldPosition.y)/5.8+0.5);
其他小代码:
问:var t={a:3,b:4} var {a} =t
。这是什么写法 答:这是 JavaScript 中的
对象解构赋值(Destructuring Assignment)
语法。具体来说,代码的作用是从对象 t
中提取属性 a
的值并将其赋值给变量 a
。