:orphan:

Examples that use Pygfx
=======================



.. raw:: html

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

.. thumbnail-parent-div-open

.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip=" A little script to serve pygfx examples on localhost so you can try them in the browser. This is an iteration of the same script in rendercanvas and wgpu-py although some changes:">

.. only:: html

  .. image:: /_gallery/images/thumb/sphx_glr_server_browser_examples_thumb.png
    :alt:

  :doc:`/_gallery/server_browser_examples`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Serve browser examples locally.</div>
    </div>


.. thumbnail-parent-div-close

.. raw:: html

    </div>


.. toctree::
   :hidden:

   /_gallery/server_browser_examples

Introductory Examples
---------------------



.. raw:: html

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

.. thumbnail-parent-div-open

.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Demonstrates show utility">

.. only:: html

  .. image:: /_gallery/introductory/images/thumb/sphx_glr_show_util_thumb.webp
    :alt:

  :doc:`/_gallery/introductory/show_util`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Use gfx.show</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="In this example shows how to do the rendering world&#x27;s hello world: Show a 3D Cube on screen.">

.. only:: html

  .. image:: /_gallery/introductory/images/thumb/sphx_glr_cube_thumb.webp
    :alt:

  :doc:`/_gallery/introductory/cube`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Replicating the WGPU triangle example, but with about 10x less code.">

.. only:: html

  .. image:: /_gallery/introductory/images/thumb/sphx_glr_hello_triangle_thumb.webp
    :alt:

  :doc:`/_gallery/introductory/hello_triangle`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip=" Render Points">

.. only:: html

  .. image:: /_gallery/introductory/images/thumb/sphx_glr_points_basic_thumb.webp
    :alt:

  :doc:`/_gallery/introductory/points_basic`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Demonstrates visualizing object bounding boxes">

.. only:: html

  .. image:: /_gallery/introductory/images/thumb/sphx_glr_object_bounding_box_thumb.webp
    :alt:

  :doc:`/_gallery/introductory/object_bounding_box`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip=" Simple light example. This example shows a cube with MeshPhongMaterial illuminated by a point light and a directional light.">

.. only:: html

  .. image:: /_gallery/introductory/images/thumb/sphx_glr_light_basic_thumb.webp
    :alt:

  :doc:`/_gallery/introductory/light_basic`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example showing text in world and screen space. Also notice how the text is shown on top of the plane (due to its depth offset).">

.. only:: html

  .. image:: /_gallery/introductory/images/thumb/sphx_glr_hello_text_thumb.webp
    :alt:

  :doc:`/_gallery/introductory/hello_text`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example demonstrating clipping planes on a mesh.">

.. only:: html

  .. image:: /_gallery/introductory/images/thumb/sphx_glr_clipping_planes_thumb.webp
    :alt:

  :doc:`/_gallery/introductory/clipping_planes`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example showing orbit camera controller.">

.. only:: html

  .. image:: /_gallery/introductory/images/thumb/sphx_glr_orbit_camera_thumb.webp
    :alt:

  :doc:`/_gallery/introductory/orbit_camera`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example demonstrating off-screen rendering.">

.. only:: html

  .. image:: /_gallery/introductory/images/thumb/sphx_glr_offscreen_thumb.webp
    :alt:

  :doc:`/_gallery/introductory/offscreen`

.. raw:: html

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


.. thumbnail-parent-div-close

.. raw:: html

    </div>

Feature Demos
-------------



.. raw:: html

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

.. thumbnail-parent-div-open

.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Demonstrates show utility with an STL file">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_show_stl_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/show_stl`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Show STL File via gfx.show</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example showing two Möbius strips. The one at the bottom actually has its ends attached, making it a &quot;non-orientable&quot; manifold. It is rendered with flat shading to avoid artifacts due to the normals flipping where the ends meet.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_geometry_mobius_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/geometry_mobius`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Möbius strip Geometry</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example showing subdivided polyhedrons.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_geometry_polyhedron_subdivisions_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/geometry_polyhedron_subdivisions`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Demonstrates show utility for a scene">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_show_scene_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/show_scene`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Use gfx.show to show a Scene</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Show an image.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_geometry_image_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/geometry_image`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Use camera.show_object to ensure the Image is in view.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_show_image_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/show_image`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Display a line depicting a noisy signal consisting of a lot of points.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_line_performance_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/line_performance`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Line Drawing Performance</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example showing multiple rotating cubes. This also tests the depth buffer.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_geometry_cubes_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/geometry_cubes`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example showing multiple rotating polyhedrons.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_geometry_polyhedron_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/geometry_polyhedron`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Render a 3D volume with isosurface rendering..">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_volume_iso_render_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/volume_iso_render`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Isosurface Volume Rendering</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Render a 3D volume with minimum intensity projection rendering.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_volume_minip_render_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/volume_minip_render`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Minip Volume Rendering</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example showing a Torus knot, with a texture and lighting.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_geometry_torus_knot_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/geometry_torus_knot`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example showing a Torus knot, dynamically changing what faces are shown.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_mesh_dynamic_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/mesh_dynamic`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example showing a Torus knot, using flat shading.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_flat_shaded_torus_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/flat_shaded_torus`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Display line segments. Can be useful e.g. for visializing vector fields.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_line_segments_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/line_segments`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example showing picking points. When clicking on a point, it&#x27;s location is changed. With a small change, a line is shown instead.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_picking_points_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/picking_points`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example showing transform control flow without matrix auto updating.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_manual_matrix_update_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/manual_matrix_update`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Transform Control without Matrix Updating</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Render slices through a volume, by uploading to a 2D texture. Simple and ... slow.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_volume_slice1_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/volume_slice1`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Volume Slice 1</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example simulates a grassy plane, using a technique that early 3D games used a lot. We create an image with green stripes. Than place a couple thousand of these in a plane, using a Points object.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_point_sprites_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/point_sprites`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Simulating grass with point sprites</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example to demonstrate the Gizmo that can be used to transform world objects. Click the center sphere to toggle between object-space, world-space, and screen-space.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_helpers_gizmo_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/helpers_gizmo`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Gizmo to transform world objects</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Use a plane geometry to show a texture, which is continuously updated to show video.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_geometry_plane_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/geometry_plane`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example demonstrates the affect of the MeshToonMaterial">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_mesh_toon_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/mesh_toon`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Toon Rendering 1</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Render two volumes using different world transforms. Prints the world bounding box of the scene which used to trigger an Exception.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_world_bounding_box_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/world_bounding_box`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Bounding Box Coordinates</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example showing a Torus knot, with a wireframe overlay.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_wireframe1_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/wireframe1`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example showing a Klein Bottle. Surface normals are shown on both sides of the mesh, in different colors. It can be seen how the object turns itself &quot;inside out&quot;.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_geometry_klein_bottle_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/geometry_klein_bottle`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Klein Bottle Geometry</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Display very thick lines to show how lines stay pretty on large scales.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_line_thick_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/line_thick`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example post-processing effects, showing builtin effects.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_posteffect1_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/posteffect1`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Post processing effects 1</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Render slices through a volume, by creating a 3D texture, and sampling onto a plane geometry. Simple, fast and subpixel!">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_volume_slice2_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/volume_slice2`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Volume Slice 2</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Demonstrates how to display performance statistics such as FPS and draw time on screen, by manually integrating it into the render loop.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_helpers_stats_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/helpers_stats`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Stats helper (Manual)</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example to do measurements in a 2D image. Use LMB and RMB to place the end-points.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_measure_distances_2d_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/measure_distances_2d`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Measure distances in 2D</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example showing a Torus knot, as a wireframe. We create two wireframes, one for the front, bright blue and lit, and one for the back, unlit and gray.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_wireframe2_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/wireframe2`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example with a skybox background in a rotating scene.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_skybox_rotate_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/skybox_rotate`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Use a Skybox</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Render three volumes using different world transforms.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_volume_render2_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/volume_render2`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Volume Rendering 2</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example demonstrating text on dark and light background.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_text_contrast_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/text_contrast`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Render slices through a volume, by creating a 3D texture, and viewing it with a VolumeSliceMaterial. Easy because we can just define the view plane.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_volume_slice3_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/volume_slice3`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Volume Slice 3</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Show an image with points overlaid.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_image_plus_points_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/image_plus_points`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Image with Points Overlaid</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Pygfx by default assumes that all colors are in the sRGB colorspace. This example shows how you can also provide colors in physical colorspace (a.k.a. linear-srgb). This example shows 3 images:  A normal image in sRGB.  An image in physical colorspace, shows up too dark. * An image in physical colorspace, rendered correctly.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_physical_color_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/physical_color`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example rendering the same mesh object multiple times, using instancing.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_instancing_mesh_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/instancing_mesh`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example demonstrating synced video rendering">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_synced_video_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/synced_video`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Synced Video Rendering</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Fly through a cloud of cololoured points. This example demonstrates the fly controller, as well as the GaussianBlob point material, with size_space set to &#x27;world&#x27;.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_fly_controller_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/fly_controller`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example demonstrating the capabilities of text to be rendered in multiple different fonts.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_multiple_fonts_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/multiple_fonts`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example showing picking the color from the scene. Depending on the object being clicked, more detailed picking info is available.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_picking_color_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/picking_color`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example demonstrates directional light shadows and their helper. The cubes within the view frustum of the shadow camera have complete shadows, the cubes at the edge of the view frustum of the camera have partial shadows, while the cubes outside the view frustum of the camera will not cast shadows.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_light_directional_shadow_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/light_directional_shadow`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Directional Shadow 1</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example demonstrating colormaps in 4 modes: grayscale, gray+alpha, RGB, RGBA.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_colormap_channels_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/colormap_channels`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example showing off the mesh slice material.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_mesh_slice_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/mesh_slice`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Mesh Slice Material</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Show an image with another image overlaid with alpha blending.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_image_overlay_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/image_overlay`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Image with another image overlaid</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Render a volume. Shift-click to draw white blobs inside the volume.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_volume_render1_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/volume_render1`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Volume Rendering 1</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example demonstrate how to use MultiText to show a grid of text blocks.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_text_multiple_grid_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/text_multiple_grid`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Text multiple grid</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example demonstrate how to use text labels, where text blocks are positioned in world-space, but displayed in screen-space.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_text_multiple_labels_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/text_multiple_labels`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Text multiple labels</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Displaying an image can be done in two different ways based the details of the information you are trying to communicate. We consider a color image with shape (height, width, 3). In PyGFX, this is descried as a texture.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_image_scaling_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/image_scaling`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Displaying an image in a scene</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example demonstrates iridescence on the abalone shell.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_iridescence_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/iridescence`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example shows an application that allows the user to paint an image onto a texture.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_paint_to_texture_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/paint_to_texture`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Paint to a texture</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example shows an application that allows the user to paint an image onto a texture.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_paint_to_texture_directly_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/paint_to_texture_directly`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Paint to a texture directly</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example showing a 3D scene, with an object overload via Material.depth_test, and a 2D scene overlay over it all using an overlay render pass.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_scene_overlay_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/scene_overlay`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example shows how the look_at function can be used.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_look_at_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/look_at`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="In this example we use a little trick by splitting the text in one block for each word, and use direction=&quot;ltr-ltr&quot;, which means both text and blocks are layed out from left to right.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_text_snake_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/text_snake`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example showing different types of geometric spheres.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_spheres_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/spheres`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example showing orbit camera controller.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_panzoom_camera_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/panzoom_camera`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example showing how to render to a subregion of a canvas.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_scene_subplots1_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/scene_subplots1`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example demonstrates the sheen effect in a glTF model.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_sheen_chair_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/sheen_chair`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example with a skybox background.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_skybox_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/skybox`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Use a Skybox</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example demonstrates how to accurately reconstruct surface normals using the depth buffer.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_posteffect_normals_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/posteffect_normals`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Screen space normal reconstruction</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example demonstrates the sheen effect in a glTF model.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_sheen_glam_velvet_sofa_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/sheen_glam_velvet_sofa`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Glam Velvet Sofa</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example of a scene rendered to a texture, which is shown in another scene.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_scene_in_a_scene_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/scene_in_a_scene`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example to do measurements in a 3D scene. Click on the surface of the two objects to see the distance betweeen these points.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_measure_distances_3d_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/measure_distances_3d`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Measure distances in 3D</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example demonstrates the anisotropy effect in a glTF model. The visually distinct feature is the elongated appearance of the specular reflection.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_anisotropy_barn_lamp_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/anisotropy_barn_lamp`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Anisotropy Barn Lamp</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example post-processing effects, showing a custom effect.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_posteffect2_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/posteffect2`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Post processing effects 2</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example shows a complete PBR rendering effect. The cubemap of skybox is also the environment cubemap of the helmet.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_pbr_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/pbr`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">PBR Rendering 1</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example demonstating the partial linking of two cameras in 3D. The left and right view use an orbit- and fly-controller, respectively. Yet, manipulating one also updates the othe camera.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_scene_camlink2_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/scene_camlink2`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Camera linking 2</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example shows how the look_at function can be used with instanced mesh.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_look_at_instanced_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/look_at_instanced`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Look At (Instanced Mesh)</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip=" Slice a volume and a mesh through the three primary planes (XY, XZ, YZ). This example uses Volume object with a VolumeSliceMaterial, which produces an implicit geometry defined by the volume data. See multi_slice1.py for a more generic approach.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_multi_slice2_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/multi_slice2`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Mesh and Volume Slicing 2</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Show stitching of images using weighted alpha mode. The alpha value of the images are used as weights.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_image_stitching_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/image_stitching`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example demonstrates the clearcoat effect.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_clearcoat2_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/clearcoat2`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="The &#x27;ordered2&#x27; was a previously supported blend mode (when blending as defined on the renderer). This example mimics it&#x27;s behaviour.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_blending_ordered2_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/blending_ordered2`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example demonstrates the lightmap effects for MeshBasicMaterial, MeshPhongMaterial, and MeshStandardMaterial.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_lightmap_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/lightmap`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example showing different types of geometric cylinders.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_cylinder_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/cylinder`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Types of Cylinders</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example showing picking a mesh. Showing two meshes that can be clicked on. Upon clicking, the vertex closest to the pick location is moved.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_picking_mesh_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/picking_mesh`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example demonstating the partial linking of two cameras. When panning/zooming in one view, the other view reponds for the x-dimention, but not for the y dimension.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_scene_camlink1_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/scene_camlink1`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Camera linking 1</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Slice a volume and a mesh through the three primary planes (XY, XZ, YZ). This example uses a mesh object with custom texture coordinates. This is a generic approach. See multi_slice2.py for a simpler way.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_multi_slice1_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/multi_slice1`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Volume and Mesh Slicing 1</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example demonstrates how to sharing a skeleton across multiple skinned meshes with detached bind mode.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_skinning_bind_detached_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/skinning_bind_detached`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Detached Bind Mode</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip=" This example demonstrates the ambient occlusion map effects for MeshBasicMaterial, MeshPhongMaterial, and MeshStandardMaterial.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_aomap_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/aomap`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example shows three objects.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_dynamic_env_map_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/dynamic_env_map`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Dynamic Environment Map</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example demonstrates how to animate a model with morph targets.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_morph_facecap_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/morph_facecap`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Facecap animation with morph targets</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example demonstrates how to use morph targets to animate a mesh.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_morph_targets_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/morph_targets`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example shows how to use PBR rendering with instanced meshes.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_pbr_instanced_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/pbr_instanced`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">PBR Instanced Rendering</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example that implements a minimal custom object and renders it.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_custom_object1_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/custom_object1`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Minimal Custom Object</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Show an image and print the x, y image data coordinates for click events.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_image_click_events_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/image_click_events`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example showing transparency using three overlapping planes. The normal blending can produce correct results by sorting the objects in z.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_transparency1_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/transparency1`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example demonstrates the effects of directional light shadows (from DirectionalLight) and omnidirectional shadows (from PointLight).">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_light_shadow_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/light_shadow`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Directional Shadow 2</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Like scene_side_by_side, but now with a more plot-like idea, and mouse interaction.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_scene_subplots2_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/scene_subplots2`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example demonstrating different colormap dimensions on an image.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_colormap_image_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/colormap_image`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example showing transparency using three orthogonal planes. This is a bit of an adversarial case because the planes are in the same position, plus they intersect, so sorting has no effect. In cases like this, the dither blending is king.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_transparency2_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/transparency2`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example demonstrates iridescence on a set of spheres.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_iridescence2_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/iridescence2`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example demonstrates how to create a grid of images with labels that change color when hovered over.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_labelled_image_grid_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/labelled_image_grid`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Labelled Image Grid</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="An example combining synced_video.py with subplots. Double click to re-center the images.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_scene_subplots_video_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/scene_subplots_video`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Show a line plot, with axii and a grid.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_line_plot_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/line_plot`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example shows the lighting rendering affect of materials with different metalness and roughness. Every second sphere has an IBL environment map on it.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_pbr2_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/pbr2`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">PBR Rendering 2</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example demonstrates the environment mapping effects of the &quot;CUBE-REFLECTION&quot; and &quot;CUBE-REFRACTION&quot; mapping modes in &quot;MeshBasicMaterial&quot;, &quot;MeshPhongMaterial&quot;, and &quot;MeshStandardMaterial&quot; for a given object.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_env_maps_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/env_maps`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Environment Map Effects</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="An example showing a waterfall of text. On the left it shows the contents of the glyph atlas. One goal of this example is to strain the text rendering to its limits.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_text_waterfall_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/text_waterfall`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example demonstrates the use of meshes with quad faces. Quad faces are used when geometry.indices array is Nx4 instead of Nx3.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_quad_mesh_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/quad_mesh`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Mesh with quads</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example shows the toon rendering affect of materials with different colors and gradient maps.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_mesh_toon2_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/mesh_toon2`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Toon Rendering 2</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example shows the rendering of a skinned mesh with a skeleton and bones.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_skinned_mesh_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/skinned_mesh`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example demonstrates the effect of rendering a globe using MeshPhongMaterial.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_earth_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/earth`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="The &#x27;weighted_plus&#x27; was a previously supported blend mode (when blending as defined on the renderer). This example mimics it&#x27;s behaviour.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_blending_weighted_plus_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/blending_weighted_plus`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This shows how to map from the screen to the world by adding scatter points at click event locations">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_map_click_events_to_world_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/map_click_events_to_world`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Map Screen to World</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example demonstrates how to animate a skinned mesh using a glTF animation clip.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_skinning_animation_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/skinning_animation`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Drawing a line with a shape that makes it interesting for demonstrating/testing various aspects of line rendering. Use the middle-mouse button to set the position of the last point. Use &#x27;1&#x27; and &#x27;2&#x27; to toggle between normal and dashed mode.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_line_basic_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/line_basic`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="A custom material for drawing geometry by depth">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_mesh_depth_material_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/mesh_depth_material`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example demonstrates the clearcoat effect.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_clearcoat_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/clearcoat`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example demonstrating different colormap dimensions on a mesh, and per-vertex colors as a bonus.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_colormap_mesh_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/colormap_mesh`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example demonstrates unlit materials in glTF models.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_gltf_unlit_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/gltf_unlit`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">glTF Unlit Material Example</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example that implements a simple custom object and renders it.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_custom_object2_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/custom_object2`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Simple Custom Object</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example demonstrating multi object selection using mouse events.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_multi_select_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/multi_select`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Multi-Object Selection</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example shows a bloom rendering effect.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_bloom2_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/bloom2`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Bloom Effect Demo</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip=" Spotlights example.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_light_spotlights_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/light_spotlights`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example demonstrates the Physical Based Bloom effect pass, which creates natural-looking bloom without thresholding, suitable for HDR rendering pipelines.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_bloom_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/bloom`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Physical Based Bloom Effect Demo</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example that implements a custom object and renders it.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_custom_object3_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/custom_object3`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip=" Spotlights and shadows example">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_light_spotlight_shadows_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/light_spotlight_shadows`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example demonstrates how to load a glTF model with animations and play them.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_gltf_animations_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/gltf_animations`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Animations with glTF</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example showing a custom wireframe material, together with the builtin option to render a wireframe. Notice that in the former the wires are not of equal thickness.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_wireframe_material_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/wireframe_material`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example demonstrating the capabilities of text to be aligned and justified according to the user&#x27;s decision.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_text_align_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/text_align`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="We demonstrate how one can use custom signed distance functions (SDFs) to create point markers with multiple colors. In this example we recreate an approximation of the Pygfx logo using two SDFs, one for the outer yellow triangle, and other for the inner blue highlight. Combining multiple colors in a single point marker is achieved by adding two separate markers to the scene, one for each color.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_point_marker_multi_color_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/point_marker_multi_color`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Point Markers with Multiple Colors</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Render 10 paragraphs of Lorem ipsum.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_text_big_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/text_big`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Big static text</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example demonstrates loading glTF models from remote URLs (KhronosGroup glTF-Sample-Assets).">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_gltf_viewer_thumb.png
    :alt:

  :doc:`/_gallery/feature_demo/gltf_viewer`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Remote glTF Viewer</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example demonstrates how to show video data in a very efficient way, eliminating as much data-copies and color conversion operations as we can.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_video_yuv_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/video_yuv`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example demonstrates how to use the AnimationMixer to blend between different animations.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_animation_mixer_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/animation_mixer`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example demonstrates how to implement a Verlet integration cloth physics simulation using compute shaders, including a spring system, gravity, wind forces, and sphere collisions.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_compute_cloth_thumb.webp
    :alt:

  :doc:`/_gallery/feature_demo/compute_cloth`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Cloth Simulation with Compute Shaders</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example demonstrates how to create an audio visualizer.">

.. only:: html

  .. image:: /_gallery/feature_demo/images/thumb/sphx_glr_audio_visualizer_thumb.png
    :alt:

  :doc:`/_gallery/feature_demo/audio_visualizer`

.. raw:: html

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


.. thumbnail-parent-div-close

.. raw:: html

    </div>

Validation Examples
-------------------



.. raw:: html

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

.. thumbnail-parent-div-open

.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example showing the axes helper.">

.. only:: html

  .. image:: /_gallery/validation/images/thumb/sphx_glr_validate_helpers1_thumb.webp
    :alt:

  :doc:`/_gallery/validation/validate_helpers1`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Axes Helper 1</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example showing the box geometry.">

.. only:: html

  .. image:: /_gallery/validation/images/thumb/sphx_glr_validate_box_thumb.webp
    :alt:

  :doc:`/_gallery/validation/validate_box`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Shows a semi-transparent square. On the left it uses a background, on the right it does not.">

.. only:: html

  .. image:: /_gallery/validation/images/thumb/sphx_glr_validate_blend_bg_thumb.webp
    :alt:

  :doc:`/_gallery/validation/validate_blend_bg`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Validate transparency with and without bg</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example showing the axes and grid helpers with a perspective camera.">

.. only:: html

  .. image:: /_gallery/validation/images/thumb/sphx_glr_validate_helpers2_thumb.webp
    :alt:

  :doc:`/_gallery/validation/validate_helpers2`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Axis Helper 2</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example demonstrating the capabilities of text outline to stay behind the text itself, even for very thick value of the outline thickness where the outline of one character may overlap with the neighboring one.">

.. only:: html

  .. image:: /_gallery/validation/images/thumb/sphx_glr_validate_text_outline_thumb.webp
    :alt:

  :doc:`/_gallery/validation/validate_text_outline`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Text outline always behind text itself</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Show an image displayed the correct way.">

.. only:: html

  .. image:: /_gallery/validation/images/thumb/sphx_glr_validate_image2_thumb.webp
    :alt:

  :doc:`/_gallery/validation/validate_image2`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example draws overlapping circles of reference colors with additive blending.">

.. only:: html

  .. image:: /_gallery/validation/images/thumb/sphx_glr_validate_blend_additive_thumb.webp
    :alt:

  :doc:`/_gallery/validation/validate_blend_additive`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example validates that normals are handled such that both the front and back faces are lit. Further it validates the appearance of the normal lines material.">

.. only:: html

  .. image:: /_gallery/validation/images/thumb/sphx_glr_validate_normals_sides_thumb.webp
    :alt:

  :doc:`/_gallery/validation/validate_normals_sides`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Normals on front and back</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Show an image using a plane geometry. For historic reasons, image data (usually) has the first rows representing the top of the image. But the plane gemeometry is such that it is reversed again.">

.. only:: html

  .. image:: /_gallery/validation/images/thumb/sphx_glr_validate_image1_thumb.webp
    :alt:

  :doc:`/_gallery/validation/validate_image1`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Image on Plane Geometry 1</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip=" On the left are points with increasing size, without aa, they don&#x27;t get smaller than one physical pixel.  On the right are poonts with increasing size, with aa, really small points diminish with alpha.  Note that due to the set pixel_ratio, a thickness of 2 is 1 physical pixel.  The bottom row demonstrates per-vertex sizing.">

.. only:: html

  .. image:: /_gallery/validation/images/thumb/sphx_glr_validate_points_size_thumb.webp
    :alt:

  :doc:`/_gallery/validation/validate_points_size`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Points with different sizes</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example draws squares of reference colors. These can be compared to similar output from e.g. Matplotlib.">

.. only:: html

  .. image:: /_gallery/validation/images/thumb/sphx_glr_validate_alpha_thumb.webp
    :alt:

  :doc:`/_gallery/validation/validate_alpha`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example (and test) for behavior of the depth buffer w.r.t. overlays, implemented using Material.depth_test. The overlaid object should always be on top.">

.. only:: html

  .. image:: /_gallery/validation/images/thumb/sphx_glr_validate_depth_overlay2_thumb.webp
    :alt:

  :doc:`/_gallery/validation/validate_depth_overlay2`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Depth Overlay 2</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip=" The top line is drawn with the thin line material, a classic gl one-pixel line.  On the left are lines with increasing thickness, without aa, they don&#x27;t get thinner than one physical pixel.  On the right are lines with increasing thickness, with aa, really thin lines diminish with alpha.  Note that due to the set pixel_ratio, a thickness of 2 is 1 physical pixel. * When dashes are present, they will eventually diminish as the line thickness reduces.">

.. only:: html

  .. image:: /_gallery/validation/images/thumb/sphx_glr_validate_line_thickness_thumb.webp
    :alt:

  :doc:`/_gallery/validation/validate_line_thickness`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Lines with different thicknesses</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example draws squares of reference colors. These can be compared to similar output from e.g. Matplotlib.">

.. only:: html

  .. image:: /_gallery/validation/images/thumb/sphx_glr_validate_color_thumb.webp
    :alt:

  :doc:`/_gallery/validation/validate_color`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example (and test) for behavior of the depth buffer w.r.t. overlays, implemented by multiple render calls. The overlay should always be on top.">

.. only:: html

  .. image:: /_gallery/validation/images/thumb/sphx_glr_validate_depth_overlay1_thumb.webp
    :alt:

  :doc:`/_gallery/validation/validate_depth_overlay1`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Depth Overlay 1</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example draws a series of semitransparent planes using dither mode.">

.. only:: html

  .. image:: /_gallery/validation/images/thumb/sphx_glr_validate_blend_dither_thumb.webp
    :alt:

  :doc:`/_gallery/validation/validate_blend_dither`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example shows texts with different anchors, so the text can be aligned in the scene.">

.. only:: html

  .. image:: /_gallery/validation/images/thumb/sphx_glr_validate_text_anchor_thumb.webp
    :alt:

  :doc:`/_gallery/validation/validate_text_anchor`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example draws a series of semitransparent planes using weighted mode.">

.. only:: html

  .. image:: /_gallery/validation/images/thumb/sphx_glr_validate_blend_weighted_thumb.webp
    :alt:

  :doc:`/_gallery/validation/validate_blend_weighted`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Pygfx text supports multiple text directions. Latin scripts (like English) are left-to-right. A right-to-left direction is used for e.g. Arabic, and top-to-bottom sometimes for Asian languages.">

.. only:: html

  .. image:: /_gallery/validation/images/thumb/sphx_glr_validate_text_direction_thumb.webp
    :alt:

  :doc:`/_gallery/validation/validate_text_direction`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Show images with physical colorspace, and srgb colorspace via three methods.">

.. only:: html

  .. image:: /_gallery/validation/images/thumb/sphx_glr_validate_srgb_thumb.webp
    :alt:

  :doc:`/_gallery/validation/validate_srgb`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">srgb texture colorspace</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Test markdown formatting features.">

.. only:: html

  .. image:: /_gallery/validation/images/thumb/sphx_glr_validate_text_md_thumb.webp
    :alt:

  :doc:`/_gallery/validation/validate_text_md`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Text markdown formatting</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example shows the ability to render different images of small sizes from 32x32 to 1x1 pixels in both RGB and grayscale formats.">

.. only:: html

  .. image:: /_gallery/validation/images/thumb/sphx_glr_validate_tiny_image_thumb.webp
    :alt:

  :doc:`/_gallery/validation/validate_tiny_image`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Tiny Image Validation</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Show an image with points overlaid. Both the image and points are uploaded with send_data.">

.. only:: html

  .. image:: /_gallery/validation/images/thumb/sphx_glr_validate_send_data_thumb.webp
    :alt:

  :doc:`/_gallery/validation/validate_send_data`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Apply a variety of transform combinations.">

.. only:: html

  .. image:: /_gallery/validation/images/thumb/sphx_glr_validate_transform_thumb.webp
    :alt:

  :doc:`/_gallery/validation/validate_transform`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip=" Demoing densely sampled lines with dashing.  Thicker lines show the same pattern (i.e. dash phase increases with thickness). * Dash offset is expressed in same space as the pattern.">

.. only:: html

  .. image:: /_gallery/validation/images/thumb/sphx_glr_validate_line_dash_thumb.webp
    :alt:

  :doc:`/_gallery/validation/validate_line_dash`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Nearly all objects in Pygfx can have a colormap. And the texcoords can also be scaled using material.maprange. This is useful in scientific applications, where texcoords can e.g. mean temperature of force.">

.. only:: html

  .. image:: /_gallery/validation/images/thumb/sphx_glr_validate_line_colormap_thumb.webp
    :alt:

  :doc:`/_gallery/validation/validate_line_colormap`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example combines MeshPhongMaterial and MeshStandardMaterial with PointLight, AmbientLight, SpotLight and DirectionalLight to check that all combinations are working properly.">

.. only:: html

  .. image:: /_gallery/validation/images/thumb/sphx_glr_validate_light_shadow_thumb.webp
    :alt:

  :doc:`/_gallery/validation/validate_light_shadow`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Light and Shadow</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This validates that the skybox background is rendered correctly, as well as that the environment-map matches that background. Therefore it also covers the internal cube-camera-renderer.">

.. only:: html

  .. image:: /_gallery/validation/images/thumb/sphx_glr_validate_skybox_thumb.webp
    :alt:

  :doc:`/_gallery/validation/validate_skybox`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Show an image with four different colormaps.">

.. only:: html

  .. image:: /_gallery/validation/images/thumb/sphx_glr_validate_image_colormap_thumb.webp
    :alt:

  :doc:`/_gallery/validation/validate_image_colormap`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example (and test) for camera depth clipping planes. This draws four rectangles near the near and far clipping planes.">

.. only:: html

  .. image:: /_gallery/validation/images/thumb/sphx_glr_validate_depth_clipping_thumb.webp
    :alt:

  :doc:`/_gallery/validation/validate_depth_clipping`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Display infinite line segments.">

.. only:: html

  .. image:: /_gallery/validation/images/thumb/sphx_glr_validate_line_inf_thumb.webp
    :alt:

  :doc:`/_gallery/validation/validate_line_inf`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Infinite line segments</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example demonstrating the capabilities of text to be aligned and justified according to the user&#x27;s decision.">

.. only:: html

  .. image:: /_gallery/validation/images/thumb/sphx_glr_validate_text_align_thumb.webp
    :alt:

  :doc:`/_gallery/validation/validate_text_align`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Render a volume and volume slices. You should see:">

.. only:: html

  .. image:: /_gallery/validation/images/thumb/sphx_glr_validate_volume_thumb.webp
    :alt:

  :doc:`/_gallery/validation/validate_volume`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Volume and Volume Slice Rendering</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Showing off some ruler tricks.">

.. only:: html

  .. image:: /_gallery/validation/images/thumb/sphx_glr_validate_ruler_thumb.webp
    :alt:

  :doc:`/_gallery/validation/validate_ruler`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example (and test) for the NDC coordinates. Draws a square that falls partly out of visible range.">

.. only:: html

  .. image:: /_gallery/validation/images/thumb/sphx_glr_validate_ndc_thumb.webp
    :alt:

  :doc:`/_gallery/validation/validate_ndc`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example shows text with different sizes.">

.. only:: html

  .. image:: /_gallery/validation/images/thumb/sphx_glr_validate_text_size_thumb.webp
    :alt:

  :doc:`/_gallery/validation/validate_text_size`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Show a bunch of grids touching various grid-cases.">

.. only:: html

  .. image:: /_gallery/validation/images/thumb/sphx_glr_validate_grid1_thumb.webp
    :alt:

  :doc:`/_gallery/validation/validate_grid1`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Validate the grid</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip=" This shows a 2D line in 3 flavours.  It shows a gap due to nan values.  It has duplicate points to test correct handling for that.  It also puts a few points in quick succession to test that it staus a continuous line (with joins, no caps). * It includes a point that only has its z-value different, which should behave like a duplicate point.">

.. only:: html

  .. image:: /_gallery/validation/images/thumb/sphx_glr_validate_line_2d_thumb.webp
    :alt:

  :doc:`/_gallery/validation/validate_line_2d`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Lines in 2D</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example draws 3 rows of cubes, each with size 10, but each row in a different size_space (and color). The left column is positioned directly in the scene. The next two columns are smaller cubes, but placed in scaled containers.">

.. only:: html

  .. image:: /_gallery/validation/images/thumb/sphx_glr_validate_points_size_space_thumb.webp
    :alt:

  :doc:`/_gallery/validation/validate_points_size_space`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Points drawn with different size_space</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Show meshes with 1D, 2D, and 3D colormaps, and per-vertex colors too.">

.. only:: html

  .. image:: /_gallery/validation/images/thumb/sphx_glr_validate_mesh_colormap_thumb.webp
    :alt:

  :doc:`/_gallery/validation/validate_mesh_colormap`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example draws 3 rows of cubes, each with thickness 10, but each row in a different thickness_space (and color). The left column is positioned directly in the scene. The next two columns are smaller cubes, but placed in scaled containers.">

.. only:: html

  .. image:: /_gallery/validation/images/thumb/sphx_glr_validate_line_thickness_space_thumb.webp
    :alt:

  :doc:`/_gallery/validation/validate_line_thickness_space`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Lines drawn with different thickness_space</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Validate the different filters for the output pass, (i.e. flush).">

.. only:: html

  .. image:: /_gallery/validation/images/thumb/sphx_glr_validate_outpass_thumb.webp
    :alt:

  :doc:`/_gallery/validation/validate_outpass`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example test to validate winding and culling.">

.. only:: html

  .. image:: /_gallery/validation/images/thumb/sphx_glr_validate_culling_thumb.webp
    :alt:

  :doc:`/_gallery/validation/validate_culling`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Drawing multiple line loops using material.loop and separating line-pieces with nans.">

.. only:: html

  .. image:: /_gallery/validation/images/thumb/sphx_glr_validate_line_loop_thumb.webp
    :alt:

  :doc:`/_gallery/validation/validate_line_loop`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Validate the different ppaa methods.">

.. only:: html

  .. image:: /_gallery/validation/images/thumb/sphx_glr_validate_ppaa_thumb.webp
    :alt:

  :doc:`/_gallery/validation/validate_ppaa`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This renders a sine wave on a gradient background. But the four quadrants are rendered separately using set_view_offset and put together using textured gfx.Mesh objects with a margin in between.">

.. only:: html

  .. image:: /_gallery/validation/images/thumb/sphx_glr_validate_view_offset_thumb.webp
    :alt:

  :doc:`/_gallery/validation/validate_view_offset`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Validate view offset</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Show stitching of images using weighted blending. The alpha value of the images are used as weights.">

.. only:: html

  .. image:: /_gallery/validation/images/thumb/sphx_glr_validate_streamed_blending_thumb.webp
    :alt:

  :doc:`/_gallery/validation/validate_streamed_blending`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Streamed image stitching</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip=" All available marker shapes are shown.  Shows red, green and blue faces. Then a semi-transparent face, and finally a fully-transparent face.">

.. only:: html

  .. image:: /_gallery/validation/images/thumb/sphx_glr_validate_points_markers_thumb.webp
    :alt:

  :doc:`/_gallery/validation/validate_points_markers`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Points with different markers</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example to validate the mesh slice rendering.">

.. only:: html

  .. image:: /_gallery/validation/images/thumb/sphx_glr_validate_meshslice_thumb.webp
    :alt:

  :doc:`/_gallery/validation/validate_meshslice`

.. raw:: html

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


.. thumbnail-parent-div-close

.. raw:: html

    </div>

Other Examples
--------------

.. note::
    The examples in this section are not rendered. Typically because they use a
    backend that is not available on the CI runner.



.. raw:: html

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

.. thumbnail-parent-div-open

.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Convenient for when investigating performance.">

.. only:: html

  .. image:: /_gallery/other/images/thumb/sphx_glr_show_cpu_usage_thumb.png
    :alt:

  :doc:`/_gallery/other/show_cpu_usage`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Showing CPU usage in the title bar</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example showing a single geometric cube.">

.. only:: html

  .. image:: /_gallery/other/images/thumb/sphx_glr_cube_wx_thumb.png
    :alt:

  :doc:`/_gallery/other/cube_wx`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example showing a single geometric cube.">

.. only:: html

  .. image:: /_gallery/other/images/thumb/sphx_glr_cube_qt_thumb.png
    :alt:

  :doc:`/_gallery/other/cube_qt`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Demonstrate how a specific GPU can be selected, or how a GPU can be selected using a power preference.">

.. only:: html

  .. image:: /_gallery/other/images/thumb/sphx_glr_gpu_selection_thumb.png
    :alt:

  :doc:`/_gallery/other/gpu_selection`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Note how we use QRenderWidget instead of RenderCanvas. The former is inteded to be embedded in an application, the latter is meant as a toplevel window.">

.. only:: html

  .. image:: /_gallery/other/images/thumb/sphx_glr_integration_qt_thumb.png
    :alt:

  :doc:`/_gallery/other/integration_qt`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Integrate Pygfx in Qt</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example loads the Stanford Bunny mesh via Open3D, converts it to pygfx, renders with a basic material, and applies EDL as a post-process.">

.. only:: html

  .. image:: /_gallery/other/images/thumb/sphx_glr_edl_mesh_thumb.png
    :alt:

  :doc:`/_gallery/other/edl_mesh`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Stanford Bunny mesh with Eye-Dome Lighting (EDL)</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Demonstrates visualizing object bounding boxes">

.. only:: html

  .. image:: /_gallery/other/images/thumb/sphx_glr_object_bounding_box_open3d_thumb.png
    :alt:

  :doc:`/_gallery/other/object_bounding_box_open3d`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Example demonstrating rendering the same scene into two different canvases.">

.. only:: html

  .. image:: /_gallery/other/images/thumb/sphx_glr_two_canvases_thumb.png
    :alt:

  :doc:`/_gallery/other/two_canvases`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Display a lot of line objects. Because of the architecture of wgpu, this is still performant.">

.. only:: html

  .. image:: /_gallery/other/images/thumb/sphx_glr_collection_line_thumb.png
    :alt:

  :doc:`/_gallery/other/collection_line`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Performance of drawing many Lines</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Demonstrates loading mesh models from open3d.">

.. only:: html

  .. image:: /_gallery/other/images/thumb/sphx_glr_load_open3d_mesh_thumb.png
    :alt:

  :doc:`/_gallery/other/load_open3d_mesh`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Load Open3D Mesh</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Demonstrates loading pointclouds from open3d.">

.. only:: html

  .. image:: /_gallery/other/images/thumb/sphx_glr_load_open3d_pointcloud_thumb.png
    :alt:

  :doc:`/_gallery/other/load_open3d_pointcloud`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Load Open3D Pointcloud</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example shows how to load the Sponza scene. To run it, you have to have access to the sponza demo scene, which you can get using::">

.. only:: html

  .. image:: /_gallery/other/images/thumb/sphx_glr_sponza_scene_thumb.png
    :alt:

  :doc:`/_gallery/other/sponza_scene`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example renders the Stanford Bunny point cloud (via Open3D) and applies EDL as a post-process to enhance depth perception.">

.. only:: html

  .. image:: /_gallery/other/images/thumb/sphx_glr_edl_pointcloud_thumb.png
    :alt:

  :doc:`/_gallery/other/edl_pointcloud`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Point cloud with Eye-Dome Lighting (EDL)</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example shows how to subtract a background from an image.">

.. only:: html

  .. image:: /_gallery/other/images/thumb/sphx_glr_background_subtraction_thumb.webp
    :alt:

  :doc:`/_gallery/other/background_subtraction`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">A Method to Subtract Background from an Image</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This example encapsulates all state that has a visual impact on the drawn frame, and only renders a new frame when there are changes in that state.">

.. only:: html

  .. image:: /_gallery/other/images/thumb/sphx_glr_reactive_rendering_thumb.png
    :alt:

  :doc:`/_gallery/other/reactive_rendering`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Reactive rendering loop</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="High resolution screenshot">

.. only:: html

  .. image:: /_gallery/other/images/thumb/sphx_glr_hirez_screenshot_thumb.png
    :alt:

  :doc:`/_gallery/other/hirez_screenshot`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">High resolution screenshot</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="This script demonstrates a real-time interactive segmentation application using pygfx points as prompts to the SAM2 (Segment Anything Model 2) model. SAM2 relies on PyTorch for inference, and the GUI is built using Qt (PySide6).">

.. only:: html

  .. image:: /_gallery/other/images/thumb/sphx_glr_sam2_point_segmentation_thumb.png
    :alt:

  :doc:`/_gallery/other/sam2_point_segmentation`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Interactive Segmentation with SAM2</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="While mostly an internal tool, it does show how one can combine multiple scenes, all sharing the same data to display it different ways.">

.. only:: html

  .. image:: /_gallery/other/images/thumb/sphx_glr_compare_images_thumb.webp
    :alt:

  :doc:`/_gallery/other/compare_images`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">A Tool to Compare Two Images of Identical Shapes</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Compute the histogram of an image, on the GPU, using compute shaders.">

.. only:: html

  .. image:: /_gallery/other/images/thumb/sphx_glr_image_histogram_thumb.webp
    :alt:

  :doc:`/_gallery/other/image_histogram`

.. raw:: html

      <div class="sphx-glr-thumbnail-title">Image Histogram Analysis</div>
    </div>


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Lighting effect demonstration examples with adjustable parameters">

.. only:: html

  .. image:: /_gallery/other/images/thumb/sphx_glr_light_view_thumb.png
    :alt:

  :doc:`/_gallery/other/light_view`

.. raw:: html

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


.. raw:: html

    <div class="sphx-glr-thumbcontainer" tooltip="Pygfx Integration with PyTorch Lightning and PyTorch Geometric: A Practical Example.">

.. only:: html

  .. image:: /_gallery/other/images/thumb/sphx_glr_integration_pytorch_thumb.png
    :alt:

  :doc:`/_gallery/other/integration_pytorch`

.. raw:: html

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


.. thumbnail-parent-div-close

.. raw:: html

    </div>


.. toctree::
   :hidden:
   :includehidden:


   /_gallery/introductory/index.rst
   /_gallery/feature_demo/index.rst
   /_gallery/validation/index.rst
   /_gallery/other/index.rst


.. 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>`_