glslify: The Node.js Package Manager for WebGL shaders

glslify: The Node.js Package Manager for WebGL shaders

是一个基于 npm 的 WebGL 着色器包管理器。它允许您将多个 GLSL 源文件组合到单个着色器中，并自动处理依赖关系。

用途

glslify 可以用于 Web 开发中的 WebGL 着色器开发。您可以使用 glslify 将多个 GLSL 源文件合并为一个着色器，并通过 npm 包引入其他库。这样可以简化着色器的编写和维护过程。

特点

• 基于 npm，可以使用 npm 包管理器安装、更新和共享 glslify 包。
• 支持模块化编程，可以将不同的着色器功能封装成独立的模块，方便复用和组合。
• 自动处理依赖关系，可以自动合并和排序多个着色器源文件，确保正确的编译顺序。
• 支持预处理器指令，可以在着色器代码中使用宏定义和其他预处理器指令。
• 提供了命令行工具和 API 接口，可以轻松地在项目中集成 glslify。

示例

以下是一个简单的示例，展示了如何使用 glslify 编写一个基本的 WebGL 程序：

const glslify = require('glslify');
const canvas = document.getElementById('canvas');

// 加载顶点着色器和片段着色器
Promise.all([
  glslify('./shaders/vertex.glsl'),
  glslify('./shaders/fragment.glsl')
]).then(([vert, frag]) => {
  // 创建 WebGL 上下文并初始化顶点缓冲区和着色器程序
  const gl = canvas.getContext('webgl');
  const program = initShaderProgram(gl, vert, frag);
  const positions = new Float32Array([0, 0.5, -0.5, -0.5, 0.5, -0.5]);

  // 绑定顶点缓冲区并将顶点数据发送到 GPU
  const positionBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);

  // 设置视口大小和清除颜色
  gl.viewport(0, 0, canvas.width, canvas.height);
  gl.clearColor(0, 0, 0, 1);

  // 渲染循环
  function render() {
    requestAnimationFrame(render);

    // 清除帧缓冲区
    gl.clear(gl.COLOR_BUFFER_BIT);

    // 使用着色器程序绘制三角形
    gl.useProgram(program);
    gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(positionAttributeLocation);
    gl.drawArrays(gl.TRIANGLES, 0, positions.length / 2);
  }

  // 获取着色器程序中顶点位置属性的位置
  const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');

  render();
});

在这个示例中，我们首先加载两个 GLSL 源文件（顶点着色器和片段着色器），然后创建一个 WebGL 上下文并初始化顶点缓冲区和着色器程序。最后，我们在渲染循环中调用 render 函数，清