성에 낀 얼음

Frost

두께감 있는 얼음 표면에 가장자리부터 안쪽으로 번지는 미세한 성에 결정이 생깁니다.

다른 이름: FrostFrosted iceFrozen glass

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

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

React

// WebGPU 를 지원하는 브라우저에서만 그립니다.
import { Shader, Frost } from 'shaders/react'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: 320 }} disableTelemetry>
      <Frost />
    </Shader>
  )
}

Vue

<!-- WebGPU 를 지원하는 브라우저에서만 그립니다. -->
<script setup lang="ts">
import { Shader, Frost } from 'shaders/vue'
</script>

<template>
  <Shader style="width: 100%; height: 320px" :disable-telemetry="true">
    <Frost/>
  </Shader>
</template>

Svelte

<!-- WebGPU 를 지원하는 브라우저에서만 그립니다. -->
<script>
  import { Shader, Frost } from 'shaders/svelte'
</script>

<Shader style="width: 100%; height: 320px" disableTelemetry>
  <Frost />
</Shader>

Solid

// WebGPU 를 지원하는 브라우저에서만 그립니다.
import { Shader, Frost } from 'shaders/solid'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: '320px' }} disableTelemetry>
      <Frost />
    </Shader>
  )
}

JavaScript

// WebGPU 를 지원하는 브라우저에서만 그립니다.
// <canvas id="canvas" style="width:100%;height:320px"></canvas> 가 페이지에 있어야 한다
import { createShader } from 'shaders/js'

const shader = await createShader(document.getElementById("canvas"), {
  components: [
    {
      type: 'Frost',
    }
  ]
}, { disableTelemetry: true })

속성(props) · `Frost`

값을 바꾸면 위 데모와 코드 탭에 바로 반영됩니다. 설명은 라이브러리 레지스트리의 영어 원문(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 ice shape
`scale`Scale	1	1	0.1 – 3 (step 0.01)	Scale of the ice shape (1 = default size)
`rotation`Rotation	0	0	0 – 360 (step 1)	Rotation of the ice shape in degrees
`iceColor`Ice Color	#0597fc	#0597fc	—	Ice tint — the color deep ice saturates toward (thin edges stay near white)
`ambient`Ambient	0	0	0 – 1 (step 0.01)	Cool ambient fill so shadowed ice never goes black
`edgeSoftness`Edge Softness	0.05	0.05	0 – 1 (step 0.01)	Softness of the shape boundary edge
`density`Density	5	5	0 – 10 (step 0.01)	Optical depth multiplier — how thick and deep the ice reads
`absorption`Absorption	1	1	0 – 2 (step 0.01)	Beer–Lambert absorption strength — higher drives a deeper blue-teal core
`scatter`Scatter	0.5	0.5	0 – 1 (step 0.01)	Forward back-lit glow transmitted through thin ice
`frostAmount`Frost	0.8	0.8	0 – 1 (step 0.01)	Overall density of the rim frost crystals
`frostDepth`Frost Depth	0.4	0.4	0 – 1 (step 0.01)	How far the frost creeps inward from the rim
`frostScale`Frost Scale	1	1	0.3 – 4 (step 0.01)	Crystal size — higher = finer, busier frost
`frostRoughness`Frost Roughness	3	3	1 – 5 (step 0.01)	Feathery roughness of the frost crystal surface
`sparkle`Sparkle	0.5	0.5	0 – 1 (step 0.01)	Tiny bright crystal glints catching the light at the rim
`gloss`Gloss	0.6	0.6	0 – 1 (step 0.01)	Surface sheen — the broad soft icy specular
`fresnel`Fresnel	0.02	0.02	0 – 1 (step 0.01)	Cold rim glow on grazing surfaces
`lightAngle`Light Angle	300	300	0 – 360 (step 1)	Key light direction in degrees
`speed`Speed	0.3	0.3	0 – 2 (step 0.01)	Sparkle twinkle speed. 0 freezes the sparkle.
`shape`Shape	코드에서 지정	{"type":"sphere3D","radius":0.35}	—	Serialized shape configuration (JSON)
`shapeSdfUrl`shapeSdfUrl	코드에서 지정		—	URL to a pre-generated SDF .bin file
`shapeType`shapeType	코드에서 지정		—	Active SDF shape type