snowdream

前言

本来是想打算实现GAMES101课程大作业中的布料渲染那种效果的，不知不觉就变成了随风飘动的窗帘布了😅；所以就是随便找了个BRDF（Disney BRDF）来实现，而非那篇参考论文^[1]中提供的BRDF，所以这里偷了个懒，虽然看起来有布料那么回事，但是高光部分显然不太合理；

demo地址：https://xiexuefeng.cc/app/we/demo/cloth-render/

前言

由于在不久前终于完成了整个GAMES101课程的视频学习（当然除了大作业以外的作业也认真弄了），所以终于可以来挑战一下大作业了；虽然可以自由组织项目，但是作为菜鸟个人觉得课程给出的大作业选题就足够有意思和有挑战了（主要是想不出……），而且这里的选题符合课程内容方向，也比较容易去上手和扩展。

反正一眼扫过去，第一想要做的就是这个了：

因为这个一看就知道，只需要写片段着色器就好了，不需要操作其他的数据了，因而用webGL也正好；然后打开相关的资料一看，这作者太熟悉了，著名的iq大神（ShaderToy网站的创建者，且热衷于在其博客上分享各种图形学的干货内容，其制作的各种着色器demo或动画更是令人惊奇）：

iq在上述场景渲染的演讲PPT中虽然没有给出完整的着色器代码，但是关于渲染的各种重要部分都给出了伪代码和原理讲解，所以推荐仔细阅读这个PPT；

不过，尽管这种渲染方式无需准备复杂场景的顶点数据和繁琐的矩阵变换等等，但绝不代表着就很容易实现。

实现效果

https://xiexuefeng.cc/app/we/demo/games101-sdf/

前言

最近老是在项目中发现一些由getComputedStyle方法引起的性能问题，无非就是一不小心引起了大量的样式计算（Recalculate Style）和重排（Layout），从而引起了线程阻塞，造成页面卡顿；

前言

没想到在Mac上搭建PHP开发环境会有这么多坑，手动编译真是坑到吐血；果然还是包管理器才是王道，不过经过此次折腾，确实是时候学习一些docker的用法了；

前言

如果在TS中声明了一些对象类型，使用这些对象类型来注解变量时，这些变量值的初始化往往需要自己手动按对象结构填写一遍，尽管有了TS类型声明和IDE的智能提示的加持下，这个填写过程还是很透明快速的；但是仔细一想，明明在声明这些对象类型的时候已经填过一层结构，为啥在数据初始化的时候又不得不去再填一遍，难道就不能自动根据声明的结构和一些简单的规则直接生成我们想要的初始化数据吗？

这是可以做到的；答案就来自于TS本身提供的编译器相关的API，只要从编译的角度去看待上面的问题，那么解决方案还是“比较轻松”的；