本文内容主要包括了解什么是着色器、为什么要使用着色器、GLSL 语言的基本语法规则、理解顶点着色器、片元着色器、掌握Attributes、Varyings、Uniforms的区别，两种着色器材质用法等

水波纹的核心原理很简单：就像往水里扔石子，水面会泛起一圈圈涟漪。在 Shader 里，就是用正弦/余弦函数模拟这种“波动”，再让纹理或顶点跟着波动“动起来”。 一、先搭个舞台：用 Three.js 加

本篇文章里古柳将教大家如何一步步实现出一个酷炫漂亮的“折射小球”3D效果，其中将运用到平坦着色、面法线及其更新、平行光下的漫反射等等内容。

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

几年前学shader好几次碰到原作网页已下线打不开或改版，无法体验原作Shader效果，且有时缺少模型图片等影响学习...前阵子接触到网站时光机，突然灵光一闪发现好像可以用来找当初的Shader页面

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

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

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

本文将深入剖析Three.js ShaderMaterial关键属性，帮助开发者掌握自定义着色器的核心控制能力。