GLSL-Dither 使用教程

2025-04-19 11:35:43作者：宣海椒Queenly

1. 项目的目录结构及介绍

glsl-dither 项目是一个在 GLSL 中实现 Bayer 矩阵抖动的开源项目。以下是项目的目录结构及其介绍：

example/: 包含示例代码和 HTML 文件，用于展示抖动效果。
.gitignore: 指定 Git 忽略的文件和目录。
.npmignore: 指定 npm 发布时忽略的文件和目录。
2x2.glsl: 2x2 Bayer 矩阵抖动 GLSL 代码。
4x4.glsl: 4x4 Bayer 矩阵抖动 GLSL 代码。
8x8.glsl: 8x8 Bayer 矩阵抖动 GLSL 代码。
LICENSE.md: 项目使用的 MIT 许可证文本。
README.md: 项目说明文件。
index.html: 主页 HTML 文件，用于展示项目。
package.json: npm 包配置文件。

2. 项目的启动文件介绍

项目的主要启动文件是 index.html。这个 HTML 文件用于展示抖动效果，并包含必要的 JavaScript 和 GLSL 代码。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>GLSL-Dither 示例</title>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script src="path/to/your/script.js"></script>
</body>
</html>

在 script.js 中，你将需要包含相应的 GLSL 代码，并将其编译到你的着色器程序中，然后将其应用到 canvas 元素上。

3. 项目的配置文件介绍

项目的配置主要通过 package.json 文件进行。这个文件用于定义 npm 包的元数据，包括项目名称、版本、描述、入口文件等。

{
  "name": "glsl-dither",
  "version": "1.0.0",
  "description": "Bayer matrix dithering in GLSL",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --mode development"
  },
  "devDependencies": {
    "webpack": "^5.0.0",
    "webpack-cli": "^4.0.0",
    "webpack-dev-server": "^4.0.0"
  }
}