山海思录

通过将黑白线稿图片绘制到canvas画布上，以获取像素颜色值过滤出黑色部分坐标位置，并用于设置Three.js Shader粒子系统，再结合RGB数值不断减小做出颜色深浅变化的效果。

本文将讲解粒子动画等内容，实现粒子在自身位置上下移动、在随机的无序状态和特定形状的有序状态之间变化、以及不同形状之间切换过渡等效果，这些都是很多实际 shader 网页里很常见、很实用的知识！

两年前看到 Pepyaka 这个网页效果，被其丝滑酷炫漂亮到效果所惊艳，今天终于可以带大家用 Three.js Shader 一步步详复现这个效果，其实并不复杂，相信很多前端、程序员都会喜欢这样的效果

用 Three.js Shader 粒子系统手撸一个超级漂亮的星系效果！学习如何在球体和圆盘上设置顶点、如何插值颜色、让粒子运动起来等等！

本篇文章古柳将教大家如何在顶点着色器里对长方体的顶点进行不同角度的旋转，从而实现出“扭麻花”般的效果。

本文教大家用GUI控制参数；将 noise 函数的数值转换成颜色，并结合 step、mix 插值颜色、使用 Pantone 年度代表色调色板颜色等做出双色 noise 小球；通过 HSL更好地控制颜色

正式开启 Three.js Shader 教程，在本篇文章里带大家看看几何体上的顶点属性，介绍下 GLSL 基础、顶点着色器、片元着色器等内容。

本文将继续结合 GLSL 的内置函数和简单的 sin 正弦函数，教大家利用 uv 做出更多酷炫的效果。

本篇文章教大家通过 GLSL 内置函数 mix 对颜色进行插值，并重温前两篇文章所学的颜色渐变与突变、重复条纹、圆圈等效果，在此基础上实现彩色插值等效果。