Shader 学习

Glslify 指南

什么是 Glslify？

Glslify 是一个 GLSL 模块化管理工具，允许您将 GLSL 代码分解为可重用的模块。 它类似于 JavaScript 的模块系统，让您可以 import 和 export GLSL 函数和变量。

为什么使用 Glslify？

  • 代码重用：避免重复编写相同的函数
  • 模块化：将复杂的着色器分解为小的、可管理的部分
  • 维护性：更容易更新和维护代码
  • 社区库：可以使用社区贡献的 GLSL 模块

基本使用方法

1. 安装 Glslify

npm install -g glslify

2. 创建模块

// noise.glsl
float random(vec2 st) {
  return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123);
}

#pragma glslify: export(random)

3. 使用模块

// main.glsl
#pragma glslify: random = require('./noise.glsl')

void main() {
  vec2 uv = gl_FragCoord.xy / resolution.xy;
  float noise = random(uv);
  gl_FragColor = vec4(vec3(noise), 1.0);
}

在本项目中的应用

本学习平台已经集成了 Glslify，您可以在教程中看到如何使用它来组织和重用 GLSL 代码。 我们提供了一些常用的 GLSL 模块，包括数学函数、噪声函数和颜色工具。