골유리 굴절

Fluted Glass

반복되는 홈을 통과하듯 입력 화면이 굴절되어 줄무늬와 빛 반사가 생깁니다.

다른 이름: FlutedGlassRibbed glass

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

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

React

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

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

Vue

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

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

Svelte

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

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

Solid

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

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

속성(props) · `FlutedGlass`

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

이름	값	기본값	범위·선택지	설명(원문)
`shape`Shape		bars	bars · rounded · waves	Cross-section shape of each flute
`angle`Angle	0	0	0 – 360 (step 1)	Direction of the flutes in degrees (0 = vertical bars)
`frequency`Frequency	10	10	1 – 20 (step 1)	Number of flutes across the longest viewport axis
`softness`Softness	0.5	0.5	0 – 1 (step 0.01)	How smoothly distortion fades from each flute centre to its edge (0 = flat middle / sharp seams, 1 = gentle curve)
`waveAmplitude`Wave Amplitude	0.06	0.06	0 – 0.5 (step 0.01)	How far each flute sways horizontally as it travels (Waves shape only)
`waveFrequency`Wave Frequency	1.5	1.5	0.1 – 10 (step 0.1)	How many sways fit along each flute (Waves shape only)
`speed`Speed	0	0	-1 – 1 (step 0.01)	Animation speed — drifts the flute pattern over time and flows wave perturbations
`refraction`Refraction	1.5	1.5	0 – 4 (step 0.01)	How aggressively each flute bends content beneath it
`aberration`Aberration	0.2	0.2	0 – 1 (step 0.01)	Chromatic aberration — splits RGB along the refraction direction at flute seams
`lightAngle`Light Angle	30	30	-90 – 90 (step 1)	Direction the light source is coming from (0 = head-on, 90 = grazing)
`highlight`Highlight	0.2	0.2	0 – 2 (step 0.01)	Strength of the specular reflection on each flute
`highlightSoftness`Highlight Softness	0.3	0.3	0 – 1 (step 0.01)	Spread of the specular peak (0 = pin-tight, 1 = broad sheen)
`highlightColor`Highlight Color	#ffffff	#ffffff	—	Color of the specular highlight
`edges`Edges		mirror	stretch · transparent · mirror · wrap	How to handle edges when distortion samples beyond the canvas