.. _sphx_glr__gallery_feature_demo:

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>


.. toctree::
   :hidden:

   /_gallery/feature_demo/show_stl
   /_gallery/feature_demo/geometry_mobius
   /_gallery/feature_demo/geometry_polyhedron_subdivisions
   /_gallery/feature_demo/show_scene
   /_gallery/feature_demo/geometry_image
   /_gallery/feature_demo/show_image
   /_gallery/feature_demo/line_performance
   /_gallery/feature_demo/geometry_cubes
   /_gallery/feature_demo/geometry_polyhedron
   /_gallery/feature_demo/volume_iso_render
   /_gallery/feature_demo/volume_minip_render
   /_gallery/feature_demo/geometry_torus_knot
   /_gallery/feature_demo/mesh_dynamic
   /_gallery/feature_demo/flat_shaded_torus
   /_gallery/feature_demo/line_segments
   /_gallery/feature_demo/picking_points
   /_gallery/feature_demo/manual_matrix_update
   /_gallery/feature_demo/volume_slice1
   /_gallery/feature_demo/point_sprites
   /_gallery/feature_demo/helpers_gizmo
   /_gallery/feature_demo/geometry_plane
   /_gallery/feature_demo/mesh_toon
   /_gallery/feature_demo/world_bounding_box
   /_gallery/feature_demo/wireframe1
   /_gallery/feature_demo/geometry_klein_bottle
   /_gallery/feature_demo/line_thick
   /_gallery/feature_demo/posteffect1
   /_gallery/feature_demo/volume_slice2
   /_gallery/feature_demo/helpers_stats
   /_gallery/feature_demo/measure_distances_2d
   /_gallery/feature_demo/wireframe2
   /_gallery/feature_demo/skybox_rotate
   /_gallery/feature_demo/volume_render2
   /_gallery/feature_demo/text_contrast
   /_gallery/feature_demo/volume_slice3
   /_gallery/feature_demo/image_plus_points
   /_gallery/feature_demo/physical_color
   /_gallery/feature_demo/instancing_mesh
   /_gallery/feature_demo/synced_video
   /_gallery/feature_demo/fly_controller
   /_gallery/feature_demo/multiple_fonts
   /_gallery/feature_demo/picking_color
   /_gallery/feature_demo/light_directional_shadow
   /_gallery/feature_demo/colormap_channels
   /_gallery/feature_demo/mesh_slice
   /_gallery/feature_demo/image_overlay
   /_gallery/feature_demo/volume_render1
   /_gallery/feature_demo/text_multiple_grid
   /_gallery/feature_demo/text_multiple_labels
   /_gallery/feature_demo/image_scaling
   /_gallery/feature_demo/iridescence
   /_gallery/feature_demo/paint_to_texture
   /_gallery/feature_demo/paint_to_texture_directly
   /_gallery/feature_demo/scene_overlay
   /_gallery/feature_demo/look_at
   /_gallery/feature_demo/text_snake
   /_gallery/feature_demo/spheres
   /_gallery/feature_demo/panzoom_camera
   /_gallery/feature_demo/scene_subplots1
   /_gallery/feature_demo/sheen_chair
   /_gallery/feature_demo/skybox
   /_gallery/feature_demo/posteffect_normals
   /_gallery/feature_demo/sheen_glam_velvet_sofa
   /_gallery/feature_demo/scene_in_a_scene
   /_gallery/feature_demo/measure_distances_3d
   /_gallery/feature_demo/anisotropy_barn_lamp
   /_gallery/feature_demo/posteffect2
   /_gallery/feature_demo/pbr
   /_gallery/feature_demo/scene_camlink2
   /_gallery/feature_demo/look_at_instanced
   /_gallery/feature_demo/multi_slice2
   /_gallery/feature_demo/image_stitching
   /_gallery/feature_demo/clearcoat2
   /_gallery/feature_demo/blending_ordered2
   /_gallery/feature_demo/lightmap
   /_gallery/feature_demo/cylinder
   /_gallery/feature_demo/picking_mesh
   /_gallery/feature_demo/scene_camlink1
   /_gallery/feature_demo/multi_slice1
   /_gallery/feature_demo/skinning_bind_detached
   /_gallery/feature_demo/aomap
   /_gallery/feature_demo/dynamic_env_map
   /_gallery/feature_demo/morph_facecap
   /_gallery/feature_demo/morph_targets
   /_gallery/feature_demo/pbr_instanced
   /_gallery/feature_demo/custom_object1
   /_gallery/feature_demo/image_click_events
   /_gallery/feature_demo/transparency1
   /_gallery/feature_demo/light_shadow
   /_gallery/feature_demo/scene_subplots2
   /_gallery/feature_demo/colormap_image
   /_gallery/feature_demo/transparency2
   /_gallery/feature_demo/iridescence2
   /_gallery/feature_demo/labelled_image_grid
   /_gallery/feature_demo/scene_subplots_video
   /_gallery/feature_demo/line_plot
   /_gallery/feature_demo/pbr2
   /_gallery/feature_demo/env_maps
   /_gallery/feature_demo/text_waterfall
   /_gallery/feature_demo/quad_mesh
   /_gallery/feature_demo/mesh_toon2
   /_gallery/feature_demo/skinned_mesh
   /_gallery/feature_demo/earth
   /_gallery/feature_demo/blending_weighted_plus
   /_gallery/feature_demo/map_click_events_to_world
   /_gallery/feature_demo/skinning_animation
   /_gallery/feature_demo/line_basic
   /_gallery/feature_demo/mesh_depth_material
   /_gallery/feature_demo/clearcoat
   /_gallery/feature_demo/colormap_mesh
   /_gallery/feature_demo/gltf_unlit
   /_gallery/feature_demo/custom_object2
   /_gallery/feature_demo/multi_select
   /_gallery/feature_demo/bloom2
   /_gallery/feature_demo/light_spotlights
   /_gallery/feature_demo/bloom
   /_gallery/feature_demo/custom_object3
   /_gallery/feature_demo/light_spotlight_shadows
   /_gallery/feature_demo/gltf_animations
   /_gallery/feature_demo/wireframe_material
   /_gallery/feature_demo/text_align
   /_gallery/feature_demo/point_marker_multi_color
   /_gallery/feature_demo/text_big
   /_gallery/feature_demo/gltf_viewer
   /_gallery/feature_demo/video_yuv
   /_gallery/feature_demo/animation_mixer
   /_gallery/feature_demo/compute_cloth
   /_gallery/feature_demo/audio_visualizer