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

.. only:: html

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

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

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

.. _sphx_glr__gallery_feature_demo_posteffect_normals.py:


Screen space normal reconstruction
==================================

This example demonstrates how to accurately reconstruct surface normals using the depth buffer.

Implementation is based on https://atyuwen.github.io/posts/normal-reconstruction/

.. GENERATED FROM PYTHON SOURCE LINES 9-75



.. image-sg:: /_gallery/feature_demo/images/sphx_glr_posteffect_normals_001.webp
   :alt: posteffect normals
   :srcset: /_gallery/feature_demo/images/sphx_glr_posteffect_normals_001.webp
   :class: sphx-glr-single-img





.. code-block:: Python



    import pygfx as gfx
    import numpy as np
    import pylinalg as la
    from rendercanvas.auto import RenderCanvas, loop
    from pygfx.renderers.wgpu import NormalPass

    canvas = RenderCanvas(
        size=(800, 600), update_mode="fastest", title="Animations", vsync=False
    )

    renderer = gfx.WgpuRenderer(canvas)
    camera = gfx.PerspectiveCamera(45, 800 / 600, depth_range=(0.1, 1000))
    camera.local.position = (3, 4, 1)
    scene_center = (-1, 0.5, -2)
    camera.look_at(scene_center)
    scene = gfx.Scene()

    dl = gfx.DirectionalLight()
    dl.local.position = (6, 8, 2)
    scene.add(gfx.AmbientLight(), dl)

    # scene objects
    plane = gfx.Mesh(
        gfx.plane_geometry(100, 100),
        gfx.MeshPhongMaterial(color="lightgray"),
    )
    plane.local.rotation = la.quat_from_axis_angle((1, 0, 0), np.pi / 2)
    scene.add(plane)

    boxes = gfx.Group()

    box = gfx.Mesh(
        gfx.box_geometry(4, 2, 4),
        gfx.MeshPhongMaterial(color="#444"),
    )
    box.local.position = (-2, 1, -3)
    boxes.add(box)

    box2 = gfx.Mesh(
        gfx.box_geometry(1, 1, 3),
        gfx.MeshPhongMaterial(color="#666"),
    )
    box2.local.position = (0.5, 0.5, -1)
    boxes.add(box2)

    scene.add(boxes)

    controller = gfx.OrbitController(camera, target=scene_center, register_events=renderer)

    normal_pass = NormalPass()
    renderer.effect_passes = [normal_pass]


    def animate():
        normal_pass.cam_transform_inv = camera.world.matrix.T
        normal_pass.projection_transform_inv = camera.projection_matrix_inverse.T
        normal_pass.width, normal_pass.height = canvas.get_physical_size()
        renderer.render(scene, camera)
        canvas.request_draw()


    if __name__ == "__main__":
        canvas.request_draw(animate)
        loop.run()


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

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


.. _sphx_glr_download__gallery_feature_demo_posteffect_normals.py:

.. only:: html

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

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

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

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

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

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

      :download:`Download zipped: posteffect_normals.zip <posteffect_normals.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#posteffect_normals.py"></iframe>