本文正在参加「金石计划」 问题出现背景 公司在做大屏可视化项目时 ，有多个子页面，每个页面都有 3D 场景 ， 我负责的是 threejs 模块 ， 在项目起步时 ， 还没有意识到问题的严重性 ， 项

最近看到有小伙伴发了一个小米 SU7 的展示网页，那是相当的酷炫。花了几天功夫，我将上面的特效给还原了出来。

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

继续给大家介绍下 Shader 是什么、能做什么、在哪里有用到，并且为后续古柳开始写 Three.js Shader 做个引子！

我们在工作中或多或少都会接触到三维可视化的相关内容，神秘而酷炫它可以更直观地描述物质和更清晰地传递讯息，给产品带来更高的可玩性及更多创造力。

如标题所言都是些很基础但是异常重要的数学知识，如果不能彻底掌握它们，在 3D 的世界中你将寸步难行。 在构建 3D 场景时我们需要一个坐标系来描述场景中所有点的坐标，这个坐标系也被称为世界坐标系；一般默认为你面朝计算机屏幕时，X 轴是水平的（正方向为右），Y 轴是垂直的（正方向…