@typegpu/react

Getting Started / Documentation

Basic usage

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" />;
};

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.