我在electron项目中使用官方示例代码来尝试使用webgpu，求助

[huangziqiangj]

当我尝试在electron项目中使用官方示例代码来应用webgpu技术来提高我的性能时，我遇到了以下报错，我不知道应该怎么调整我的代码或项目，这对我很重要，因为我的业务需要渲染几千个图形到页面，不使用gpu将会很卡。谢谢，这是我的代码片段 const import { Renderer } from '@antv/g-webgpu'; import { Plugin } from '@antv/g-plugin-gpgpu'; webgpuRenderer = new Renderer(); webgpuRenderer.registerPlugin(new Plugin()); class AtlasDraw2G { initCanvas(mcanvas) { canvas = new Canvas({ canvas: mcanvas, width:1000, height:1000, renderer: webgpuRenderer, }); //code... canvas.appendChild(node) } }
我的报错
Uncaught TypeError: this.device.createProgramSimple is not a function at RenderCache.createProgramSimple (index.esm.js:572:1) at Instanced.applyRenderInst (index.esm.js:4113:1) at eval (index.esm.js:7161:1) at Array.forEach (<anonymous>) at BatchManager.render (index.esm.js:7151:1) at eval (index.esm.js:2864:1) at eval (index.esm.js:7945:1) at Array.forEach (<anonymous>) at SyncHook.call (index.esm.js:7943:1) at RenderingService.render (index.esm.js:10091:1) RenderCache.createProgramSimple @ index.esm.js:572 Instanced.applyRenderInst @ index.esm.js:4113 eval @ index.esm.js:7161 BatchManager.render @ index.esm.js:7151 eval @ index.esm.js:2864 eval @ index.esm.js:7945 SyncHook.call @ index.esm.js:7943 RenderingService.render @ index.esm.js:10091 Canvas.render @ index.esm.js:15161 tick @ index.esm.js:15171 requestAnimationFrame (async) tick @ index.esm.js:15172 requestAnimationFrame (async) tick @ index.esm.js:15172 requestAnimationFrame (async) tick @ index.esm.js:15172 requestAnimationFrame (async) tick @ index.esm.js:15172 requestAnimationFrame (async) tick @ index.esm.js:15172 requestAnimationFrame (async) tick @ index.esm.js:15172 requestAnimationFrame (async) tick @ index.esm.js:15172 requestAnimationFrame (async) tick @ index.esm.js:15172 requestAnimationFrame (async) tick @ index.esm.js:15172 requestAnimationFrame (async) tick @ index.esm.js:15172 requestAnimationFrame (async) tick @ index.esm.js:15172 requestAnimationFrame (async) tick @ index.esm.js:15172 requestAnimationFrame (async) tick @ index.esm.js:15172 requestAnimationFrame (async) tick @ index.esm.js:15172 requestAnimationFrame (async) tick @ index.esm.js:15172 requestAnimationFrame (async) tick @ index.esm.js:15172 requestAnimationFrame (async) tick @ index.esm.js:15172 requestAnimationFrame (async) tick @ index.esm.js:15172 requestAnimationFrame (async) tick @ index.esm.js:15172 requestAnimationFrame (async) tick @ index.esm.js:15172 requestAnimationFrame (async) tick @ index.esm.js:15172 requestAnimationFrame (async) tick @ index.esm.js:15172 requestAnimationFrame (async) tick @ index.esm.js:15172 requestAnimationFrame (async) tick @ index.esm.js:15172 requestAnimationFrame (async) tick @ index.esm.js:15172 requestAnimationFrame (async) tick @ index.esm.js:15172 requestAnimationFrame (async) tick @ index.esm.js:15172 requestAnimationFrame (async) tick @ index.esm.js:15172 requestAnimationFrame (async) tick @ index.esm.js:15172 requestAnimationFrame (async) tick @ index.esm.js:15172 requestAnimationFrame (async) tick @ index.esm.js:15172 requestAnimationFrame (async) tick @ index.esm.js:15172 canvasbox.js:145 Uncaught TypeError: Cannot read properties of undefined (reading 'getContext') at eval (canvasbox.js:145:1)

[xiaoiver]

请问是需要渲染什么样的图形呢？比如大量 Circle、Lines

[huangziqiangj]

是的，大量的image与lines 在 2023-10-16 10:48:18，xiaoiver ***@***.***> 写道： 请问是需要渲染什么样的图形呢？比如大量 Circle、Lines — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: ***@***.***>

[xiaoiver]

https://codesandbox.io/s/g-webgl-forked-8lmvgk?file=/index.ts
可以先使用 @antv/g-webgl，这个例子里有大量 Lines 和 Circles 的展示。

相比 WebGPU，WebGL 的兼容性会更好，正好看你提到了 electron。