.. DO NOT EDIT.
.. THIS FILE WAS AUTOMATICALLY GENERATED BY SPHINX-GALLERY.
.. TO MAKE CHANGES, EDIT THE SOURCE PYTHON FILE:
.. "_gallery/validation/validate_view_offset.py"
.. LINE NUMBERS ARE GIVEN BELOW.

.. only:: html

    .. note::
        :class: sphx-glr-download-link-note

        :ref:`Go to the end <sphx_glr_download__gallery_validation_validate_view_offset.py>`
        to download the full example code.

.. rst-class:: sphx-glr-example-title

.. _sphx_glr__gallery_validation_validate_view_offset.py:


Validate view offset
====================

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.

The offscreen canvas has a pixel-ratio of 2, and the line has a
thickness (in logical pixels), so this should cover the sizing logic.

.. GENERATED FROM PYTHON SOURCE LINES 12-120



.. image-sg:: /_gallery/validation/images/sphx_glr_validate_view_offset_001.webp
   :alt: validate view offset
   :srcset: /_gallery/validation/images/sphx_glr_validate_view_offset_001.webp
   :class: sphx-glr-single-img





.. code-block:: Python



    import numpy as np
    from rendercanvas.offscreen import RenderCanvas as OffscreenCanvas
    from rendercanvas.auto import RenderCanvas, loop
    import pygfx as gfx


    # -- Prepare canvases

    pixel_ratio = 2
    offscreen_canvas = OffscreenCanvas(size=(400, 300), pixel_ratio=pixel_ratio)
    canvas = RenderCanvas(size=(830, 630))


    # -- scene that renders the visualization

    renderer1 = gfx.WgpuRenderer(offscreen_canvas)

    scene1 = gfx.Scene()
    scene1.add(gfx.Background.from_color("#fff", "#000", "#f00", "#0f0"))

    x = np.linspace(0, 100, 1000, dtype=np.float32)
    y = np.sin(x) * 10
    line = gfx.Line(
        gfx.Geometry(positions=np.vstack((x, y, np.zeros_like(x))).T),
        gfx.LineMaterial(color="#0ff", thickness=6, aa=False),
    )
    scene1.add(line)

    camera1 = gfx.OrthographicCamera()
    camera1.show_object(scene1)


    # -- The scene to show the tiles

    renderer2 = gfx.WgpuRenderer(canvas)

    scene2 = gfx.Scene()
    scene2.add(gfx.Background.from_color("#777"))

    tile_shape = pixel_ratio * 300, pixel_ratio * 400, 4
    tile1 = gfx.Texture(np.zeros(tile_shape, np.uint8), dim=2)
    tile2 = gfx.Texture(np.zeros(tile_shape, np.uint8), dim=2)
    tile3 = gfx.Texture(np.zeros(tile_shape, np.uint8), dim=2)
    tile4 = gfx.Texture(np.zeros(tile_shape, np.uint8), dim=2)

    image_material = gfx.ImageBasicMaterial(clim=(0, 255))

    mesh1 = gfx.Mesh(gfx.plane_geometry(400, 300), gfx.MeshBasicMaterial(map=tile1))
    mesh2 = gfx.Mesh(gfx.plane_geometry(400, 300), gfx.MeshBasicMaterial(map=tile2))
    mesh3 = gfx.Mesh(gfx.plane_geometry(400, 300), gfx.MeshBasicMaterial(map=tile3))
    mesh4 = gfx.Mesh(gfx.plane_geometry(400, 300), gfx.MeshBasicMaterial(map=tile4))

    mesh1.local.position = 200 + 10, 150 + 320, 0
    mesh2.local.position = 200 + 420, 150 + 320, 0
    mesh3.local.position = 200 + 10, 150 + 10, 0
    mesh4.local.position = 200 + 420, 150 + 10, 0

    scene2.add(mesh1, mesh2, mesh3, mesh4)

    camera2 = gfx.OrthographicCamera()
    camera2.show_rect(0, 830, 0, 630)


    # -- Tiling


    @offscreen_canvas.request_draw
    def animate1():
        renderer1.render(scene1, camera1)


    # so in the current situation with run_sync and rendercanvas (2.6.2) having the two draw functions (which in turn call sync_waited promises somewhere) causes a problem with Pyodide.
    # my suspicion is that only a single loop exist and the innermost run_sync doesn't even block anymore. I will try to recreate this behaviour in pure renderdoc(no pygfx, no wgpu-py) to maybe understand it better.
    # calling this function once instead of adding it to the loop does work... but this means the loop doesn't actually do anything and can be ommited.
    # In short: the outer canvas draw function includes calls to ofscreen_canvas.draw, and if called as as a request_draw from the loop, breaks


    # @canvas.request_draw # don't register in the loop
    def animate2():
        camera1.set_view_offset(800, 600, 0, 0, 400, 300)
        im = offscreen_canvas.draw()
        im = np.asarray(im)
        tile1.set_data(im)

        camera1.set_view_offset(800, 600, 400, 0, 400, 300)
        im = offscreen_canvas.draw()
        tile2.set_data(im)

        camera1.set_view_offset(800, 600, 0, 300, 400, 300)
        im = offscreen_canvas.draw()
        tile3.set_data(im)

        camera1.set_view_offset(800, 600, 400, 300, 400, 300)
        im = offscreen_canvas.draw()
        tile4.set_data(im)

        renderer2.render(scene2, camera2)


    renderer = renderer2  # for the screenshot code

    if __name__ == "__main__":
        print(__doc__)
        # call once instead of a loop
        animate2()
        # loop.run()


.. rst-class:: sphx-glr-timing

   **Total running time of the script:** (0 minutes 0.769 seconds)


.. _sphx_glr_download__gallery_validation_validate_view_offset.py:

.. only:: html

  .. container:: sphx-glr-footer sphx-glr-footer-example

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

      :download:`Download Jupyter notebook: validate_view_offset.ipynb <validate_view_offset.ipynb>`

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

      :download:`Download Python source code: validate_view_offset.py <validate_view_offset.py>`

    .. container:: sphx-glr-download sphx-glr-download-zip

      :download:`Download zipped: validate_view_offset.zip <validate_view_offset.zip>`


.. only:: html

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

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

.. only:: html

    Interactive example
    -------------------

    Try this example in your browser using Pyodide. Might not work with all examples and all devices. Check the output and your browser's console for details.

    .. raw:: html

        <iframe src="./../pyodide.html#validate_view_offset.py"></iframe>