Added example for toImageSync + setImageSampler (#12686)

_Description of what this PR is changing or adding, and why:_

Adds more clarity about how to chain together fragment shaders.

_Issues fixed by this PR (if any):_

fixes flutter/flutter#177133

_PRs or commits this PR depends on (if any):_

## Presubmit checklist

- [x] If you are unwilling, or unable, to sign the CLA, even for a
_tiny_, one-word PR, please file an issue instead of a PR.
- [x] If this PR is not meant to land until a future stable release,
mark it as draft with an explanation.
- [x] This PR follows the [Google Developer Documentation Style
Guidelines](https://developers.google.com/style)—for example, it doesn't
use _i.e._ or _e.g._, and it avoids _I_ and _we_ (first-person
pronouns).
- [x] This PR uses [semantic line
breaks](https://github.com/dart-lang/site-shared/blob/main/doc/writing-for-dart-and-flutter-websites.md#semantic-line-breaks)
  of 80 characters or fewer.

Author: gaaclarke

src/content/ui/design/graphics/fragment-shaders.md

@@ -327,6 +327,8 @@ or from part of the application using
 [`Picture.toImageSync`]: {{site.api}}/flutter/dart-ui/Picture/toImageSync.html
 [`Scene.toImageSync`]: {{site.api}}/flutter/dart-ui/Scene/toImageSync.html
 
+##### Sampler usage in GLSL example
+
 ```glsl
 #include <flutter/runtime_effect.glsl>
 
@@ -349,7 +351,45 @@ supported and needs to be emulated in the shader.
 
 [`TileMode.clamp`]: {{site.api}}/flutter/dart-ui/TileMode.html
 
-### Performance considerations
+##### `toImageSync` example
+
+```dart
+class SDFPainter {
+  SDFPainter(this.sdfShader, this.renderShader);
+
+  FragmentShader sdfShader;
+  FragmentShader renderShader;
+  Image? _sdf;
+  bool isDirty = false;
+  double radius = 0.5;
+
+  void paint(Canvas canvas, Size size) {
+    if (_sdf == null || isDirty) {
+      final recorder = PictureRecorder();
+      final subCanvas = Canvas(recorder);
+      final paint = Paint()..shader = sdfShader;
+      sdfShader.setFloat(0, size.width);
+      sdfShader.setFloat(1, size.height);
+      sdfShader.setFloat(2, radius);
+      subCanvas.drawRect(Rect.fromLTWH(0, 0, size.width, size.height), paint);
+      final picture = recorder.endRecording();
+      _sdf = picture.toImageSync(size.width.toInt(), size.height.toInt());
+      isDirty = false;
+    }
+
+    renderShader.setFloat(0, size.width);
+    renderShader.setFloat(1, size.height);
+    renderShader.setImageSampler(0, _sdf!);
+
+    canvas.drawRect(
+      Rect.fromLTWH(0, 0, size.width, size.height),
+      Paint()..shader = renderShader,
+    );
+  }
+}
+```
+
+## Performance considerations
 
 When targeting the Skia backend,
 loading the shader might be expensive since it
@@ -368,7 +408,7 @@ check out [Writing efficient shaders][] on GitHub.
 
 [Writing efficient shaders]: {{site.repo.flutter}}/blob/main/docs/engine/impeller/docs/shader_optimization.md
 
-### Other resources
+## Other resources
 
 For more information, here are a few resources.