import { d, common } from 'typegpu';
import { hsvToRgb } from '@typegpu/color';
import { useFrame, useRoot, useUniform, useMirroredUniform, useConfigureContext } from '@typegpu/react';

const App = (props: Props) => {
  const time = useUniform(d.f32);
  const color = useMirroredUniform(d.vec3f, props.color);

  const root = useRoot();
  const renderPipeline = useMemo(
    () =>
      root.createRenderPipeline({
        vertex: common.fullScreenTriangle,
        // Executed per pixel on the GPU 🌈
        fragment: ({ uv }) => {
          'use gpu';
          return hsvToRgb(time.$, uv.x, uv.y) * color.$;
        },
      }),
    [root, time, color]
  );
  
  const { ref, ctxRef } = useConfigureContext();

  // Runs each frame on the CPU 🤖
  useFrame(({ elapsedSeconds }) => {
    if (!ctxRef.current) return;
    
    time.write(elapsedSeconds);
    
    renderPipeline.withColorAttachment({ view: ctxRef.current }).draw(3);
  });

  return <canvas ref={ref} className="absolute inset-0" />;
};

React Native

When react-native-worklets is installed, useFrame callbacks must be worklets and run on the UI thread unless the surrounding Root has disableWorklets enabled. See the React Native Worklets guide for the TypeGPU resources that can be captured and transferred between runtimes.

TypeGPU is created by Software Mansion

Since 2012 Software Mansion is a software agency with experience in building web and mobile apps. We are Core React Native Contributors and experts in dealing with all kinds of React Native issues. We can help you build your next dream product – Hire us.