@antv/g-shader-components

使用方式

基于 glslify 提供 chunks。

目前在 G 中 g-plugin-3d g-plugin-device-renderer 会使用该包，在使用时需要配合 rollup-plugin-glslify，例如下面是 MeshBasicMaterial 使用的 FS：

// material.basic.frag

// 公共的 Uniform 定义
#pragma glslify: import('@antv/g-shader-components/scene.both.glsl')
#pragma glslify: import('@antv/g-shader-components/material.both.glsl')

#pragma glslify: import('@antv/g-shader-components/batch.declaration.frag')
#pragma glslify: import('@antv/g-shader-components/uv.declaration.frag')
#pragma glslify: import('@antv/g-shader-components/map.declaration.frag')
#pragma glslify: import('@antv/g-shader-components/wireframe.declaration.frag')
#pragma glslify: import('@antv/g-shader-components/fog.declaration.frag')

void main() {
  // 通用属性，例如 fill opacity
  #pragma glslify: import('@antv/g-shader-components/batch.frag')
  // 贴图
  #pragma glslify: import('@antv/g-shader-components/map.frag')

  gbuf_color = u_Color;
  gbuf_color.a = gbuf_color.a * u_Opacity;

  // 绘制 wireframe
  #pragma glslify: import('@antv/g-shader-components/wireframe.frag')
  // 场景雾
  #pragma glslify: import('@antv/g-shader-components/fog.frag')
}

文件名命名规范

.vert 只能在 Vertex Shader 中使用。
.frag 只能在 Fragment Shader 中使用。

带有 .declaration. 部分的在 Shader 开头全局作用域中使用，反之在 main 函数中执行。

内置 Chunks

scene

包含场景通用的 Uniform 声明

scene.both.glsl

material

包含材质通用的 Uniform 声明

material.both.glsl

uv

纹理坐标

uv.vert 将 a_Uv 顶点数据传给 v_Uv
uv.declaration.frag 声明 v_Uv，后续纹理查询使用

wireframe

提供 wireframe 绘制，常用于调试或某种风格化效果。暂不支持边框颜色和宽度的配置。

wireframe.vert 将 a_Barycentric 重心坐标数据传给 v_Barycentric
wireframe.frag 调用计算 edgeFactor 函数
wireframe.declaration.frag 声明 edgeFactor 函数

fog

提供简单的场景雾效果。支持 exp、exp2 和 linear 三种类型。

fog.declaration.vert 声明深度
fog.declaration.frag 提供深度雾函数
fog.frag 在计算完光照后，调用函数

map

漫反射贴图

map.declaration.frag 声明采样器
map.frag 纹理采样

bump map

参考 Three.js 的实现，基于原始论文：https://www.dropbox.com/s/l1yl164jb3rhomq/mm_sfgrad_bump.pdf?dl=0

bumpmap.declaration.frag

采样发生在 normal chunk 中。

specular map