{% extends "layout.html" %}

{% block extrahead %}
{# sphinxext-opengraph skips this page: it has no doctree, so the tags are set here. #}
<meta name="description" content="FURY - Free Unified Rendering in pYthon. A free and open-source software library for Scientific Visualization and 3D animations.">
<meta property="og:type" content="website">
<meta property="og:title" content="FURY - Free Unified Rendering in pYthon">
<meta property="og:description" content="A free and open-source Python library for Scientific Visualization and 3D animations, GPU accelerated through pygfx and WebGPU.">
<meta property="og:url" content="{{ pageurl }}">
<meta property="og:image" content="{{ pageurl }}_static/images/text-logo.png">
<meta name="twitter:card" content="summary_large_image">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Barlow:wght@800;900&display=swap" rel="stylesheet">
<link href="{{ pathto('_static/css/homepage.css', 1) }}" rel="stylesheet">
{% endblock %}

{% block body %}
<div class="hero-container">
    <div class="hero-grid">

        <div class="hero-content">

            <!-- Playful FURY "equation": sets a scientific/code tone -->
            <div class="hero-equation">
                science + speed = <span class="fury-red">fury</span>
            </div>

            <h1 class="hero-title">
                Scientific<br>
                visualization,<br>
                <span class="fury-red">furiously fast.</span>
            </h1>

            <p class="hero-description">
                FURY is a free, open source Python library for 3D scientific visualization and animation, built on the GPU through <strong>pygfx</strong> and WebGPU. NumPy arrays in, real-time renders out.
            </p>

            <!-- Primary and secondary call-to-action buttons -->
            <div class="hero-actions">
                <a href="{{ pathto('getting_started') }}" class="btn-primary">Get started</a>
                <a href="{{ pathto('auto_examples/index') }}" class="btn-secondary">Browse the examples &rarr;</a>
            </div>

            <div class="install-blocks">

                <!-- pip install block -->
                <div class="install-block" data-copy="pip install fury">
                    <span>
                        <span class="install-prompt">$</span> pip install fury
                    </span>
                    <button
                        class="install-block__copy-button"
                        type="button"
                        onclick="homepageCopyToClipboard(this)"
                        aria-label="Copy pip install command to clipboard"
                    >
                        <span class="install-block__copy-label" aria-hidden="true"></span>
                        <i class="fa-regular fa-copy" aria-hidden="true"></i>
                    </button>
                </div>

                <!-- conda install block -->
                <div class="install-block" data-copy="conda install -c conda-forge fury">
                    <span>
                        <span class="install-prompt">$</span> conda install -c conda-forge fury
                    </span>
                    <button
                        class="install-block__copy-button"
                        type="button"
                        onclick="homepageCopyToClipboard(this)"
                        aria-label="Copy conda install command to clipboard"
                    >
                        <span class="install-block__copy-label" aria-hidden="true"></span>
                        <i class="fa-regular fa-copy" aria-hidden="true"></i>
                    </button>
                </div>

            </div>
        </div>

        <div class="hero-visuals">

            <!-- Animated render: demonstrates FURY output quality -->
            <div class="visual-card">
                <video autoplay loop muted playsinline preload="metadata"
                       poster="{{ pathto('_static/images/hero.jpg', 1) }}" aria-label="FURY keyframe animation">
                    <source src="{{ pathto('_static/images/hero.webm', 1) }}" type="video/webm">
                    <source src="{{ pathto('_static/images/hero.mp4', 1) }}" type="video/mp4">
                </video>
                <div class="visual-footer">
                    <span>
                        <span class="visual-footer__dot">&bull;</span>
                        keyframe animation &middot; rendered by FURY
                    </span>
                    <span>800 &times; 450</span>
                </div>
            </div>

            <div class="code-editor">
                <div class="code-editor__header">
                    <span class="code-editor__filename">your_first_scene.py</span>
                    <div class="code-editor__meta">
                        <span class="code-editor__lines-count">10 lines</span>
                        <button
                            class="code-editor__copy-button"
                            type="button"
                            data-copy-target="code-editor-snippet"
                            onclick="homepageCopyToClipboard(this)"
                            aria-label="Copy code snippet to clipboard"
                        >
                            <span class="code-editor__copy-label" aria-hidden="true"></span>
                            <i class="fa-regular fa-copy" aria-hidden="true"></i>
                        </button>
                    </div>
                </div>

                <div class="code-editor__body" id="code-editor-snippet">
                    <span class="code-keyword">import</span> <span class="code-module">numpy</span> <span class="code-keyword">as</span> np<br>
                    <span class="code-keyword">from</span> fury.actor <span class="code-keyword">import</span> <span class="code-module">sphere</span><br>
                    <span class="code-keyword">from</span> fury.window <span class="code-keyword">import</span> <span class="code-module">show</span><br>
                    <br>
                    <span class="code-var">rng</span> = np.random.default_rng()<br>
                    <span class="code-var">centers</span> = rng.uniform(<span class="code-number">-50</span>, <span class="code-number">50</span>, size=(<span class="code-number">1000</span>, <span class="code-number">3</span>))<br>
                    <span class="code-var">colors</span> = rng.uniform(<span class="code-number">0</span>, <span class="code-number">1</span>, size=(<span class="code-number">1000</span>, <span class="code-number">3</span>))<br>
                    <br>
                    <span class="code-var">actor</span> = <span class="code-function">sphere</span>(centers, colors=colors, radii=<span class="code-number">1.5</span>)<br>
                    <span class="code-function">show</span>(actors=[actor])
                </div>
            </div>

        </div>
    </div>
</div>

<div class="fury-features">
    <div class="fury-features-grid">
        <div class="fury-features__header">
            <h2 class="fury-features__title">FURY in Action</h2>
            <a href="{{ pathto('auto_examples/index') }}" class="fury-features__link">Browse all examples &rarr;</a>
        </div>

        <div class="fury-features__list">
            <!-- Feature 1 -->
            <div class="fury-feature-card">
                <div class="fury-feature-card__visual">
                    <div class="fury-feature-card__image-wrapper">
                        <video autoplay loop muted playsinline preload="metadata"
                               poster="{{ pathto('_static/images/horse.jpg', 1) }}" aria-label="Shaders">
                            <source src="{{ pathto('_static/images/horse.webm', 1) }}" type="video/webm">
                            <source src="{{ pathto('_static/images/horse.mp4', 1) }}" type="video/mp4">
                        </video>
                        <div class="fury-feature-card__caption">shader-deformed mesh, animated per frame</div>
                    </div>
                </div>
                <div class="fury-feature-card__content">
                    <h3 class="fury-feature-card__title">Shaders</h3>
                    <p class="fury-feature-card__description">Shaders are simple programs that describe the traits of
                        either a vertex or a pixel. Vertex shaders describe the attributes (position, texture
                        coordinates, colors, etc.) of a vertex, while pixel shaders describe the traits (color, z-depth
                        and alpha value) of a pixel.</p>
                </div>
            </div>

            <!-- Feature 2 -->
            <div class="fury-feature-card fury-feature-card--reverse">
                <div class="fury-feature-card__content">
                    <h3 class="fury-feature-card__title">Physically based rendering</h3>
                    <p class="fury-feature-card__description">Physically based rendering (PBR) is a computer graphics
                        approach that seeks to render images in a way that models the flow of light in the real world.
                        Many PBR pipelines aim to achieve photorealism. This video demonstrates Anisotropic specular
                        reflection in FURY.</p>
                </div>
                <div class="fury-feature-card__visual">
                    <div class="fury-feature-card__image-wrapper">
                        <video autoplay loop muted playsinline preload="metadata"
                               poster="{{ pathto('_static/images/physical.jpg', 1) }}" aria-label="Physically based rendering">
                            <source src="{{ pathto('_static/images/physical.webm', 1) }}" type="video/webm">
                            <source src="{{ pathto('_static/images/physical.mp4', 1) }}" type="video/mp4">
                        </video>
                        <div class="fury-feature-card__caption">anisotropic specular reflection</div>
                    </div>
                </div>
            </div>

            <!-- Feature 3 -->
            <div class="fury-feature-card">
                <div class="fury-feature-card__visual">
                    <div class="fury-feature-card__image-wrapper">
                        <video autoplay loop muted playsinline preload="metadata"
                               poster="{{ pathto('_static/images/4.jpg', 1) }}" aria-label="Large networks">
                            <source src="{{ pathto('_static/images/4.webm', 1) }}" type="video/webm">
                            <source src="{{ pathto('_static/images/4.mp4', 1) }}" type="video/mp4">
                        </video>
                        <div class="fury-feature-card__caption">force-directed network, animated live</div>
                    </div>
                </div>
                <div class="fury-feature-card__content">
                    <h3 class="fury-feature-card__title">Large networks</h3>
                    <p class="fury-feature-card__description">A large network can be visualized by presenting its
                        interesting parts preferably combined with one or several 'maps' in a multiview display. The
                        main view displays a selected part in details, while the 'maps' provide the user with
                        information about the position of the part inside the network.</p>
                </div>
            </div>

            <!-- Feature 4 -->
            <div class="fury-feature-card fury-feature-card--reverse">
                <div class="fury-feature-card__content">
                    <h3 class="fury-feature-card__title">Real-time simulation</h3>
                    <p class="fury-feature-card__description">This entire flight simulator &mdash; procedural terrain,
                        a composite aircraft, flight physics, and a chase camera &mdash; is roughly
                        <strong>600 lines of Python</strong>, built entirely from FURY primitives and running in a
                        real-time event loop.
                        <a href="https://github.com/fury-gl/fury/blob/master/docs/examples/viz_flight_simulator.py"
                           target="_blank" rel="noopener">Read the tutorial &rarr;</a></p>
                </div>
                <div class="fury-feature-card__visual">
                    <div class="fury-feature-card__image-wrapper">
                        <video autoplay loop muted playsinline preload="metadata"
                               poster="{{ pathto('_static/images/flight.jpg', 1) }}" aria-label="Real-time flight simulator">
                            <source src="{{ pathto('_static/images/flight.webm', 1) }}" type="video/webm">
                            <source src="{{ pathto('_static/images/flight.mp4', 1) }}" type="video/mp4">
                        </video>
                        <div class="fury-feature-card__caption">interactive flight simulator, rendered live</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="fury-sciences">
    <div class="fury-sciences-grid">
        <div class="fury-sciences__header">
            <div class="fury-sciences__title-col">
                <h2 class="fury-sciences__title">Across the sciences</h2>
            </div>
            <div class="fury-sciences__desc-col">
                <p class="fury-sciences__description">The same scene graph handles whatever your field throws at it. Pick a domain for a sample render.</p>
            </div>
        </div>

        <div class="fury-sciences__content">
            <div class="fury-sciences__tabs">
                <button class="fury-sciences__tab active" data-target="engineering">
                    <img src="{{ pathto('_static/images/sc-dom/engineering.svg', 1) }}" class="fury-sciences__tab-icon" alt="">
                    <span>Engineering</span>
                </button>
                <button class="fury-sciences__tab" data-target="physics">
                    <img src="{{ pathto('_static/images/sc-dom/physics.svg', 1) }}" class="fury-sciences__tab-icon" alt="">
                    <span>Physics</span>
                </button>
                <button class="fury-sciences__tab" data-target="chemistry">
                    <img src="{{ pathto('_static/images/sc-dom/chemistry.svg', 1) }}" class="fury-sciences__tab-icon" alt="">
                    <span>Chemistry</span>
                </button>
                <button class="fury-sciences__tab" data-target="astronomy">
                    <img src="{{ pathto('_static/images/sc-dom/astronomy.svg', 1) }}" class="fury-sciences__tab-icon" alt="">
                    <span>Astronomy</span>
                </button>
                <button class="fury-sciences__tab" data-target="aerospace">
                    <img src="{{ pathto('_static/images/sc-dom/aerospace.svg', 1) }}" class="fury-sciences__tab-icon" alt="">
                    <span>Aerospace</span>
                </button>
                <button class="fury-sciences__tab" data-target="biology">
                    <img src="{{ pathto('_static/images/sc-dom/biology.svg', 1) }}" class="fury-sciences__tab-icon" alt="">
                    <span>Biology</span>
                </button>
                <button class="fury-sciences__tab" data-target="data-science">
                    <img src="{{ pathto('_static/images/sc-dom/data-science.svg', 1) }}" class="fury-sciences__tab-icon" alt="">
                    <span>Data science</span>
                </button>
                <button class="fury-sciences__tab" data-target="network-science">
                    <img src="{{ pathto('_static/images/sc-dom/network.svg', 1) }}" class="fury-sciences__tab-icon" alt="">
                    <span>Network science</span>
                </button>
                <button class="fury-sciences__tab" data-target="mathematics">
                    <img src="{{ pathto('_static/images/sc-dom/maths.svg', 1) }}" class="fury-sciences__tab-icon" alt="">
                    <span>Mathematics</span>
                </button>
            </div>

            <div class="fury-sciences__display">
                <div class="fury-sciences__image-wrapper">
                    <video id="fury-sciences-img" autoplay loop muted playsinline preload="metadata"
                           poster="{{ pathto('_static/images/sc-dom/popup/engineering.jpg', 1) }}"
                           src="{{ pathto('_static/images/sc-dom/popup/engineering.mp4', 1) }}" aria-label="Engineering render"></video>
                </div>
                <div class="fury-sciences__text">
                    <h3 id="fury-sciences-title" class="fury-sciences__item-title">Engineering</h3>
                    <p id="fury-sciences-desc" class="fury-sciences__item-desc">Robot-arm kinematics, assemblies and simulation output, animated as scene graphs.</p>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="fury-examples">
    <div class="fury-examples-grid">
        <div class="fury-examples__header">
            <h2 class="fury-examples__title">Start from a working example</h2>
            <p class="fury-examples__description">Every entry is a runnable script from the gallery, not pseudocode.</p>
        </div>

        <div class="fury-examples__cards">
            <a href="{{ pathto('auto_examples/01_introductory/viz_show') }}" class="fury-example-card">
                <div class="fury-example-card__script">viz_show.py <span class="fury-example-card__arrow">&nearr;</span></div>
                <h3 class="fury-example-card__title">A complete first scene</h3>
                <p class="fury-example-card__description">Colored spheres on screen in ten lines of Python.</p>
            </a>
            <a href="{{ pathto('auto_examples/04_demos/viz_streamlines_roi') }}" class="fury-example-card">
                <div class="fury-example-card__script">viz_streamlines_roi.py <span class="fury-example-card__arrow">&nearr;</span></div>
                <h3 class="fury-example-card__title">Tractography streamlines</h3>
                <p class="fury-example-card__description">A streamline bundle filtered through a region-of-interest mask.</p>
            </a>
            <a href="{{ pathto('auto_examples/04_demos/viz_vector_field') }}" class="fury-example-card">
                <div class="fury-example-card__script">viz_vector_field.py <span class="fury-example-card__arrow">&nearr;</span></div>
                <h3 class="fury-example-card__title">Vector fields</h3>
                <p class="fury-example-card__description">Diverging fields as arrows, lines and cross-section slices.</p>
            </a>
            <a href="{{ pathto('auto_examples/04_demos/viz_slicer') }}" class="fury-example-card">
                <div class="fury-example-card__script">viz_slicer.py <span class="fury-example-card__arrow">&nearr;</span></div>
                <h3 class="fury-example-card__title">Volume slicing</h3>
                <p class="fury-example-card__description">Move through 3D image volumes plane by plane.</p>
            </a>
            <a href="{{ pathto('auto_examples/04_demos/viz_skybox') }}" class="fury-example-card">
                <div class="fury-example-card__script">viz_skybox.py <span class="fury-example-card__arrow">&nearr;</span></div>
                <h3 class="fury-example-card__title">Skybox environments</h3>
                <p class="fury-example-card__description">Wrap a scene in a cube-map backdrop.</p>
            </a>
            <a href="{{ pathto('auto_examples/04_demos/viz_spherical_harmonics') }}" class="fury-example-card">
                <div class="fury-example-card__script">viz_spherical_harmonics.py <span class="fury-example-card__arrow">&nearr;</span></div>
                <h3 class="fury-example-card__title">Spherical harmonics</h3>
                <p class="fury-example-card__description">Glyph fields for orientation distribution functions.</p>
            </a>
            <a href="{{ pathto('auto_examples/07_ui/viz_sliders') }}" class="fury-example-card">
                <div class="fury-example-card__script">viz_sliders.py <span class="fury-example-card__arrow">&nearr;</span></div>
                <h3 class="fury-example-card__title">Built-in UI</h3>
                <p class="fury-example-card__description">Sliders, panels and buttons rendered inside the scene.</p>
            </a>
            <a href="{{ pathto('auto_examples/01_introductory/viz_integrate_with_qt') }}" class="fury-example-card">
                <div class="fury-example-card__script">viz_integrate_with_qt.py <span class="fury-example-card__arrow">&nearr;</span></div>
                <h3 class="fury-example-card__title">Qt integration</h3>
                <p class="fury-example-card__description">Embed a FURY canvas inside a PySide6 desktop app.</p>
            </a>
            <a href="{{ pathto('auto_examples/04_demos/viz_contour') }}" class="fury-example-card">
                <div class="fury-example-card__script">viz_contour.py <span class="fury-example-card__arrow">&nearr;</span></div>
                <h3 class="fury-example-card__title">Contour surfaces</h3>
                <p class="fury-example-card__description">Extract and visualize 3D volume surfaces as meshes.</p>
            </a>
        </div>
    </div>
</div>

<div class="fury-cta">
    <div class="fury-cta-grid">
        <div class="fury-cta__content">
            <h2 class="fury-cta__title">One command<br>from your<br>first render.</h2>
            <p class="fury-cta__description">Python 3.10 or newer, on Linux, macOS or Windows.<br>The GPU comes through WebGPU, so there is no driver ceremony.</p>
            <div class="fury-cta__actions">
                <a href="{{ pathto('getting_started') }}" class="btn-cta-primary">Get started</a>
                <a href="{{ pathto('installation') }}" class="btn-cta-secondary">Installation guide &rarr;</a>
            </div>
        </div>
        <div class="fury-cta__terminals">
            <div class="fury-cta__tabs" role="tablist" aria-label="Installation commands">
                <button class="fury-cta__tab active" data-target="terminal-pip" role="tab" aria-selected="true" aria-controls="terminal-pip">pip</button>
                <button class="fury-cta__tab" data-target="terminal-conda" role="tab" aria-selected="false" aria-controls="terminal-conda">conda</button>
                <button class="fury-cta__tab" data-target="terminal-uv" role="tab" aria-selected="false" aria-controls="terminal-uv">uv</button>
            </div>

            <div class="fury-cta__terminal active" id="terminal-pip" role="tabpanel">
                <div class="install-block cta-install-block" data-copy="pip install fury">
                    <span>
                        <span class="install-prompt">$</span> pip install fury
                    </span>
                    <button
                        class="install-block__copy-button"
                        type="button"
                        onclick="homepageCopyToClipboard(this)"
                        aria-label="Copy pip install command to clipboard"
                    >
                        <span class="install-block__copy-label" aria-hidden="true"></span>
                        <i class="fa-regular fa-copy" aria-hidden="true"></i>
                    </button>
                </div>
            </div>

            <div class="fury-cta__terminal" id="terminal-conda" role="tabpanel">
                <div class="install-block cta-install-block" data-copy="conda install -c conda-forge fury">
                    <span>
                        <span class="install-prompt">$</span> conda install -c conda-forge fury
                    </span>
                    <button
                        class="install-block__copy-button"
                        type="button"
                        onclick="homepageCopyToClipboard(this)"
                        aria-label="Copy conda install command to clipboard"
                    >
                        <span class="install-block__copy-label" aria-hidden="true"></span>
                        <i class="fa-regular fa-copy" aria-hidden="true"></i>
                    </button>
                </div>
            </div>

            <div class="fury-cta__terminal" id="terminal-uv" role="tabpanel">
                <div class="install-block cta-install-block" data-copy="uv pip install fury">
                    <span>
                        <span class="install-prompt">$</span> uv pip install fury
                    </span>
                    <button
                        class="install-block__copy-button"
                        type="button"
                        onclick="homepageCopyToClipboard(this)"
                        aria-label="Copy uv install command to clipboard"
                    >
                        <span class="install-block__copy-label" aria-hidden="true"></span>
                        <i class="fa-regular fa-copy" aria-hidden="true"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="fury-community">
    <div class="fury-community-grid">
        <h2 class="fury-community__title">Built in the open</h2>

        <div class="fury-community__columns">
            <div class="fury-community__col">
                <h3 class="fury-community__col-title">
                    <i class="fa-brands fa-github"></i> Contribute
                </h3>
                <p>FURY is BSD-licensed and developed publicly. Issues, pull requests and design discussions all happen on GitHub, and the project mentors students through Google Summer of Code every year.</p>
                <a href="https://github.com/fury-gl/fury" class="fury-community__link">fury-gl/fury on GitHub &nearr;</a>
            </div>
            <div class="fury-community__col">
                <h3 class="fury-community__col-title">
                    <i class="fa-brands fa-discord"></i> Talk to the team
                </h3>
                <p>The maintainers and the GSoC crowd hang out on Discord. Questions about your first scene or your thousandth get answered there, and longer threads live on the mailing list.</p>
                <a href="https://discord.gg/6btFPPj" class="fury-community__link">Join the Discord server &nearr;</a>
            </div>
            <div class="fury-community__col">
                <h3 class="fury-community__col-title">
                    <i class="fa-regular fa-file-lines"></i> Cite FURY
                </h3>
                <p>If FURY supports your research, cite the JOSS paper so the work that funds it stays visible.</p>
                <div class="fury-community__citation">
                    Garyfallidis E., Koudoro S., Guaje J., et al. (2021). <strong>FURY: advanced scientific visualization</strong>. <em>Journal of Open Source Software</em>, 6(64), 3384.
                </div>
            </div>
        </div>

        <h2 class="fury-community__title" style="margin-top: 6rem;">Compatibility &amp; support</h2>

        <div class="fury-community__support-section">
            <h3 class="fury-community__support-title">Plays well with your 3D toolchain</h3>
            <p>The wider 3D ecosystem FURY users pair it with, from DCC suites to game engines.</p>
            <div class="fury-community__logos">
                <div class="fury-community__logo-card"><img src="{{ pathto('_static/images/comp-soft/blender.png', 1) }}" alt="Blender"></div>
                <div class="fury-community__logo-card"><img src="{{ pathto('_static/images/comp-soft/unity.png', 1) }}" alt="Unity"></div>
                <div class="fury-community__logo-card"><img src="{{ pathto('_static/images/comp-soft/autodesk.png', 1) }}" alt="Autodesk"></div>
                <div class="fury-community__logo-card"><img src="{{ pathto('_static/images/comp-soft/adobedimension.png', 1) }}" alt="Dimension"></div>
                <div class="fury-community__logo-card fury-community__logo-card--houdini"><img src="{{ pathto('_static/images/comp-soft/houdini.png', 1) }}" alt="Houdini"></div>
                <div class="fury-community__logo-card fury-community__logo-card--modo"><img src="{{ pathto('_static/images/comp-soft/modo.png', 1) }}" alt="Modo"></div>
                <div class="fury-community__logo-card fury-community__logo-card--sketchup"><img src="{{ pathto('_static/images/comp-soft/sketchup.png', 1) }}" alt="SketchUp"></div>
            </div>
        </div>

        <div class="fury-community__support-section" style="margin-top: 3rem;">
            <h3 class="fury-community__support-title">Supported by</h3>
            <p>Development is backed by Indiana University and Google Summer of Code.</p>
            <div class="fury-community__logos">
                <div class="fury-community__logo-card fury-community__logo-card--luddy"><img src="{{ pathto('_static/images/sponsors/luddy.png', 1) }}" alt="Luddy"></div>
                <div class="fury-community__logo-card"><img src="{{ pathto('_static/images/sponsors/gsoc.png', 1) }}" alt="Google Summer of Code"></div>
                <div class="fury-community__logo-card"><img src="{{ pathto('_static/images/sponsors/iu.png', 1) }}" alt="Indiana University"></div>
            </div>
        </div>
    </div>
</div>

<script src="{{ pathto('_static/js/homepage.js', 1) }}"></script>
{% endblock %}