养眼的水母

听音乐品小众佳作，开眼界玩有趣小网站。这是“小网站”系列的第23篇，关注公众号接收更新，有惊喜。

=== 今日介绍 ===


养眼的水母（JellyFish）
把玩点：

• 休闲娱乐；
  
• 值得学习的3D视效优秀作品;
  

主观评价：趣味性 4 星，技术性 4 星
把玩网址  https://akirodic.com/p/jellyfish

=== 使用指北 ===


经常有朋友微信群里说「无聊」，这个时候适合干什么呢？当然是打开电脑或手机，看看今天介绍的这一款佳作「养眼的水母」啦！



主界面

水母最早诞生于6.5亿年前，几乎经历了地球上的五次物种大灭绝，至今依然在海洋中非常常见。目前全世界的水母种类大概有250种，这种身体含水量超过95%的小家伙，估计已经掌握了适应地球环境变化能力的窍门。看着它们无忧无虑的畅游海洋，仿佛能忘却眼前的一切烦恼！
这个小网站的作者也很厉害，曾在EA游戏公司、皮克斯、卢卡斯艺术公司都干过，绝对专家级作品。将作品的参数扩大一下，甚至可以通过作品来测试出你的爱机有多么的「耐抗」。



500个水母

界面上操作很简单，鼠标或手机拖动可以进行空间旋转，界面左上角有配置的地方，如下图



参数配置

其作用分别是：

• Frame rate: 帧数，手机60帧，电脑可达120，低于这个数就有点卡;
  
• count ： 水母的个数;
  
• Turbulence : 水母的暴躁程度;
  
• speed： 水母游的速度;
  

在办公室的朋友，可以打开浏览器，全屏当屏保欣赏，绝对拉风！

=== 干货知识 ===


纯技术性干货，非行业人士可忽略本节。
网站作者叫Aki Rodić，他特别擅长使用计算机图形和编程艺术来创建数字工具和体验。多年在各种数字媒体行业工作，如网络、三维动画、视觉效果、游戏、建筑、虚拟现实和数据可视化等。他服务过的公司也很多，曾在EA游戏公司、皮克斯、卢卡斯艺术公司、谷歌和最近的Adobe等公司工作，绝对特效大师级人物。
网站HTML、CSS部分特别的简单，主要就是一张Canvas画布，动效全部由WebGL实现，代码写在Javascript中。



JS引用

渲染这种活灵活现的生物，在WebGL中需要进行大量的Shader编程，有顶点着色器、图元着色器等，好在作者都没有加密混淆



着色器编程

网站模块分的也非常清晰，哪些画场景，哪些进行贴图，哪个画水母一目了然，画一个水母也就150多行代码drawJellyfish.js，全程纯WebGL编程，没有使用第三方框架，真是一个值得学习的佳作样板。

本系列长期更新！首发公众号：土卫六 @土卫六
喜欢的朋友感谢点赞、分享、收藏三连！