example with ".shaderFragment" pass

README.md

@@ -63,6 +63,38 @@ If everything is set up correctly, you should see this picture (which is the def
 
 <img alt="Default fragment shader" src="./README.shader-default.png" width="250" height="250" />
 
+### Passing custom shader
+
+To pass your custom shader, define it as a string of WGSL code.
+
+```ts
+const shaderFragment = /* wgsl */`
+struct FragmentOutput {
+  @location(0) color: vec4<f32>,
+}
+
+@fragment
+fn fragment_main() -> FragmentOutput {
+  var output: FragmentOutput;
+  output.color = vec4<f32>(0.1, 0.2, 0.25, 1.0);
+  return output;
+}
+`;
+```
+
+And then pass it to `WGSLCanvas` instance via `shaderFragment` property:
+
+```ts
+wgslCanvas.shaderFragment = shaderFragment;
+```
+
+> [!TIP]
+> If you want to store your WGSL code under `.wgsl` files, you should configure your bundler to be able to resolve them as strings. The easiest way is to start with Vite, which can do this out of the box - check out: [Importing Asset as String](https://vite.dev/guide/assets#importing-asset-as-string).
+
+See full example here:
+- [apps/examples/src/examples/Example01Color.ts](./apps/examples/src/examples/Example01Color.ts)
+- [apps/examples/src/examples/Example01Color.wgsl](./apps/examples/src/examples/Example01Color.wgsl)
+
 ### Passing uniforms
 
 To pass uniforms to your shader, you should first define them in `uniformsKeys` array in your `WGSLCanvas` instance:

apps/examples/src/examples/Example01Color.ts

@@ -0,0 +1,9 @@
+import { WGSLCanvas } from "@wgsl-canvas/core";
+import shaderFragment from "./Example01Color.wgsl?raw";
+
+export const Example01Color = async (canvas: HTMLCanvasElement) => {
+  const wgslCanvas = new WGSLCanvas({ canvas });
+  await wgslCanvas.init();
+  wgslCanvas.shaderFragment = shaderFragment;
+  wgslCanvas.render();
+};

apps/examples/src/examples/Example01Color.wgsl

@@ -0,0 +1,10 @@
+struct FragmentOutput {
+  @location(0) color: vec4<f32>,
+}
+
+@fragment
+fn fragment_main() -> FragmentOutput {
+  var output: FragmentOutput;
+  output.color = vec4<f32>(0.1, 0.2, 0.25, 1.0);
+  return output;
+}

apps/examples/src/main.ts

@@ -1,5 +1,6 @@
 import { WGSLCanvas } from "@wgsl-canvas/core";
 import { Example00Default } from "./examples/Example00Default";
+import { Example01Color } from "./examples/Example01Color";
 import { Example01Uniforms } from "./examples/Example01Uniforms";
 import { Example02Texture } from "./examples/Example02Texture";
 
@@ -12,13 +13,18 @@ const main = async () => {
   const container = document.getElementById("examples");
   if (!container) return;
 
-  const examples = [Example00Default, Example01Uniforms, Example02Texture];
+  const examples = [
+    Example00Default,
+    Example01Color,
+    Example01Uniforms, // TODO: rename to "Example02Uniforms"
+    Example02Texture, // TODO: rename to "Example03Texture"
+  ];
   for (const example of examples) {
     const canvas = document.createElement("canvas");
     canvas.width = 250;
     canvas.height = 250;
     container.appendChild(canvas);
-    await example(canvas);
+    await example(canvas); 
   }
 };