HOTSAR官网WebGL互动编程小结&源码

Posted 2021-04-25 坏打印机

工作室官网在拖延了数月之后，终于在各位大佬的不满抗议和实习生小刘马不停蹄的敲代码下，成功在七月初上线了。

官网交互效果

一、从HOTSAR Logo上提取一万个点

还记得去年的时候做一个类似的demo，从一个模型表面上，面积均匀（面积大的三角面随机点多，面积小的随机点少）地生成一定数量的点，当时用的是一个实时解算的算法。具体思路是：
1. 先计算模型上每个三角面的面积，并对每个三角面绑定一个递增排序的索引。

2. 对于均匀分布的N个点，依次利用生成随机数+二分查找法的算法，锁定点所在的三角面，再从该三角面上随机取点。

实时解算的方法体现的是一个程序员对算法的追根究底的执着精神，但是

怎么简单怎么来，为了不额外消耗CPU的计算时间，我决定把能提前算好的全部算好。

于是，我先使用Houdini的scatter节点，轻松地在模型上scatter 1w个点。然后导出OBJ格式。为了压缩数据大小，写了一个简单的小脚本，对Obj文件进行冗余去除，只保留了position信息和normal信息（normal信息其实可以删去），最后输出一个txt文件。

二、WebGL Noise

https://github.com/ashima/webgl-noise

大部分的Noise实现都依赖于纹理查找表并且受限于纹理带宽。但是上面给出的这个WebGL Noise 的开源实现库，完全不依赖于外部数据纯代码实现。

在这个互动编程项目里，我使用WebGL Noise库对点的散开运动做一个噪声影响场，让运动更佳随机紊乱，同时噪声场影响点的运动的同时也影响着点的旋转朝向。

三、Polygon-Shredder

https://github.com/spite/polygon-shredder

Polygon-Shredder是谷歌WebGL实验室收录的一个开源项目。

在此次互动编程了，我使用了Polygon-Shredder里一个很巧妙的立方体渲染方式。一个普通的立方体，有12个三角面，36个顶点。但是Polygon-Shredder只需要6个面，18个顶点，就可以完成。

它利用的原理是：无论什么角度，我们永远只能同时看见一个立方体的三个面！因此它在Vertex Shader里通过对立方体的朝向判断，调整了顶点的Local Position，来实现了以上效果。

这种巧妙的处理方式，让顶点数量从1w个点，即36w个顶点的数据量，减少到了18w个顶点。

四、触摸交互-基本操作

这次的交互也很简单，用户的手指触摸屏幕时，对应位置的Logo上的点会被激活，并四处飘散开，随后变小消失，又回到起始位置。

我计算用户手指触碰位置发射出的光线，和z=500（Logo所在深度）的平面的交叉点，并把该点作为Uniform变量传入PosShader（GPU计算点的位置的FragmentShader）里。在shader中，判断交叉点和当前点位置的距离，当距离小于一个阈值，则激活当前点，并在第四个通道（rgba四个通道：rgb为position的xyz， a为life）设置一个life值，每次计算递减，当life为0，则表示处于非激活状态。

---

官网首页互动编程部分的源码已经放在Github上，有兴趣的可以下载下来看看：

https://github.com/dayinji/hotsar-logo