Shader Atlas
한국어
≈ Distortions

Form 3 D

3D 형태 매핑

The input wraps around a lit 3D shape, turning flat content into a dimensional object.

Also known as: Form3D3D shape wrap

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

React
// Renders only in browsers with WebGPU.
// /samples/… are this site’s sample files — point them at your own image or video.
import { Shader, Form3D, ImageTexture } from 'shaders/react'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: 320 }} disableTelemetry>
      <ImageTexture
        objectFit="cover"
        url="/samples/photo.jpg" />
      <Form3D
        zoom={90} />
    </Shader>
  )
}
Vue
<!-- Renders only in browsers with WebGPU. -->
<!-- /samples/… are this site’s sample files — point them at your own image or video. -->
<script setup lang="ts">
import { Shader, Form3D, ImageTexture } from 'shaders/vue'
</script>

<template>
  <Shader style="width: 100%; height: 320px" :disable-telemetry="true">
    <ImageTexture
      object-fit="cover"
      url="/samples/photo.jpg"/>
    <Form3D
      :zoom="90"/>
  </Shader>
</template>
Svelte
<!-- Renders only in browsers with WebGPU. -->
<!-- /samples/… are this site’s sample files — point them at your own image or video. -->
<script>
  import { Shader, Form3D, ImageTexture } from 'shaders/svelte'
</script>

<Shader style="width: 100%; height: 320px" disableTelemetry>
  <ImageTexture
    objectFit="cover"
    url="/samples/photo.jpg" />
  <Form3D
    zoom={90} />
</Shader>
Solid
// Renders only in browsers with WebGPU.
// /samples/… are this site’s sample files — point them at your own image or video.
import { Shader, Form3D, ImageTexture } from 'shaders/solid'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: '320px' }} disableTelemetry>
      <ImageTexture
        objectFit="cover"
        url="/samples/photo.jpg" />
      <Form3D
        zoom={90} />
    </Shader>
  )
}
JavaScript
// Renders only in browsers with WebGPU.
// /samples/… are this site’s sample files — point them at your own image or video.
// expects <canvas id="canvas" style="width:100%;height:320px"></canvas> on the page
import { createShader } from 'shaders/js'

const shader = await createShader(document.getElementById("canvas"), {
  components: [
    {
      type: 'ImageTexture',
      props: {
        objectFit: 'cover',
        url: '/samples/photo.jpg',
      },
    },
    {
      type: 'Form3D',
      props: {
        zoom: 90,
      },
    }
  ]
}, { disableTelemetry: true })

Props · Form3D

Changes apply to the demo above and to the code tabs. Descriptions come from the library registry (MIT).

NameValueDefaultRange / optionsDescription
shape3dShapeSet in code{"type":"ribbon","angle":0,"twist":50,"width":40,"thickne…—3D shape and its parameters
shape3dTypeshape3dTypeSet in coderibbon—Active shape type — triggers recompile when shape is switched
centerCenter
x0.5y0.5
{"x":0.5,"y":0.5}x, y: 0 – 1Center position of the shape on screen
zoomZoom5010 – 200 (step 1)Camera zoom level
glossinessGlossiness500 – 200 (step 1)Specular highlight intensity and sharpness
lightingLighting500 – 200 (step 1)Overall intensity of lighting effects
uvModeUV Edgesstretchstretch · mirror · wrapHow to handle UV coordinates at shape boundaries
speedSpeed1-10 – 10 (step 0.1)Animation speed — scales all spin rates

Every component also takes blendMode · opacity · visible · maskSource/maskType · boundingBox · id

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Surface 3 D3D 파동 표면

The input drapes over a lit 3D wave surface with visible depth and perspective.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Spherize구면화

The image curves over a sphere, giving the center and edges a rounded sense of depth.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Glass유리 렌즈

A glass lens that refracts content beneath a custom shape and adds a soft luminous edge.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Repeater레이어 반복

One input repeats in a grid, circle, or line, with optional variation between copies.

Like wrapping a flat poster around a ribbon or torus, the input follows the curves of a lit three-dimensional shape.

Choose the shape and its parameters with `shape3d`, then move it with `center`. `zoom` changes the camera framing, `glossiness` changes the strength and sharpness of highlights, and `lighting` controls overall illumination.

The shape needs an input image to show a surface pattern. `uvMode` controls how image coordinates behave at the shape boundary. Small copy can warp over curved surfaces, so use short marks or patterns; choose it over `Surface3D` when the 3D outline is the focus.

When to use

Use it for rotating logos, wrapped patterns, and dimensional hero objects. Avoid it for long copy or content that must preserve a flat aspect ratio.

Open as page ↗