키프레임 트래커

Key Frames

밝기나 색 특징을 따라 움직이는 표시와 궤적의 키프레임 마커를 겹쳐 트래킹 화면처럼 보입니다.

다른 이름: KeyFramesmotion tracking overlaytracker path

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

React

// WebGPU 를 지원하는 브라우저에서만 그립니다.
// /samples/… 는 이 사이트의 샘플 파일입니다. 내 프로젝트의 이미지·영상 경로로 바꾸세요.
import { Shader, KeyFrames, VideoTexture } from 'shaders/react'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: 320 }} disableTelemetry>
      <VideoTexture
        objectFit="cover"
        url="/samples/clip.mp4" />
      <KeyFrames />
    </Shader>
  )
}

Vue

<!-- WebGPU 를 지원하는 브라우저에서만 그립니다. -->
<!-- /samples/… 는 이 사이트의 샘플 파일입니다. 내 프로젝트의 이미지·영상 경로로 바꾸세요. -->
<script setup lang="ts">
import { Shader, KeyFrames, VideoTexture } from 'shaders/vue'
</script>

<template>
  <Shader style="width: 100%; height: 320px" :disable-telemetry="true">
    <VideoTexture
      object-fit="cover"
      url="/samples/clip.mp4"/>
    <KeyFrames/>
  </Shader>
</template>

Svelte

<!-- WebGPU 를 지원하는 브라우저에서만 그립니다. -->
<!-- /samples/… 는 이 사이트의 샘플 파일입니다. 내 프로젝트의 이미지·영상 경로로 바꾸세요. -->
<script>
  import { Shader, KeyFrames, VideoTexture } from 'shaders/svelte'
</script>

<Shader style="width: 100%; height: 320px" disableTelemetry>
  <VideoTexture
    objectFit="cover"
    url="/samples/clip.mp4" />
  <KeyFrames />
</Shader>

Solid

// WebGPU 를 지원하는 브라우저에서만 그립니다.
// /samples/… 는 이 사이트의 샘플 파일입니다. 내 프로젝트의 이미지·영상 경로로 바꾸세요.
import { Shader, KeyFrames, VideoTexture } from 'shaders/solid'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: '320px' }} disableTelemetry>
      <VideoTexture
        objectFit="cover"
        url="/samples/clip.mp4" />
      <KeyFrames />
    </Shader>
  )
}

JavaScript

// WebGPU 를 지원하는 브라우저에서만 그립니다.
// /samples/… 는 이 사이트의 샘플 파일입니다. 내 프로젝트의 이미지·영상 경로로 바꾸세요.
// <canvas id="canvas" style="width:100%;height:320px"></canvas> 가 페이지에 있어야 한다
import { createShader } from 'shaders/js'

const shader = await createShader(document.getElementById("canvas"), {
  components: [
    {
      type: 'VideoTexture',
      props: {
        objectFit: 'cover',
        url: '/samples/clip.mp4',
      },
    },
    {
      type: 'KeyFrames',
    }
  ]
}, { disableTelemetry: true })

속성(props) · `KeyFrames`

값을 바꾸면 위 데모와 코드 탭에 바로 반영됩니다. 설명은 라이브러리 레지스트리의 영어 원문(MIT)입니다.

이름	값	기본값	범위·선택지	설명(원문)
`trackers`Trackers	12	12	1 – 64 (step 1)	Number of simultaneous trackers.
`detect`Detect		bright	bright · dark · alpha · red · green · blue	What the trackers hunt for.
`threshold`Threshold	0.15	0.15	0 – 0.9 (step 0.01)	Feature floor — content scoring below this doesn't count as trackable at all.
`variance`Variance	0.8	0.8	0 – 1 (step 0.01)	Spread of tracker preferences — 0 hunts only the strongest features, 1 distributes trackers across the whole brightness range.
`agility`Agility	0.5	0.5	0 – 1 (step 0.01)	How fast trackers travel and how wide they search.
`lifespan`Lifespan	6	6	0 – 20 (step 0.5)	Seconds a tracker follows its target before retiring and reacquiring elsewhere. 0 = track forever.
`trail`Trail	1	1	0 – 1 (step 0.01)	Visibility of the keyframe trail each tracker leaves behind.
`markerSize`Marker Size	28	28	8 – 80 (step 1)	Tracker gizmo size in pixels.
`lineWidth`Line Width	1.5	1.5	0.5 – 6 (step 0.25)	Stroke width in pixels.
`markerColor`Tracker	#54d66b	#54d66b	—	Tracker gizmo color.
`keyframeColor`Keyframes	#ffcf33	#ffcf33	—	Keyframe diamond color.
`pathColor`Path	#ffffffb8	#ffffffb8	—	Motion path color.

모든 컴포넌트 공통: blendMode · opacity · visible · maskSource/maskType · boundingBox · id

영상 위에 트래커 표시와 이동 경로가 그려지는 편집 화면을 연출합니다. 여러 지점이 화면을 따라 움직이며 키프레임 다이아몬드를 남기는 모습이 보입니다.

`trackers`는 기본 12개이며 1–64에서 동시에 움직이는 표시 수를 정합니다. `detect`의 기본값은 `bright`이며 밝기·어둠·투명도·RGB 중 추적할 특징을 고릅니다. `threshold`는 기본 0.15이며 0–0.9에서 특징으로 인정할 하한을, `agility`는 기본 0.5이며 0–1에서 이동 속도와 탐색 폭을 조절합니다. `lifespan`은 기본 6초이며 0–20에서 한 지점을 따라가는 시간을 정하고 0은 계속 추적합니다.

트래킹할 이미지나 영상 레이어를 먼저 놓으세요. `ObjectTracker`와 함께 쓰면 움직이는 표시와 영역 박스를 모두 보여줄 수 있지만, 결과는 화면 연출로 다루고 실제 촬영·편집 트래킹 데이터가 필요한 작업에서는 별도로 확인하세요.

언제 쓰나

모션 그래픽 설명, 영상 편집기 콘셉트, 트래킹 과정을 보여주는 프레젠테이션에 좋습니다. 실제 촬영본의 정확한 트래킹 데이터를 대체해야 할 때는 피하세요.

속성(props) · KeyFrames

함께 보기

오브젝트 트래커Object Tracker

시간 잔상Time Trail

커서 트레일Cursor Trail

파티클 필드Particle Field

언제 쓰나

속성(props) · `KeyFrames`