平常在动漫里其实可以非常高频的看到各种伴随樱花的场景，而这些场景又都美得一批，每每看到这些场景让人都不由自主的连连称奇、拍案叫绝、惊为天人、振聋发聩、大呼过瘾

从此对 Sakura 有了执念。

其实有许多大牛前辈早已在 Web 中进行了实现：

有使用Canvas2D的：比如路人女主的官网在第二季还未开播的时候，网站的入场就使用的是大量樱花飘过的场景(可惜如今的官网已经改版掉了)，类似现在官网上这个页面的效果(基于particles.js)，实现的原理其实就是若干张樱花图片作为素材(ctx.drawImage)+位移计算。

可惜效果和性能上都差强人意。

当然也有上WebGL的：比如直接建模一个简单樱花模型的这个页面，模型+instance其实已经能获得不错的效果与性能了：LGL-instance

但是要说最狠的，那还得是CodePen 上的Sakura Animation using WebGL，完全没有使用任何图片素材，效果全部通过Shader计算及绘制。

白嫖这个牛皮的效果其实很久了，可惜当年水平太垃圾，压根看不懂，只能瞎改几个数值凑凑效果。

时过境迁，现在终于是能看个一知半解了，作为一名秉持着“白嫖也要知其所以然”学术精神的白学家，所以讲道理必须补一波“Sakura是怎样炼成的”，上Threejs从头搂一个专用的Sakura效果岂不美滋滋：

Shape

前面也提到了这是一个纯 WebGL 效果，没有使用素材图片，所以首先最基础的一步自然是 Sakura 的形状绘制。

直接通过片元着色器绘制一些图案其实并不罕见，比如：shadertoy、glslsandbox

所以我们哗啦一下就画出一个椭圆了！

旋转一些角度并且通过透明度裁剪一下，哗啦就可以画出基本形状了！

Vertex Animation

2D 扩展到 3D，添加上各个轴向的一些随机旋转，哗啦一下就旋转起来了！

Particle

粒子化哗啦一下数量就多了：

Light/PostProcessing

再加个简单的方向光和辉光、暗角的后处理，窃个 Megumi 的素材图，哗啦一下美爆了！Rua！！（图片跨域的原因此处换用的 codesandbox，速度会慢些）