我在electron项目中使用官方示例代码来尝试使用webgpu，求助
huangziqiangj opened this issue · comments
当我尝试在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)
请问是需要渲染什么样的图形呢？比如大量 Circle、Lines
https://codesandbox.io/s/g-webgl-forked-8lmvgk?file=/index.ts
可以先使用 @antv/g-webgl，这个例子里有大量 Lines 和 Circles 的展示。
相比 WebGPU，WebGL 的兼容性会更好，正好看你提到了 electron。