Add multiple render targets example (v2) (#5313)

Co-authored-by: Connor Fitzgerald <[email protected]>

CHANGELOG.md

@@ -197,6 +197,11 @@ By @ErichDonGubler in [#6456](https://github.com/gfx-rs/wgpu/pull/6456), [#6148]
 
 - Fix crash when a texture argument is missing. By @aedm in [#6486](https://github.com/gfx-rs/wgpu/pull/6486)
 - Emit an error in constant evaluation, rather than crash, in certain cases where `vecN` constructors have less than N arguments. By @ErichDonGubler in [#6508](https://github.com/gfx-rs/wgpu/pull/6508).
+
+### Examples
+
+- Add multiple render targets example. By @kaphula in [#5297](https://github.com/gfx-rs/wgpu/pull/5313)
+
 
 ### Testing
 

examples/README.md

@@ -24,6 +24,7 @@ The rest of the examples are for demonstrating specific features that you can co
 - `bunnymark` - Demonstrates many things, but chief among them is performing numerous draw calls with different bind groups in one render pass. The example also uses textures for the icon and uniform buffers to transfer both global and per-particle states.
 - `skybox` - Shows off too many concepts to list here. The name comes from game development where a "skybox" acts as a background for rendering, usually to add a sky texture for immersion, although they can also be used for backdrops to give the idea of a world beyond the game scene. This example does so much more than this, though, as it uses a car model loaded from a file and uses the user's mouse to rotate the car model in 3d. `skybox` also makes use of depth textures and similar app patterns to `uniform_values`.
 - `shadow` - Likely by far the most complex example (certainly the largest in lines of code) of the official WGPU examples. `shadow` demonstrates basic scene rendering with the main attraction being lighting and shadows (as the name implies). It is recommended that any user looking into lighting be very familiar with the basic concepts of not only rendering with WGPU but also the primary mathematical ideas of computer graphics.
+- `multiple-render-targets` - Demonstrates how to render to two texture targets simultaneously from fragment shader.
 - `render_to_texture` - Renders to an image texture offscreen, demonstrating both off-screen rendering as well as how to add a sort of resolution-agnostic screenshot feature to an engine. This example either outputs an image file of your naming (pass command line arguments after specifying a `--` like `cargo run --bin wgpu-examples -- render_to_texture "test.png"`) or adds an `img` element containing the image to the page in WASM.
 - `ray_cube_fragment` - Demonstrates using ray queries with a fragment shader.
 - `ray_scene` - Demonstrates using ray queries and model loading

examples/src/lib.rs

@@ -15,6 +15,7 @@ pub mod hello_windows;
 pub mod hello_workgroups;
 pub mod mipmap;
 pub mod msaa_line;
+pub mod multiple_render_targets;
 pub mod ray_cube_compute;
 pub mod ray_cube_fragment;
 pub mod ray_scene;

examples/src/main.rs

@@ -80,6 +80,12 @@ const EXAMPLES: &[ExampleDesc] = &[
         webgl: true,
         webgpu: true,
     },
+    ExampleDesc {
+        name: "multiple_render_targets",
+        function: wgpu_examples::multiple_render_targets::main,
+        webgl: false,
+        webgpu: true,
+    },
     ExampleDesc {
         name: "render_to_texture",
         function: wgpu_examples::render_to_texture::main,

examples/src/multiple_render_targets/README.md

@@ -0,0 +1,21 @@
+# multiple_render_targets
+
+This example demonstrates how to use fragment shader to output to two color attachments of a renderpass simultaneously. 
+
+The program generates a black and white ball-shaped texture from scratch and uses the fragment shader to draw it to two
+separate texture targets. The first texture target receives a red version of the texture and the second target receives
+a green version. 
+
+Once the colored shapes have been drawn to two separate textures, they
+will be displayed on the screen by rendering each one of them to their own viewports that split the screen in half.
+
+
+## To Run
+
+```
+cargo run --bin wgpu-examples multiple_render_targets
+```
+
+## Screenshots
+
+![Multi render target](./screenshot.png)