반사 바닥

Reflective Plane

입력 아래에 바닥을 만들고 위 콘텐츠를 뒤집어 반사된 모습으로 보여줍니다.

다른 이름: ReflectivePlaneMirror floorReflection plane

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

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

React

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

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: 320 }} disableTelemetry>
      <ImageTexture
        objectFit="cover"
        url="/samples/photo.jpg" />
      <ReflectivePlane />
    </Shader>
  )
}

Vue

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

<template>
  <Shader style="width: 100%; height: 320px" :disable-telemetry="true">
    <ImageTexture
      object-fit="cover"
      url="/samples/photo.jpg"/>
    <ReflectivePlane/>
  </Shader>
</template>

Svelte

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

<Shader style="width: 100%; height: 320px" disableTelemetry>
  <ImageTexture
    objectFit="cover"
    url="/samples/photo.jpg" />
  <ReflectivePlane />
</Shader>

Solid

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

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: '320px' }} disableTelemetry>
      <ImageTexture
        objectFit="cover"
        url="/samples/photo.jpg" />
      <ReflectivePlane />
    </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: 'ImageTexture',
      props: {
        objectFit: 'cover',
        url: '/samples/photo.jpg',
      },
    },
    {
      type: 'ReflectivePlane',
    }
  ]
}, { disableTelemetry: true })

속성(props) · `ReflectivePlane`

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

이름	값	기본값	범위·선택지	설명(원문)
`height`Floor Height	0.7	0.7	0 – 1 (step 0.01)	Vertical position of the reflective surface
`distance`Reflection Distance	0.5	0.5	0.01 – 1 (step 0.01)	How far below the floor the reflection remains visible before fully fading to transparent.
`falloff`Reflection Falloff	0.5	0.5	0 – 3 (step 0.01)	Width of the fade zone, as a fraction of reflection distance.
`blur`Blur	3	3	0 – 5 (step 0.01)	Maximum blur applied to the reflection far from the surface.
`blurDistance`Blur Distance	0.3	0.3	0.01 – 1 (step 0.01)	How far below the surface the blur takes to ramp from sharp to maximum.
`edges`Edges		stretch	stretch · transparent · mirror · wrap	How to handle reflected samples that fall outside the source content.

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

피사체가 광택 있는 바닥 위에 서 있는 것처럼 아래쪽에 거울상이 이어집니다. 반사면 가까이는 선명하고 멀어질수록 흐려지는 바닥 반사를 떠올리면 됩니다.

`height`는 기본 0.7, 범위 0–1로 반사면의 세로 위치를 정합니다. `distance`는 기본 0.5, 범위 0.01–1로 반사가 사라지기까지의 길이를, `falloff`는 기본 0.5, 범위 0–3으로 그 길이 안에서 희미해지는 폭을 조절합니다. `blur`는 기본 3, 범위 0–5로 반사 가장자리의 최대 흐림을, `blurDistance`는 기본 0.3, 범위 0.01–1로 흐림이 강해지는 거리를 정합니다.

투명한 여백이 있는 피사체나 단순한 배경 위 콘텐츠에 적용하면 바닥과 반사를 구분하기 쉽습니다. 드롭 섀도와 함께 쓰면 접지감을 더할 수 있지만, 복잡한 전체 화면 무늬를 입력하면 반사된 내용이 산만해질 수 있습니다.

언제 쓰나

제품·로고·타이포그래피를 반사 바닥 위에 놓은 듯 연출하거나, 단순한 히어로 화면에 깊이를 더할 때 씁니다. 작은 UI나 내용이 빽빽한 사진에서는 피하세요.

속성(props) · ReflectivePlane

함께 보기

드롭 섀도Drop Shadow

글로우Glow

그라디언트 맵Gradient Map

등고선Contour Lines

언제 쓰나

속성(props) · `ReflectivePlane`