셰이더 아틀라스
EN
▣ 미디어 입력

텍스트

Text

문구를 글꼴과 정렬 방식에 맞춰 텍스처로 그려, 셰이더 레이어에 텍스트를 얹습니다.

다른 이름: Texttext texturetext layerglyph texture

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

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

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

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

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

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

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: '320px' }} disableTelemetry>
      <Text
        fontFamily="Arial"
        fontSize={0.16}
        fontWeight={700}
        text="Shader Atlas" />
    </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: 'Text',
      props: {
        fontFamily: 'Arial',
        fontSize: 0.16,
        fontWeight: 700,
        text: 'Shader Atlas',
      },
    }
  ]
}, { disableTelemetry: true })

속성(props) · Text

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

이름값기본값범위·선택지설명(원문)
textTextHello World—The text to display (single line)
fontFamilyFont코드에서 지정Inter—Google Fonts family name
fontWeightWeight코드에서 지정400—Font weight (only weights published for the family render true; others are synthesized)
italicItalicfalse—Italic style
textTransformTransformnonenone · uppercase · lowercase · capitalizeCase transformation applied to the text
fontSizeSize0.070.01 – 0.5 (step 0.005)Font size as a fraction of canvas height
letterSpacingLetter Spacing0-0.1 – 0.5 (step 0.005)Letter spacing in em units
lineHeightLine Height1.20.8 – 2.5 (step 0.05)Line height as a multiple of font size (multi-line text)
textAlignAligncenterleft · center · rightHorizontal alignment of lines within the text block
widthMax Width00 – 1 (step 0.005)Wrap width — text wraps to fit; 0 = auto (hug contents, single line per explicit break). Edited via the Typography panel's Auto/Fixed width toggle and the side drag handles, not a slider.
colorColor#ffffff—Text color
originOrigin코드에서 지정center—Reference edge the center position is measured from (center default). Lets you pin the text relative to a corner or the canvas centre.
centerCenter
x0.5y0.5
{"x":0.5,"y":0.5}x, y: 0 – 1Center position of the text
rotationRotation00 – 360 (step 1)Rotation in degrees

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

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

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

캔버스 속 HTMLHTML In Canvas

HTML·DOM 요소를 WebGPU 텍스처 레이어로 그립니다. Chrome Canary와 실험용 기능 플래그가 필요합니다.

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

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

이미지 텍스처Image Texture

이미지를 캔버스에 텍스처로 표시하고, 화면 비율에 맞춰 채우거나 맞춥니다.

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

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

비디오 텍스처Video Texture

비디오를 캔버스의 텍스처로 재생하고, 화면에 맞추거나 반복할 수 있습니다.

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

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

웹캠 텍스처Webcam Texture

웹캠의 실시간 영상을 텍스처로 보여 주며, 셀피처럼 좌우 반전할 수 있습니다.

포스터에 제목을 인쇄하듯 문구를 캔버스 위에 그립니다. 텍스트도 다른 셰이더 레이어처럼 색을 바꾸거나 왜곡·블러 효과를 적용할 수 있습니다.

`text`에 표시할 문구를 넣고 `fontFamily`로 글꼴을 고릅니다(기본값 `Inter`). `fontSize`는 캔버스 높이의 비율이며 기본값은 `0.07`, 범위는 `0.01`~`0.5`입니다. `width`는 줄바꿈 너비로 기본값 `0`은 내용에 맞춘 자동 너비입니다(범위 `0`~`1`). `textAlign`은 여러 줄의 가로 정렬을 `left`, `center`, `right` 중에서 고릅니다.

텍스트를 직접 그리는 생성기라 뒤에 놓은 효과가 글자에 적용됩니다. 본문처럼 선택·복사하거나 스크린 리더로 읽어야 하는 문구는 HTML 텍스트로도 제공하세요. 캔버스 안의 글자는 문서의 실제 텍스트를 대신하지 않습니다.

언제 쓰나

짧은 제목·라벨·키네틱 타이포그래피, 글자에 그라디언트나 왜곡을 입히는 장면에 좋습니다. 긴 문장이나 선택·검색·접근성 트리에서 실제 텍스트로 인식되어야 하는 콘텐츠에는 피하세요.

페이지로 열기 ↗