跳到主要内容

部署了 glsl editor

· 阅读需 10 分钟
Yangbingrui
Front End Engineer @ grg

build with glsl editor

今天在学习关于 shader 的课程(https://www.bilibili.com/video/BV1Ki4y1a72S?p=28&vd_source=78f0c5c73b2096e66014c8c26f51ee3a)

老师教了很多用 fragment shader 实现的有趣的效果,也推荐了很好的 shader 学习教材

在看这个 The Book of Shaders,发现了作者实现的一个着色器编辑器,支持很多非常有用的特性,特别是实时预览,还有语法错误提示,而且是开源的,鉴于网络环境, 所以我将这个编辑器私有化部署了,并且将其集成到我这个博客中,这样一来,调试和预览效果就太方便了。

下面是一些例子,持续学习中。

备注

注意这个页面会比较卡,因为渲染了很多个iframe,我已经加上了懒加载了。 如果在新页面打开代码没了,那就拷贝过去吧。

  • 渐变斑马纹
  • 渐变斑马纹
  • 格子纹?
  • 反「?
  • 渐变
  • 交叉渐变