断更19个月，携 Three.js Shader 归来！（上）
断更19个月之久😢
好久没更新文章了，除去2022年1月30日发布的「免费领取古柳定制的红包封面啦！1万份用不完 - 牛衣古柳」，上一次更新得追溯到2021年9月12日写的「手把手带你上手D3.js数据可视化系列（四） - 牛衣古柳」。
一眨眼已过去580天，19个月，1.59年。断更之久，久到离谱，比当初开始更新 D3.js 可视化等内容之前的断更14个月有过之而不及，「年更博主冒个泡，或将开启可视化之旅 - 牛衣古柳 - 20200827」。
其实古柳中间有很多次想更新，但一时断更一时爽，一直断更一直爽。没有写文章的习惯后，想再捡起来还挺难的。
其实一直有在分享
当然古柳在可视化交流群里和朋友圈，还是分享过不少内容，甚至在卡塔尔世界杯前开了多年来首场直播——分享了 Canvas 及自动配色等内容。
虽然因为声音没测试好不太清晰，所以最终录播没放出去。
不过后续直播等最新动态还是在群里或朋友圈发布，欢迎👏来围观。
此外古柳将所学的知识活学活用做了些效果发到视频号，毕竟比写文章省力多、压力小很多。后续会讲解如何实现，也欢迎大家关注此账号。
重新更新的契机
这次终于久违地更新，是想到离古柳去年4月接触 Three.js、接触 Shader，并打开新世界的大门过去快一年。
不能免俗地觉得一年之际这个契机实在很好，适合重新开始更新文章，和大家简单分享下这段经历，也顺带为后续写 Shader 教程铺个路。（等 Shader 教程的更新步入正轨，会继续更新 D3.js 教程）
说起来，虽然古柳之前做的中国传统颜色可视化也是3D的，但其实对于3D的东西一直望而却步，不太敢碰 Three.js、图形学等3D的技术，总觉得2维里画个圆圈用 circle、画个矩形用 rect 多简单，而3维里还有相机、材质、灯光、几何体等概念，好麻烦。
自己吓自己，于是一直迂回、用些非主流的方式。比如最初实现的版本用了 Zdog、后来开源的版本用了 Sprite.js+D3.js......为了不学 Three.js 简直挖空心思。
链接：DesertsX/dataviz-in-action - GitHub
链接：演示效果
畏难的心使人徘徊不前，幸而终于获得更多的动力去克服心魔。
早先看群友分享过 the.data.guy 这个 tiktok 账号发的挺火🔥的 3D+AR/VR 的可视化视频，当时古柳就觉得超酷，于是2022年4月重新找出来并分享到群里给大家看看。
链接：flowimmersive、flowimmersive - tiktok
终于学起 Three.js
看到这样的作品古柳就很好奇如何实现的、自己是否有机会复现出来？再加上些其他缘故，带着被撩拨起来的兴致，终于在去年4月某日一时兴起开始入坑 Three.js。
先是翻了下张雯莉/羡辙的《Three.js入门指南》，虽然这书很旧、是2013年快十年前的，但不求甚解地快速过一遍，对3D的东西有初步印象便觉得足够了。
然后看了b站up主进华4月份刚发布的「three.js教程-从入门到入门」，讲的简洁清晰、很是受用。非常推荐没学过 Three.js 的朋友看看。
这个教程难能可贵的一点是，最后对照《Three.js开发指南/Learn Three.js》讲了下还有哪些内容没涉及，给大家后续学习指引了方向。
前不久也看到推特上一些人在晒最新的第四版。
后来群友问起这书，古柳去 zlibrary 上搜了下，发现第四版电子书也有了，大家可自行下载看看，也可以在「牛衣古柳」公众号后台回复 learn three.js 获取 PDF 版本。
宝藏 Yuri
因为没学过的内容里对粒子系统较感兴趣，于是上油管搜索 particle system three.js 打算学习下，然后偶然发现了 Yuri Artiukh 这个宝藏，这位乌克兰🇺🇦老哥的频道发了超多（上百期）用 Three.js/Shader/Canvas/Pixi.js 等技术复现各种网站效果或动画效果的教程。至今超喜欢 Yuri 的教程！
尤其是这期的 Pepyaka 效果，放在网页里太丝滑太酷，一眼爱上的入坑之作，从没想到能有机会学到这么酷的效果。如果大家也想学可以去试试看能不能看懂，后续古柳也会写教程教大家，见 #s3e6 ALL YOUR HTML, Making Pepyaka with Three.js - Yuri Artiukh - 20191201
友情提醒：目前原网站 Grant Yi 的主页 换成了其他 Shader 实现的效果，以免大家去原网站欣赏体验时扑空。不过新效果依旧是很酷，值得看源码学习！Mark 住。
扯回来，这是古柳第一次知道 Shader 的概念、第一次对 Three.js Shader 所能实现的效果有了直观的认知、第一次燃起空前的学习热情，也自此打开新世界的大门。
在此之前也曾见过一些网站，当时就觉得其中有些效果不是常规的 HTML/CSS/JS 所能实现，但到底怎么实现的却又不得而知，此刻才有种“众里寻她千百度”，终于找到答案的感觉。
Ying He
比如在此之前，古柳重新想到清华美院向帆老师的春晚颜色可视化/蚊香图这个作品（见 「李子柒130个视频1万图片5万颜色数据可视化的背后，是古柳三年的念念不忘 - 牛衣古柳 - 20201128」），然后突发奇想地想搜搜这几个作者，看看有没有个人网站可以顺藤摸瓜追踪些新的资讯。
于是找到了 Ying He 的个人网站，并发现背景图片有类似水纹的效果（不是视频），就不是常规技术所能实现的，而当时就不知道到底怎么实现的。
后来有群友看到「伴随 P5.js 入坑创意编程 - 牛衣古柳 - 20190628」这篇文章，知道我也晓得 AwardPuzzel——全国美展油画类获奖画作的数据视觉化作品——就说到他认识作者，一问才知道就是何老师，她在国内某厂做设计专家，而他刚好在她的团队实习，也是无巧不成书。
再后来知道作为 p5.js 大本营的纽约大学有出 p5.js shader 的教程，猜测毕业于 NYU ITP 的何老师多半上过这方面课程，那么个人网站里用到 shader 似乎也合情合理了。
未完待续
当然讲了这么久，可能很多人第一次听说 Shader，还是不知道这玩意儿到底是啥。
因为本文已经蛮长了，具体介绍还是留到下一篇文章继续。太久没写文章，确实磕磕绊绊花了好久，希望大家能有所收获。
下篇文章指路：断更19个月，携 Three.js Shader 归来！（下） - 牛衣古柳
照例
最后欢迎加入「可视化交流群」，进群多多交流，对本文任何地方有疑惑的可以群里提问。加古柳微信：xiaoaizhj，备注「可视化加群」即可。
欢迎关注古柳的公众号「牛衣古柳」，并设置星标，以便第一时间收到更新。