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 :
The use-gpu package I've installed is:
when wasp start , error shows:
I have install the wgsl-loader, but I don't know how to use it!
Please give me some advice, Thank you very much!
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!
