Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://docs.pmnd.rs/uikit/advanced/performance below:

Performance - uikit

Important considerations for building performant user interfaces with uikit.

When frequently changing properties of uikit components and especially when animating properties on every frame. We recommend modifying properties using ref.current.setStyle or using a signal.

This approach is similar to html/css. The following code shows how to animate the background opacity on every frame without interfering with react.

import { Container } from '@react-three/uikit'
import { useMemo } from 'react'
import { useFrame } from '@react-three/fiber'
import { signal } from '@preact/signals-core'

export function AnimateBackground() {
    const ref = useRef()
    useFrame(({ clock }) => {
        //continuously animate between 0 and 1
        ref.current.setStyle({ opacity: Math.sin(clock.getElapsedTime()) / 2 + 0.5 })
    })
    return <Container ref={ref} backgroundOpacity={0}></Container>
}

Setting executing setStyle(undefined, true) resets all changes back to the initial properties provided to the directly to the component.

This approach is similar to react-spring and allows to modify the properties of a uikit component without any property diffing. The following code shows how to animate the background opacity on every frame without interfering with react.

import { Container } from '@react-three/uikit'
import { useMemo } from 'react'
import { useFrame } from '@react-three/fiber'
import { signal } from '@preact/signals-core'

export function AnimateBackground() {
    const opacity = useMemo(() => signal(0), []);
    useFrame(({ clock }) => {
        //continuously animate between 0 and 1
        opacity.value = Math.sin(clock.getElapsedTime()) / 2 + 0.5
    })
    return <Container backgroundOpacity={opacity}></Container>
}

The amount of different Material Classes used, directly influences the amount the draw calls. For every new material class, a new draw call has to be on every render. Therefore, we recommend using as little as possible different custom material classes.

Like the material classes, each new font family directly results in one additional draw call. Therefore, minimizing the amount of font families is recommended for GPU Performance.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4