不借助GPU.js、WebGL、Three.js，原生JS如何利用GPU加速3D引擎？

1. 使用WebGPU原生API #

WebGPU是浏览器提供的新一代GPU编程接口，无需第三方依赖，可直接通过原生JS调用GPU进行计算和渲染，非常适合大规模像素处理场景。

核心实现步骤： #

• 请求GPU适配器与设备：通过navigator.gpu.requestAdapter()和adapter.requestDevice()获取GPU访问权限
• 编写WGSL着色器：用WebGPU专属的着色语言编写像素处理逻辑
• 创建渲染/计算管线：将着色器编译为GPU可执行的管线
• 提交渲染指令：将计算结果输出到Canvas

示例代码片段：

async function initWebGPU() {
  const adapter = await navigator.gpu.requestAdapter();
  const device = await adapter.requestDevice();
  const canvas = document.getElementById('target-canvas');
  const context = canvas.getContext('webgpu');
  
  const canvasFormat = navigator.gpu.getPreferredCanvasFormat();
  context.configure({ device, format: canvasFormat });

  // 像素处理着色器
  const shaderModule = device.createShaderModule({
    code: `
      @vertex fn vs(@builtin(vertex_index) idx: u32) -> @builtin(position) vec4f {
        let positions = array(
          vec2f(-1.0, -1.0), vec2f(1.0, -1.0), vec2f(-1.0, 1.0),
          vec2f(1.0, -1.0), vec2f(-1.0, 1.0), vec2f(1.0, 1.0)
        );
        return vec4f(positions[idx], 0.0, 1.0);
      }

      @fragment fn fs() -> @location(0) vec4f {
        // 替换为你的像素计算逻辑
        return vec4f(0.8, 0.2, 0.4, 1.0);
      }
    `
  });

  // 创建渲染管线
  const pipeline = device.createRenderPipeline({
    layout: 'auto',
    vertex: { module: shaderModule, entryPoint: 'vs' },
    fragment: {
      module: shaderModule,
      entryPoint: 'fs',
      targets: [{ format: canvasFormat }]
    }
  });

  // 执行渲染
  const encoder = device.createCommandEncoder();
  const pass = encoder.beginRenderPass({
    colorAttachments: [{
      view: context.getCurrentTexture().createView(),
      clearValue: { r: 0, g: 0, b: 0, a: 1 },
      loadOp: 'clear',
      storeOp: 'store'
    }]
  });
  pass.setPipeline(pipeline);
  pass.draw(6);
  pass.end();

  device.queue.submit([encoder.finish()]);
}

// 初始化
initWebGPU();

2. 隐式GPU加速：OffscreenCanvas + Web Worker #

如果不想直接编写GPU着色器，可以利用OffscreenCanvas将渲染任务转移到Web Worker，浏览器会自动调度GPU进行硬件加速，避免主线程阻塞，同时高效处理大量像素绘制。

实现示例： #

主线程代码：

const canvas = document.getElementById('target-canvas');
const offscreen = canvas.transferControlToOffscreen();
const worker = new Worker('render-worker.js');
worker.postMessage({ type: 'init', canvas: offscreen }, [offscreen]);

Worker线程（render-worker.js）：

let ctx;

self.onmessage = (e) => {
  if (e.data.type === 'init') {
    ctx = e.data.canvas.getContext('2d');
    renderFrame();
  }
};

function renderFrame() {
  // 处理2073600像素（1920x1080）
  const imageData = ctx.createImageData(1920, 1080);
  const data = imageData.data;

  // 批量填充像素（可根据你的3D引擎逻辑修改）
  for (let i = 0; i < data.length; i += 4) {
    data[i] = Math.floor(Math.random() * 256);
    data[i+1] = Math.floor(Math.random() * 256);
    data[i+2] = Math.floor(Math.random() * 256);
    data[i+3] = 255;
  }

  ctx.putImageData(imageData, 0, 0);
  requestAnimationFrame(renderFrame);
}

关于GPU.js报错"GPU is not a constructor"的修复 #

这个错误通常由引入方式错误导致：

• CDN引入：确保使用正确的版本和脚本地址，例如：

  <script src="https://cdn.jsdelivr.net/npm/gpu.js@2.16.0/dist/gpu-browser.min.js"></script>
  

  之后通过const gpu = new GPU();初始化
• npm安装：确保正确导入模块：

  // CommonJS
  const { GPU } = require('gpu.js');
  // ES模块
  import { GPU } from 'gpu.js';
  const gpu = new GPU();
  

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