/webGL-fragment-render

webGL着色器绘图及2D 距离场

Primary LanguageJavaScript

说明

仓库包含了一些简单的fragment shader绘图示例,从fragment坐标系,到2D 距离场函数以及一些基本的2D图形库,能够从浅入深的了解一些shader的编写。

当然,对于shader而言,本仓库中的一些示例只是皮毛,在线地址如下,可以在线调试fragment shader以及查看结果:

http://zhouzhili.github.io/dist_frag/index.html

示例包含:

  • 坐标轴
  • 坐标轴2
  • 颜色
  • 多曲线
  • 多圆
  • 矩形
  • 矩形2
  • 启用时间
  • 变换
  • 雷达
  • 使用图形库
  • 图形布尔运算
  • 图形操作
  • 图形操作2
  • 基础图案
  • 图案-墙
  • 动态图案
  • 纹理
  • 纹理裁剪
  • 2D随机

总结文章

  1. 构建自己的 GLSL 绘图器

  2. webGL 二维有向距离场(SDF)及布尔运算

  3. 着色器绘图在线示例