:orphan:

wgpu-py examples
================

(this is in progress)


.. raw:: html

    <div class="sphx-glr-thumbnails">

.. thumbnail-parent-div-open

.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="A simple example to demonstrate events (no rendering).">

.. only:: html

  .. image:: /gallery/images/thumb/sphx_glr_gui_events_thumb.png
    :alt:

  :ref:`sphx_glr_gallery_gui_events.py`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">GUI Events</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip=" Run the triangle example in an automatically selected GUI backend.">

.. only:: html

  .. image:: /gallery/images/thumb/sphx_glr_gui_auto_thumb.png
    :alt:

  :ref:`sphx_glr_gallery_gui_auto.py`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">GUI Auto</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Render a wgpu example offscreen, safe to 16bit PNG, and show the result.">

.. only:: html

  .. image:: /gallery/images/thumb/sphx_glr_offscreen_hdr_thumb.png
    :alt:

  :ref:`sphx_glr_gallery_offscreen_hdr.py`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Render offscreen using a 16bit (HDR) render target</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Simple example to show how the wgpu-native extras can be used to use dxc compiler for DX12. Since this will only work on Windows it&#x27;s not meant for the test suite. You can run the download script using python tools/download_dxc.py to download the latest Dxc release from GitHub. And extract it to the resource directory.">

.. only:: html

  .. image:: /gallery/images/thumb/sphx_glr_extras_dxc_thumb.png
    :alt:

  :ref:`sphx_glr_gallery_extras_dxc.py`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Extras DXC</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Direct integration of glfw and wgpu-py without using the RenderCanvas library.">

.. only:: html

  .. image:: /gallery/images/thumb/sphx_glr_gui_direct_thumb.png
    :alt:

  :ref:`sphx_glr_gallery_gui_direct.py`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">GUI Direct</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="simple example of using the int64 shader feature">

.. only:: html

  .. image:: /gallery/images/thumb/sphx_glr_compute_int64_thumb.png
    :alt:

  :ref:`sphx_glr_gallery_compute_int64.py`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Compute INT64</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="An example demonstrating a wgpu app with basic imgui usage and events.">

.. only:: html

  .. image:: /gallery/images/thumb/sphx_glr_imgui_basic_example_thumb.png
    :alt:

  :ref:`sphx_glr_gallery_imgui_basic_example.py`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">ImGui Basic Example</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip=" Example showing how to use multiple imgui contexts to draw to multiple canvases">

.. only:: html

  .. image:: /gallery/images/thumb/sphx_glr_imgui_multi_canvas_thumb.png
    :alt:

  :ref:`sphx_glr_gallery_imgui_multi_canvas.py`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">ImGui Multi-Canvas</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="An example demonstrating a Qt app with a wgpu viz inside. If needed, change the PySide6 import to e.g. PyQt6, PyQt5, or PySide2.">

.. only:: html

  .. image:: /gallery/images/thumb/sphx_glr_gui_qt_embed_thumb.png
    :alt:

  :ref:`sphx_glr_gallery_gui_qt_embed.py`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">GUI Qt embed</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Simple compute example that performs basic matrix multiplication.">

.. only:: html

  .. image:: /gallery/images/thumb/sphx_glr_compute_matmul_thumb.png
    :alt:

  :ref:`sphx_glr_gallery_compute_matmul.py`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Compute MatMul</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip=" Imgui example that shows how to create a colormap picker menu">

.. only:: html

  .. image:: /gallery/images/thumb/sphx_glr_imgui_cmap_picker_thumb.png
    :alt:

  :ref:`sphx_glr_gallery_imgui_cmap_picker.py`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">ImGui cmap picker</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example compute shader that does ... nothing but copy a value from one buffer into another.">

.. only:: html

  .. image:: /gallery/images/thumb/sphx_glr_compute_noop_thumb.png
    :alt:

  :ref:`sphx_glr_gallery_compute_noop.py`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Compute Noop</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip=" The triangle example, using GLSL shaders.">

.. only:: html

  .. image:: /gallery/images/thumb/sphx_glr_triangle_glsl_thumb.png
    :alt:

  :ref:`sphx_glr_gallery_triangle_glsl.py`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Triangle GLSL</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="The triangle is a classic example representing the simplest possible visualisation because it does not need buffers or textures. The same example in other languages / API&#x27;s:">

.. only:: html

  .. image:: /gallery/images/thumb/sphx_glr_triangle_thumb.png
    :alt:

  :ref:`sphx_glr_gallery_triangle.py`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Triangle</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="A simple example to profile a compute pass using ComputePassTimestampWrites.">

.. only:: html

  .. image:: /gallery/images/thumb/sphx_glr_compute_timestamps_thumb.png
    :alt:

  :ref:`sphx_glr_gallery_compute_timestamps.py`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Compute Timestamps</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Basic example of how to use wgpu-native instance extras to enable debug symbols and labels in the shader compiler. As debugger we will use RenderDoc (https://renderdoc.org/) - other tools will require a similar setup. While RenderDoc doesn&#x27;t fully support WebGPU - it can still be useful for inspecting the render pipeline. RenderDoc also doesn&#x27;t support WGSL, so it will work off the naga translated shaders for debug stepping and editing. Using DX12 (HLSL) or OpenGL (GLSL) gives a better decompilation experience compared to Vulkan (SPIR-V). The Vulkan research structure most closely matches WebGPU.">

.. only:: html

  .. image:: /gallery/images/thumb/sphx_glr_extras_debug_thumb.png
    :alt:

  :ref:`sphx_glr_gallery_extras_debug.py`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Extras Debug</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example that shows how to use textures in a compute shader to convert an RGBA image to YCbCr.">

.. only:: html

  .. image:: /gallery/images/thumb/sphx_glr_compute_textures_thumb.png
    :alt:

  :ref:`sphx_glr_gallery_compute_textures.py`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Compute Textures</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="An example demonstrating a wgpu app with imgui renderer">

.. only:: html

  .. image:: /gallery/images/thumb/sphx_glr_imgui_renderer_sea_thumb.png
    :alt:

  :ref:`sphx_glr_gallery_imgui_renderer_sea.py`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">ImGui Renderer Sea</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="An example demonstrating a wgpu app with imgui backend.">

.. only:: html

  .. image:: /gallery/images/thumb/sphx_glr_imgui_backend_sea_thumb.png
    :alt:

  :ref:`sphx_glr_gallery_imgui_backend_sea.py`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">ImGui Backend Sea</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example is a bit more interesting (and larger) than the triangle, because it adds buffers and textures.">

.. only:: html

  .. image:: /gallery/images/thumb/sphx_glr_cube_thumb.png
    :alt:

  :ref:`sphx_glr_gallery_cube.py`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Cube</div>
    </div>


.. thumbnail-parent-div-close

.. raw:: html

    </div>


.. toctree::
   :hidden:

   /gallery/gui_events
   /gallery/gui_auto
   /gallery/offscreen_hdr
   /gallery/extras_dxc
   /gallery/gui_direct
   /gallery/compute_int64
   /gallery/imgui_basic_example
   /gallery/imgui_multi_canvas
   /gallery/gui_qt_embed
   /gallery/compute_matmul
   /gallery/imgui_cmap_picker
   /gallery/compute_noop
   /gallery/triangle_glsl
   /gallery/triangle
   /gallery/compute_timestamps
   /gallery/extras_debug
   /gallery/compute_textures
   /gallery/imgui_renderer_sea
   /gallery/imgui_backend_sea
   /gallery/cube


.. only:: html

  .. container:: sphx-glr-footer sphx-glr-footer-gallery

    .. container:: sphx-glr-download sphx-glr-download-python

      :download:`Download all examples in Python source code: gallery_python.zip </gallery/gallery_python.zip>`

    .. container:: sphx-glr-download sphx-glr-download-jupyter

      :download:`Download all examples in Jupyter notebooks: gallery_jupyter.zip </gallery/gallery_jupyter.zip>`


.. only:: html

 .. rst-class:: sphx-glr-signature

    `Gallery generated by Sphinx-Gallery <https://sphinx-gallery.github.io>`_