셰이더 아틀라스
EN
▒ 노이즈

가버 노이즈

Gabor Noise

지문처럼 방향이 잡힌 가는 물결 결이 모이는 노이즈입니다.

다른 이름: GaborNoiseoriented noisefingerprint noise

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

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

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

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: 320 }} disableTelemetry>
      <GaborNoise />
    </Shader>
  )
}
Vue
<!-- WebGPU 를 지원하는 브라우저에서만 그립니다. -->
<script setup lang="ts">
import { Shader, GaborNoise } from 'shaders/vue'
</script>

<template>
  <Shader style="width: 100%; height: 320px" :disable-telemetry="true">
    <GaborNoise/>
  </Shader>
</template>
Svelte
<!-- WebGPU 를 지원하는 브라우저에서만 그립니다. -->
<script>
  import { Shader, GaborNoise } from 'shaders/svelte'
</script>

<Shader style="width: 100%; height: 320px" disableTelemetry>
  <GaborNoise />
</Shader>
Solid
// WebGPU 를 지원하는 브라우저에서만 그립니다.
import { Shader, GaborNoise } from 'shaders/solid'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: '320px' }} disableTelemetry>
      <GaborNoise />
    </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: 'GaborNoise',
    }
  ]
}, { disableTelemetry: true })

속성(props) · GaborNoise

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

이름값기본값범위·선택지설명(원문)
colorAColor A#ffffff—First color
colorBColor B#000000—Second color
stopsColors코드에서 지정null—Multi-stop gradient colors (overrides Color A / Color B when set)
colorSpaceColor Spacelinearlinear · oklch · oklab · hsl · hsv · lchColor space for color interpolation
scaleScale1.5-2 – 5 (step 0.1)Pattern scale (higher = finer, more detailed patterns; each +1 roughly doubles the frequency)
frequencyFrequency81 – 24 (step 0.5)Frequency of the oriented waves within each cell
contrastContrast0-1 – 5 (step 0.1)Pattern contrast (higher = sharper transitions)
balanceBalance0-1 – 1 (step 0.05)Balance between colors (negative = more colorB, positive = more colorA)
seedSeed00 – 100 (step 1)Random seed for pattern variation
speedSpeed10 – 5 (step 0.1)Animation speed

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

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

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

블루 노이즈Blue Noise

고른 간격으로 흩어진 알갱이 무늬를 만드는 고주파 노이즈입니다.

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

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

웨이블릿 노이즈Wavelet Noise

띠 모양의 물결 무늬가 회전하며 잔물결처럼 움직입니다.

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

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

펄린 노이즈Perlin Noise

색이 부드럽게 번지는 구름 같은 무늬가 시간에 따라 천천히 바뀝니다.

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

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

침식 노이즈Erosion Noise

물길이 표면을 깎은 듯 갈라지는 능선 무늬를 만듭니다.

지문이나 빗살무늬를 가까이 본 것처럼, 가는 결이 일정한 방향을 따라 모여 있습니다. 둥근 얼룩보다 결의 방향성이 잘 보이는 질감입니다.

`scale`은 기본값 1.5, 범위 -2–5이며 높이면 무늬가 더 가늘고 촘촘해집니다. `frequency`는 기본값 8, 범위 1–24로 셀 안의 물결 수를 조절하므로 높일수록 결이 촘촘해집니다. `contrast`는 기본값 0, 범위 -1–5이며 높이면 색 전환이 선명해집니다. `balance`는 기본값 0, 범위 -1–1로 두 색의 비중을 옮깁니다. `speed`는 기본값 1, 범위 0–5로 무늬가 변하는 속도를 바꿉니다.

캔버스에 직접 그리는 생성 레이어입니다. `BlueNoise`와 함께 입자 크기가 다른 결을 만들거나 단독으로 방향성 있는 배경을 구성할 수 있습니다. 작은 글자 뒤에서는 촘촘한 결이 가독성을 낮출 수 있으니 `frequency`와 `contrast`를 낮춰 보세요.

언제 쓰나

지문·결이 있는 추상 배경, 방향성 있는 재질 표현, 천천히 움직이는 가는 무늬에 좋습니다. 부드럽고 방향이 없는 색 얼룩을 원할 때는 피하세요.

페이지로 열기 ↗