jellyzone Posts - Answer Overflow

jellyzone

•Created by jellyzone on 5/13/2024 in #🙋questions

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!

11 replies

Gaming

Programming