Wasp•8mo ago

I want to show a react gpu component using Use.GPU

Hi, guys, thank you for the nice library, I want to show a gpu render component using Use.GPU which is from https://usegpu.live/docs/reference-components-@use-gpu-react My code is :

import { WebGPU, AutoCanvas, Pass, Material, Geometry, Shader } from '@use-gpu/webgpu';

const UsePage = () => {
  const canvasRef = useRef(null);

  useEffect(() => {
    if (!canvasRef.current) return;

    const vertexShader = `
      @vertex fn main(@builtin(vertex_index) VertexIndex : u32) -> @builtin(position) vec4<f32> {
        var positions = array<vec2<f32>, 2>(
          vec2<f32>(-0.5, -0.5), // Start point of the line
          vec2<f32>(0.5, 0.5)    // End point of the line
        );
        return vec4<f32>(positions[VertexIndex], 0.0, 1.0);
      }
    `;
    const fragmentShader = `
      @fragment fn main() -> @location(0) vec4<f32> {
        return vec4<f32>(1.0, 0.0, 0.0, 1.0); // Red color
      }
    `;
  }, []);
  return (
    <WebGPU>
      <AutoCanvas canvas={canvasRef.current}>
        <Pass>
          <Shader vertex={vertexShader} fragment={fragmentShader} />
          <Geometry vertices={2} /> {/* Only two vertices are needed for a line */}
          <Material />
        </Pass>
      </AutoCanvas>
    </WebGPU>
  );
};

export default UsePage;

import { WebGPU, AutoCanvas, Pass, Material, Geometry, Shader } from '@use-gpu/webgpu';

const UsePage = () => {
  const canvasRef = useRef(null);

  useEffect(() => {
    if (!canvasRef.current) return;

    const vertexShader = `
      @vertex fn main(@builtin(vertex_index) VertexIndex : u32) -> @builtin(position) vec4<f32> {
        var positions = array<vec2<f32>, 2>(
          vec2<f32>(-0.5, -0.5), // Start point of the line
          vec2<f32>(0.5, 0.5)    // End point of the line
        );
        return vec4<f32>(positions[VertexIndex], 0.0, 1.0);
      }
    `;
    const fragmentShader = `
      @fragment fn main() -> @location(0) vec4<f32> {
        return vec4<f32>(1.0, 0.0, 0.0, 1.0); // Red color
      }
    `;
  }, []);
  return (
    <WebGPU>
      <AutoCanvas canvas={canvasRef.current}>
        <Pass>
          <Shader vertex={vertexShader} fragment={fragmentShader} />
          <Geometry vertices={2} /> {/* Only two vertices are needed for a line */}
          <Material />
        </Pass>
      </AutoCanvas>
    </WebGPU>
  );
};

export default UsePage;

The use-gpu package I've installed is:

    "@use-gpu/inspect": "^0.11.0",
    "@use-gpu/inspect-gpu": "^0.11.0",
    "@use-gpu/layout": "^0.11.0",
    "@use-gpu/live": "^0.11.0",
    "@use-gpu/parse": "^0.11.0",
    "@use-gpu/plot": "^0.11.0",
    "@use-gpu/react": "^0.11.0",
    "@use-gpu/scene": "^0.11.0",
    "@use-gpu/traits": "^0.11.0",
    "@use-gpu/webgpu": "^0.11.0",
    "@use-gpu/wgsl-loader": "^0.11.0",
    "@use-gpu/workbench": "^0.11.0",
    "@webgpu/types": "^0.1.40",
  
}

    "@use-gpu/inspect": "^0.11.0",
    "@use-gpu/inspect-gpu": "^0.11.0",
    "@use-gpu/layout": "^0.11.0",
    "@use-gpu/live": "^0.11.0",
    "@use-gpu/parse": "^0.11.0",
    "@use-gpu/plot": "^0.11.0",
    "@use-gpu/react": "^0.11.0",
    "@use-gpu/scene": "^0.11.0",
    "@use-gpu/traits": "^0.11.0",
    "@use-gpu/webgpu": "^0.11.0",
    "@use-gpu/wgsl-loader": "^0.11.0",
    "@use-gpu/workbench": "^0.11.0",
    "@webgpu/types": "^0.1.40",
  
}

when wasp start , error shows:

[ Client!] ✘ [ERROR] No loader is configured for ".wgsl" files:

[ Client!] ✘ [ERROR] No loader is configured for ".wgsl" files:

I have install the wgsl-loader, but I don't know how to use it! Please give me some advice, Thank you very much!

usegpu.live

Use.GPU Docs - react

Reactive WebGPU component library

8 Replies

kapa.ai•8mo ago

Hi @jellyzone. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Hmm, I don't know enough to give you a confident answer yet. The knowledge sources provided do not contain information on how to use the @use-gpu/webgpu package or how to configure the .wgsl loader in a Wasp project. However, you might find it helpful to check the Wasp documentation or ask for help in the Wasp community. Here are some useful links: - Wasp Documentation (https://wasp-lang.dev/docs) - Wasp Discord Community (https://discord.com/channels/686873244791210014) Remember to provide as much context as possible when asking for help, including the exact error message you're seeing and the steps you've taken to try to resolve the issue. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @jellyzone, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

miho•8mo ago

Sounds like it could be a cool project! Wasp uses Vite to build it's client. So, if there is away to get the @use-gpu/wgsl-loader working with Vite, it can work with Wasp. Wasp exposes a vite.config.ts file you can use to configure anything Vite related. Rollup plugin

import rollupWGSL from "@use-gpu/wgsl-loader/rollup";

import rollupWGSL from "@use-gpu/wgsl-loader/rollup";

Since Vite is based on Rollup, you can try using the Rollup plugin just like a Vite plugin: https://vitejs.dev/guide/api-plugin#plugins-config Using the ?raw Vite options I've seen that you can maybe add the ?raw suffix to your import and that might make it work with Vite out of the box! No need for the loader:

import fragment from './fragment.glsl?raw'

import fragment from './fragment.glsl?raw'

Vite

Next Generation Frontend Tooling

GitHub

GitHub - aweikalee/vite-plugin-string: Converts text files to modul...

Converts text files to modules. Such as .vs, .fs, .vert, .frag, .glsl, .wgsl etc. - aweikalee/vite-plugin-string

jellyzoneOP•8mo ago

sorry, I'm a c++ programmer, just do not familiar with all these library! I change the content of vite.config.ts to: import { defineConfig } from 'vite' import rollupWGSL from '@use-gpu/wgsl-loader/rollup'; export default defineConfig({ server: { open: true, }, plugins: [ rollupWGSL() ] }) when execute wasp start, the log says:

[ Server ] > rollup --config --silent
[ Server ]
[ Client!] (node:18827) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
[ Client!] (Use `node --trace-warnings ...` to show where the warning was created)
[ Client!] failed to load config from /home/zhufei/git/tailwindtest/.wasp/out/web-app/vite.config.ts
[ Client!] error when starting dev server:
[ Client!] /home/zhufei/git/tailwindtest/node_modules/@use-gpu/wgsl-loader/mjs/rollup.js:1
[ Client!] import { createFilter } from 'rollup-pluginutils';
[ Client!] ^^^^^^
[ Client!]
[ Client!] SyntaxError: Cannot use import statement outside a module
[ Client!]     at internalCompileFunction (node:internal/vm:128:18)
[ Client!]     at wrapSafe (node:internal/modules/cjs/loader:1280:20)
[ Client!]     at Module._compile (node:internal/modules/cjs/loader:1332:27)
[ Client!]     at Module._extensions..js (node:internal/modules/cjs/loader:1427:10)
[ Client!]     at Module.load (node:internal/modules/cjs/loader:1206:32)
[ Client!]     at Module._load (node:internal/modules/cjs/loader:1022:12)
[ Client!]     at cjsLoader (node:internal/modules/esm/translators:366:17)
[ Client!]     at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:315:7)
[ Client!]     at ModuleJob.run (node:internal/modules/esm/module_job:222:25)
[ Client!]     at async ModuleLoader.import (node:internal/modules/esm/loader:323:24)

[ Server ] > rollup --config --silent
[ Server ]
[ Client!] (node:18827) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
[ Client!] (Use `node --trace-warnings ...` to show where the warning was created)
[ Client!] failed to load config from /home/zhufei/git/tailwindtest/.wasp/out/web-app/vite.config.ts
[ Client!] error when starting dev server:
[ Client!] /home/zhufei/git/tailwindtest/node_modules/@use-gpu/wgsl-loader/mjs/rollup.js:1
[ Client!] import { createFilter } from 'rollup-pluginutils';
[ Client!] ^^^^^^
[ Client!]
[ Client!] SyntaxError: Cannot use import statement outside a module
[ Client!]     at internalCompileFunction (node:internal/vm:128:18)
[ Client!]     at wrapSafe (node:internal/modules/cjs/loader:1280:20)
[ Client!]     at Module._compile (node:internal/modules/cjs/loader:1332:27)
[ Client!]     at Module._extensions..js (node:internal/modules/cjs/loader:1427:10)
[ Client!]     at Module.load (node:internal/modules/cjs/loader:1206:32)
[ Client!]     at Module._load (node:internal/modules/cjs/loader:1022:12)
[ Client!]     at cjsLoader (node:internal/modules/esm/translators:366:17)
[ Client!]     at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:315:7)
[ Client!]     at ModuleJob.run (node:internal/modules/esm/module_job:222:25)
[ Client!]     at async ModuleLoader.import (node:internal/modules/esm/loader:323:24)

Why!

miho•8mo ago

Did you modify the package.json by hand?

jellyzoneOP•8mo ago

No, I haven't modify the package.json by hand, I just install the use-gpu by npm install. the content of package.json is like: { "name": "tailwindtest", "dependencies": { "@nextui-org/react": "^2.3.6", "@use-gpu/inspect": "^0.11.0", "@use-gpu/inspect-gpu": "^0.11.0", "@use-gpu/layout": "^0.11.0", "@use-gpu/live": "^0.11.0", "@use-gpu/parse": "^0.11.0", "@use-gpu/plot": "^0.11.0", "@use-gpu/react": "^0.11.0", "@use-gpu/scene": "^0.11.0", "@use-gpu/traits": "^0.11.0", "@use-gpu/webgpu": "^0.11.0", "@use-gpu/wgsl-loader": "^0.11.0", "@use-gpu/workbench": "^0.11.0", "@webgpu/types": "^0.1.40", "clsx": "^2.1.1", "react": "^18.2.0", "tailwind-merge": "^2.3.0", "wasp": "file:.wasp/out/sdk/wasp" }, "devDependencies": { "@types/react": "^18.0.37", "prisma": "4.16.2", "typescript": "^5.1.0", "vite": "^4.3.9" } }

miho•8mo ago

This seems to be a bug in the Use GPU Rollup plugin and we can't really offer support for that 😦 Maybe try asking the question with the info you got here in the Use.GPU Discord? https://discord.gg/WxtZ28aUC3

jellyzoneOP•8mo ago

Ok, thank you , I'll post a question and see how things goes!

MEE6•8mo ago

Wohooo @jellyzone, you just became a Waspeteer level 1!

Gaming

Programming

I want to show a react gpu component using Use.GPU