엠보싱·디보싱

Emboss

아래 콘텐츠의 윤곽에 빛과 그림자를 더해 양각 또는 음각처럼 보이게 합니다.

다른 이름: EmbossEmboss / debossRelief

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

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

React

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

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

Vue

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

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

Svelte

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

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

Solid

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

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

속성(props) · `Emboss`

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

이름	값	기본값	범위·선택지	설명(원문)
`origin`Origin	코드에서 지정	center	—	Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.
`center`Center	x0.5y0.5	{"x":0.5,"y":0.5}	x, y: 0 – 1	Center position of the embossed shape
`scale`Scale	1	1	0.1 – 3 (step 0.01)	Scale of the embossed shape (1 = default size)
`rotation`Rotation	0	0	0 – 360 (step 1)	Rotation of the embossed shape in degrees
`depth`Depth	-0.5	-0.5	-1 – 1 (step 0.01)	Relief depth — negative = inset (debossed), positive = raised (embossed)
`lightAngle`Light Angle	260	260	0 – 360 (step 1)	Directional light angle in degrees — controls highlight and shadow direction
`lightIntensity`Light Intensity	0.6	0.6	0 – 2 (step 0.01)	Strength of the directional edge highlights and shadows
`shadowIntensity`Shadow Intensity	0.3	0.3	0 – 1 (step 0.01)	Darkness of the relief shadow
`shape`Shape	코드에서 지정	{"type":"sphere3D","radius":0.35}	—	Serialized shape configuration (JSON)
`shapeSdfUrl`shapeSdfUrl	코드에서 지정		—	URL to a pre-generated SDF .bin file — when non-empty, activates SVG mode and triggers a shader recompile
`shapeType`shapeType	코드에서 지정		—	Active SDF shape type — triggers recompile when shape is switched. When empty, derived from shape JSON at mount time.