在Node.js中使用Fabric.js结合WebGL自定义滤镜的问题

当然可以！你完全可以借助headless-gl（也常被称为gl）这类工具在Node.js环境中模拟WebGL上下文，让Fabric.js能够识别并启用WebGL渲染，从而顺利加载带自定义WebGL滤镜的Fabric JSON。下面是具体的实现思路和步骤：

Fabric.js在Node.js环境中默认会因为没有浏览器的window对象和原生WebGL上下文，判定WebGL不支持。我们的核心思路就是用headless-gl创建一个兼容的WebGL上下文，然后修改Fabric.js的WebGL检测逻辑，让它认为当前环境支持WebGL，进而加载并渲染你的自定义滤镜。

1. 安装必要依赖 #

首先需要安装Fabric.js、headless-gl，以及Node.js环境下的Canvas依赖（Fabric在Node端依赖node-canvas）：

npm install fabric gl canvas
# 或者用yarn
yarn add fabric gl canvas

2. 模拟WebGL上下文并配置Fabric.js #

我们需要手动创建headless-gl的WebGL上下文，然后覆盖Fabric.js的WebGL检测和上下文获取方法：

const { createCanvas } = require('canvas');
const gl = require('gl');
const fabric = require('fabric');

// 定义画布尺寸（根据你的需求调整）
const canvasWidth = 800;
const canvasHeight = 600;

// 使用headless-gl创建WebGL上下文
const webglCtx = gl(canvasWidth, canvasHeight, { preserveDrawingBuffer: true });

// 让Fabric.js认为当前环境支持WebGL
fabric.isWebglSupported = () => true;

// 覆盖Fabric的WebGL上下文获取方法，返回我们创建的headless-gl上下文
fabric.util.getWebglContext = () => webglCtx;

3. 注册自定义WebGL滤镜 #

在加载Fabric JSON之前，必须先注册你的自定义WebGL滤镜，否则Fabric无法识别JSON中的滤镜类型：

// 示例：注册一个自定义反转颜色的WebGL滤镜
fabric.MyCustomWebGLFilter = fabric.util.createClass(fabric.Image.filters.BaseFilter, {
  type: 'MyCustomWebGLFilter',
  
  // 自定义片段着色器代码
  fragmentSource: `
    precision highp float;
    uniform sampler2D uTexture;
    varying vec2 vTexCoord;
    
    void main() {
      vec4 originalColor = texture2D(uTexture, vTexCoord);
      // 反转RGB颜色通道
      gl_FragColor = vec4(1.0 - originalColor.r, 1.0 - originalColor.g, 1.0 - originalColor.b, originalColor.a);
    }
  `,

  // 实现WebGL滤镜的应用逻辑（如果需要自定义uniform等参数）
  applyToWebgl: function(options) {
    const gl = options.context;
    const program = options.program;
    // 这里可以添加自定义uniform变量的设置逻辑（如果你的滤镜需要）
  }
});

// 将滤镜注册到Fabric的滤镜注册表中
fabric.filterRegistry.addClass('MyCustomWebGLFilter', fabric.MyCustomWebGLFilter);

4. 加载Fabric JSON并渲染 #

现在就可以加载你的Fabric JSON并完成渲染了，最后还可以导出为图片文件：

// 你的Fabric JSON数据（示例）
const fabricJsonData = {
  "version": "5.3.0",
  "objects": [
    {
      "type": "image",
      "src": "path/to/your/image.jpg",
      "filters": [
        {
          "type": "MyCustomWebGLFilter"
        }
      ],
      "left": 0,
      "top": 0,
      "width": canvasWidth,
      "height": canvasHeight
    }
  ]
};

// 创建Fabric静态画布实例
const fabricCanvas = new fabric.StaticCanvas(null, { 
  width: canvasWidth, 
  height: canvasHeight,
  enableRetinaScaling: false // 避免Node环境下的缩放问题
});

// 加载JSON并渲染
fabricCanvas.loadFromJSON(fabricJsonData, () => {
  // 触发渲染
  fabricCanvas.renderAll();

  // 将渲染结果导出为PNG图片
  const nodeCanvas = fabricCanvas.getElement();
  nodeCanvas.toBuffer('image/png', (err, buffer) => {
    if (!err) {
      const fs = require('fs');
      fs.writeFileSync('rendered-output.png', buffer);
      console.log('渲染完成！已保存为rendered-output.png');
    } else {
      console.error('渲染导出失败:', err);
    }
  });
});

• 着色器兼容性：headless-gl的WebGL上下文和浏览器原生上下文可能存在细微差异，某些浏览器支持的WebGL扩展可能在headless-gl中不支持，需要测试你的自定义着色器代码是否兼容。
• 版本兼容性：确保fabric、gl、canvas三个包的版本相互兼容，不同版本可能存在API差异或冲突。
• 性能调试：复杂滤镜在Node环境下的渲染性能可能不如浏览器，如果遇到性能问题，可以尝试简化着色器逻辑，或者调整画布尺寸。
• 资源路径：如果Fabric JSON中的图片使用相对路径，在Node环境下需要确保路径正确，或者提前将图片加载为Buffer传入。

内容的提问来源于stack exchange，提问作者alexolotl