这是一套比较激进的可视化搭建方案（激进体现在适用场景和技术栈的选择上），核心思想就是极致的内聚；因此可以看到除了必要的组件配置，其他所有相关的配置都砍掉了，理由就是这些配置完全可以通过内聚使其成为内部参数，而减少不必要的参数暴露（这一点可以参照现有的一些比较流行的可视化搭建方案，它们都尽可能实现对组件框架的所有语法的完全映射，以便达到最大的自由度）；从可视化搭建业务的角度来说，一般就是封装的程度越高，其自由度越低，而搭建效率就越高[1]；而这套设计就是为了提高业务搭建效率，所以自然就倾向于内聚；
Vue3（≥3.2，用于支持setup模式） + TS；本来是想打算实现GAMES101课程大作业中的布料渲染那种效果的，不知不觉就变成了随风飘动的窗帘布了😅；所以就是随便找了个BRDF（Disney BRDF）来实现，而非那篇参考论文[1]中提供的BRDF，所以这里偷了个懒，虽然看起来有布料那么回事，但是高光部分显然不太合理；
由于在不久前终于完成了整个GAMES101课程的视频学习（当然除了大作业以外的作业也认真弄了），所以终于可以来挑战一下大作业了；虽然可以自由组织项目，但是作为菜鸟个人觉得课程给出的大作业选题就足够有意思和有挑战了（主要是想不出……），而且这里的选题符合课程内容方向，也比较容易去上手和扩展。
反正一眼扫过去，第一想要做的就是这个了：
因为这个一看就知道，只需要写片段着色器就好了，不需要操作其他的数据了，因而用webGL也正好；然后打开相关的资料一看，这作者太熟悉了，著名的iq大神（ShaderToy网站的创建者，且热衷于在其博客上分享各种图形学的干货内容，其制作的各种着色器demo或动画更是令人惊奇）：
iq在上述场景渲染的演讲PPT中虽然没有给出完整的着色器代码，但是关于渲染的各种重要部分都给出了伪代码和原理讲解，所以推荐仔细阅读这个PPT；
不过，尽管这种渲染方式无需准备复杂场景的顶点数据和繁琐的矩阵变换等等，但绝不代表着就很容易实现。