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

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

HOTSAR官网在上线24小时里迎来了3w多访客,并登上了数英网首页。今天这篇推送主要分享一下HOTSAR官网首页的Logo WebGL互动编程,文后会附带Github源码地址。

官网交互效果

一、从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

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180709G1TEXD00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券