Skip to content

Instantly share code, notes, and snippets.

@jmatsushita
Last active September 12, 2023 14:53
Show Gist options
  • Save jmatsushita/64eae23f8f66851294d8c6da100d0aba to your computer and use it in GitHub Desktop.
Save jmatsushita/64eae23f8f66851294d8c6da100d0aba to your computer and use it in GitHub Desktop.
Use.GPU 3d text
import React, { LC, hot, useFiber } from '@use-gpu/live';
import { HTML } from '@use-gpu/react';
import { AutoCanvas, WebGPU } from '@use-gpu/webgpu';
import { DebugProvider, FontLoader, PanControls, Flat, Pass, OrbitCamera, OrbitControls,
PointLight, AmbientLight,
} from '@use-gpu/workbench';
import { UI, Layout, Flex, Block, Inline, Text } from '@use-gpu/layout';
import {
Scene, Node, Mesh, Primitive
} from '@use-gpu/scene';
import { UseInspect } from '@use-gpu/inspect';
import { inspectGPU } from '@use-gpu/inspect-gpu';
import '@use-gpu/inspect/theme.css';
import { makeFallback } from './Fallback';
const FONTS = [
{
family: 'Lato',
weight: 'black',
style: 'normal',
src: '/RobotoMono_400Regular.ttf',
},
];
export const App: LC = hot(() => {
const root = document.querySelector('#use-gpu')!;
const inner = document.querySelector('#use-gpu .canvas')!;
// This is for the UseInspect inspector only
const fiber = useFiber();
return (
<UseInspect fiber={fiber} provider={DebugProvider} extensions={[inspectGPU]}>
{/* WebGPU Canvas with a font */}
<WebGPU
fallback={(error: Error) => <HTML container={inner}>{makeFallback(error)}</HTML>}
>
<AutoCanvas
selector={'#use-gpu .canvas'}
samples={4}
>
<FontLoader fonts={FONTS}>
<Camera>
<Pass>
<AmbientLight intensity={0.2} />
<PointLight position={[-2.5, 3, 2, 1]} intensity={32} />
<Scene>
<Node>
<Primitive>
{/* 2D Layout */}
<UI>
<Layout>
{/* Flex box */}
<Flex width="100%" height="100%" align="center">
<Flex width={500} height={150} fill="#3090ff" align="center" direction="y">
<Inline align="center">
<Text weight="black" size={48} color="#ffffff">-~ Use.GPU ~-</Text>
</Inline>
<Inline align="center">
<Text weight="black" size={16} color="#ffffff" opacity={0.5}>Zoom Who? </Text>
</Inline>
<Inline align="center">
<Text weight="black" lineHeight={2} size={1} color="#ffffff" opacity={0.5}>Zoom Me</Text>
</Inline>
<Inline align="center" snap={false}>
<Text weight="black" lineHeight={1} size={1/16} color="#ffffff" opacity={0.5}>Zoom Me</Text>
</Inline>
</Flex>
</Flex>
</Layout>
</UI>
</Primitive>
</Node>
</Scene>
</Pass>
</Camera>
</FontLoader>
</AutoCanvas>
</WebGPU>
</UseInspect>
);
}, module);
type CameraProps = {
active: boolean,
};
const Camera: LC<CameraProps> = ({active, children}: PropsWithChildren<CameraProps>) => {
return (
<OrbitControls
active={active}
radius={6.5}
bearing={-2.4}
pitch={0.2}
render={(radius: number, phi: number, theta: number, target: vec3) =>
<OrbitCamera
radius={radius}
phi={phi}
theta={theta}
target={target}
>
{children}
</OrbitCamera>
}
/>
);
}
App.displayName = 'App';
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment