3d logo animation

docs/src/app/(shaders)/logo-3d/layout.tsx

@@ -0,0 +1,9 @@
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: '3d Logo Filter • Paper',
+};
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return <>{children}</>;
+}

docs/src/app/(shaders)/logo-3d/page.tsx

@@ -0,0 +1,133 @@
+'use client';
+
+import { Logo3d, logo3dPresets } from '@paper-design/shaders-react';
+import { useControls, button, folder } from 'leva';
+import { setParamsSafe, useResetLevaParams } from '@/helpers/use-reset-leva-params';
+import { usePresetHighlight } from '@/helpers/use-preset-highlight';
+import { cleanUpLevaParams } from '@/helpers/clean-up-leva-params';
+import { logo3dMeta } from '@paper-design/shaders';
+import { ShaderFit } from '@paper-design/shaders';
+import { levaImageButton } from '@/helpers/leva-image-button';
+import { useState, Suspense, useEffect, useCallback } from 'react';
+import { ShaderDetails } from '@/components/shader-details';
+import { ShaderContainer } from '@/components/shader-container';
+import { useUrlParams } from '@/helpers/use-url-params';
+import { logo3dDef } from '@/shader-defs/logo-3d-def';
+import { toHsla } from '@/helpers/color-utils';
+import { useColors } from '@/helpers/use-colors';
+
+// Override just for the docs, we keep it transparent in the preset
+// logo3dPresets[0].params.colorBack = '#000000';
+
+const { worldWidth, worldHeight, ...defaults } = logo3dPresets[0].params;
+
+const imageFiles = [
+  'contra.svg',
+  'apple.svg',
+  // 'paradigm.svg',
+  'paper-logo-only.svg',
+  // 'brave.svg',
+  // 'capy.svg',
+  // 'infinite.svg',
+  'linear.svg',
+  'mercury.svg',
+  'mymind.svg',
+  'resend.svg',
+  'shopify.svg',
+  'wealth-simple.svg',
+  'chanel.svg',
+  'cibc.svg',
+  'cloudflare.svg',
+  'discord.svg',
+  'nasa.svg',
+  'nike.svg',
+  'volkswagen.svg',
+  'diamond.svg',
+] as const;
+
+const Logo3dWithControls = () => {
+  const [imageIdx, setImageIdx] = useState(-1);
+  const [image, setImage] = useState<HTMLImageElement | string>('/images/logos/diamond.svg');
+
+  useEffect(() => {
+    if (imageIdx >= 0) {
+      const name = imageFiles[imageIdx];
+      const img = new Image();
+      img.src = `/images/logos/${name}`;
+      img.onload = () => setImage(img);
+    }
+  }, [imageIdx]);
+
+  const handleClick = useCallback(() => {
+    setImageIdx((prev) => (prev + 1) % imageFiles.length);
+    // setImageIdx(() => Math.floor(Math.random() * imageFiles.length));
+  }, []);
+
+  const { colors, setColors } = useColors({
+    defaultColors: defaults.colors,
+    maxColorCount: logo3dMeta.maxColorCount,
+  });
+
+  const [params, setParams] = useControls(() => {
+    return {
+      colorBack: { value: toHsla(defaults.colorBack), order: 100 },
+      colorBase: { value: toHsla(defaults.colorBase), order: 102 },
+      lightsSpread: { value: defaults.lightsSpread, min: 0, max: 1, order: 207 },
+      lightsDiffuse: { value: defaults.lightsDiffuse, min: 0, max: 1, order: 209 },
+      lightsSpecular: { value: defaults.lightsSpecular, min: 0, max: 1, order: 210 },
+      lightsShadow: { value: defaults.lightsShadow, min: 0, max: 1, order: 211 },
+      speed: { value: defaults.speed, min: 0, max: 2, order: 300 },
+      scale: { value: defaults.scale, min: 0.2, max: 10, order: 301 },
+      // rotation: { value: defaults.rotation, min: 0, max: 360, order: 302 },
+      // offsetX: { value: defaults.offsetX, min: -1, max: 1, order: 303 },
+      // offsetY: { value: defaults.offsetY, min: -1, max: 1, order: 304 },
+      // fit: { value: defaults.fit, options: ['contain', 'cover'] as ShaderFit[], order: 305 },
+      Image: folder(
+        {
+          'Upload image': levaImageButton((img?: HTMLImageElement) => setImage(img ?? '')),
+        },
+        { order: -1 }
+      ),
+    };
+  }, [colors.length]);
+
+  useControls(() => {
+    const presets = Object.fromEntries(
+      logo3dPresets.map(({ name, params: { worldWidth, worldHeight, ...preset } }) => [
+        name,
+        button(() => {
+          const { colors, ...presetParams } = preset;
+          setColors(colors);
+          setParamsSafe(params, setParams, presetParams);
+        }),
+      ])
+    );
+    return {
+      Presets: folder(presets, { order: -2 }),
+    };
+  });
+
+  // Reset to defaults on mount, so that Leva doesn't show values from other
+  // shaders when navigating (if two shaders have a color1 param for example)
+  useResetLevaParams(params, setParams, defaults);
+  useUrlParams(params, setParams, logo3dDef, setColors);
+  usePresetHighlight(logo3dPresets, params);
+  cleanUpLevaParams(params);
+
+  return (
+    <>
+      <ShaderContainer shaderDef={logo3dDef} currentParams={params}>
+        <Suspense fallback={null}>
+          <Logo3d onClick={handleClick} {...params} colors={colors} image={image} suspendWhenProcessingImage />
+        </Suspense>
+      </ShaderContainer>
+      <ShaderDetails
+        shaderDef={logo3dDef}
+        currentParams={{ colors, ...params }}
+        codeSampleImageName="images/logos/diamond.svg"
+      />
+    </>
+  );
+};
+
+export default Logo3dWithControls;

docs/src/shader-defs/logo-3d-def.ts

@@ -0,0 +1,19 @@
+import { logo3dPresets } from '@paper-design/shaders-react';
+import type { ShaderDef } from './shader-def-types';
+import { animatedCommonParams } from './common-param-def';
+
+const defaultParams = logo3dPresets[0].params;
+
+export const logo3dDef: ShaderDef = {
+  name: '3d Logo',
+  description: 'TBD',
+  params: [
+    {
+      name: 'image',
+      type: 'HTMLImageElement | string',
+      description:
+        'An optional image used as an effect mask. A transparent background is required. If no image is provided, the shader defaults to one of the predefined shapes.',
+    },
+    ...animatedCommonParams,
+  ],
+};

packages/shaders-react/src/index.ts

@@ -115,6 +115,10 @@ export { HalftoneCmyk, halftoneCmykPresets } from './shaders/halftone-cmyk.js';
 export type { HalftoneCmykProps } from './shaders/halftone-cmyk.js';
 export type { HalftoneCmykUniforms, HalftoneCmykParams } from '@paper-design/shaders';
 
+export { Logo3d, logo3dPresets } from './shaders/logo-3d.js';
+export type { Logo3dProps } from './shaders/logo-3d.js';
+export type { Logo3dUniforms, Logo3dParams } from '@paper-design/shaders';
+
 export { isPaperShaderElement, getShaderColorFromString } from '@paper-design/shaders';
 export type { PaperShaderElement, ShaderFit, ShaderSizingParams, ShaderSizingUniforms } from '@paper-design/shaders';
 

packages/shaders-react/src/shaders/logo-3d.tsx

@@ -0,0 +1,145 @@
+import { memo, useLayoutEffect, useState } from 'react';
+import { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';
+import { colorPropsAreEqual } from '../color-props-are-equal.js';
+import {
+  logo3dFragmentShader,
+  ShaderFitOptions,
+  defaultObjectSizing,
+  type Logo3dUniforms,
+  type Logo3dParams,
+  toProcessedLogo3d,
+  type ImageShaderPreset,
+  getShaderColorFromString,
+} from '@paper-design/shaders';
+import { transparentPixel } from '../transparent-pixel.js';
+import { suspend } from '../suspend.js';
+
+export interface Logo3dProps extends ShaderComponentProps, Logo3dParams {
+  /**
+   * Suspends the component when the image is being processed.
+   */
+  suspendWhenProcessingImage?: boolean;
+}
+
+type Logo3dPreset = ImageShaderPreset<Logo3dParams>;
+
+export const defaultPreset: Logo3dPreset = {
+  name: 'Default',
+  params: {
+    ...defaultObjectSizing,
+    scale: 0.7,
+    speed: 1,
+    frame: 0,
+    colorBack: '#000000',
+    colorBase: '#ea05ff',
+    colors: ['#ffea61', '#00ffee'],
+    lightsSpread: 0.4,
+    lightsDiffuse: 1,
+    lightsSpecular: 1,
+    lightsShadow: 0.2,
+  },
+};
+
+export const logo3dPresets: Logo3dPreset[] = [defaultPreset];
+
+export const Logo3d: React.FC<Logo3dProps> = memo(function Logo3dImpl({
+  // Own props
+  colorBack = defaultPreset.params.colorBack,
+  colorBase = defaultPreset.params.colorBase,
+  colors = defaultPreset.params.colors,
+  speed = defaultPreset.params.speed,
+  frame = defaultPreset.params.frame,
+  image = '',
+  lightsSpread = defaultPreset.params.lightsSpread,
+  lightsDiffuse = defaultPreset.params.lightsDiffuse,
+  lightsSpecular = defaultPreset.params.lightsSpecular,
+  lightsShadow = defaultPreset.params.lightsShadow,
+  suspendWhenProcessingImage = false,
+
+  // Sizing props
+  fit = defaultPreset.params.fit,
+  scale = defaultPreset.params.scale,
+  rotation = defaultPreset.params.rotation,
+  originX = defaultPreset.params.originX,
+  originY = defaultPreset.params.originY,
+  offsetX = defaultPreset.params.offsetX,
+  offsetY = defaultPreset.params.offsetY,
+  worldWidth = defaultPreset.params.worldWidth,
+  worldHeight = defaultPreset.params.worldHeight,
+  ...props
+}: Logo3dProps) {
+  const imageUrl = typeof image === 'string' ? image : image.src;
+  const [processedStateImage, setProcessedStateImage] = useState<string>(transparentPixel);
+
+  let processedImage: string;
+
+  if (suspendWhenProcessingImage && typeof window !== 'undefined' && imageUrl) {
+    processedImage = suspend(
+      (): Promise<string> => toProcessedLogo3d(imageUrl).then((result) => URL.createObjectURL(result.pngBlob)),
+      [imageUrl, 'logo3d']
+    );
+  } else {
+    processedImage = processedStateImage;
+  }
+
+  useLayoutEffect(() => {
+    if (suspendWhenProcessingImage) {
+      // Skip doing work in the effect as it's been handled by suspense.
+      return;
+    }
+
+    if (!imageUrl) {
+      setProcessedStateImage(transparentPixel);
+      return;
+    }
+
+    let url: string;
+    let current = true;
+
+    toProcessedLogo3d(imageUrl).then((result) => {
+      if (current) {
+        url = URL.createObjectURL(result.pngBlob);
+        setProcessedStateImage(url);
+      }
+    });
+
+    return () => {
+      current = false;
+    };
+  }, [imageUrl, suspendWhenProcessingImage]);
+
+  const uniforms = {
+    // Own uniforms
+    u_colors: colors.map(getShaderColorFromString),
+    u_colorsCount: colors.length,
+    u_colorBack: getShaderColorFromString(colorBack),
+    u_colorBase: getShaderColorFromString(colorBase),
+    u_image: processedImage,
+    u_lightsSpread: lightsSpread,
+    u_lightsDiffuse: lightsDiffuse,
+    u_lightsSpecular: lightsSpecular,
+    u_lightsShadow: lightsShadow,
+
+    // Sizing uniforms
+    u_fit: ShaderFitOptions[fit],
+    u_scale: scale,
+    u_rotation: rotation,
+    u_offsetX: offsetX,
+    u_offsetY: offsetY,
+    u_originX: originX,
+    u_originY: originY,
+    u_worldWidth: worldWidth,
+    u_worldHeight: worldHeight,
+  } satisfies Logo3dUniforms;
+
+  return (
+    <ShaderMount
+      {...props}
+      speed={speed}
+      frame={frame}
+      fragmentShader={logo3dFragmentShader}
+      mipmaps={['u_image']}
+      uniforms={uniforms}
+    />
+  );
+}, colorPropsAreEqual);

packages/shaders/src/index.ts

@@ -220,6 +220,14 @@ export {
   type HalftoneCmykType,
 } from './shaders/halftone-cmyk.js';
 
+export {
+  logo3dMeta,
+  logo3dFragmentShader,
+  toProcessedLogo3d,
+  type Logo3dParams,
+  type Logo3dUniforms,
+} from './shaders/logo-3d.js';
+
 // ----- Utils ----- //
 export { getShaderColorFromString } from './get-shader-color-from-string.js';
 export { getShaderNoiseTexture } from './get-shader-noise-texture.js';