여러 셰이더 레이어를 한 컨테이너에 묶어 함께 배치하는 구성 요소입니다.
WebGPU 를 지원하는 브라우저에서 움직입니다
이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다
// WebGPU 를 지원하는 브라우저에서만 그립니다.
import {
Shader,
Circle,
Group,
Star,
} from 'shaders/react'
export default function ShaderEffect() {
return (
<Shader style={{ width: '100%', height: 320 }} disableTelemetry>
<Group>
<Circle
center={{
x: 0.35,
y: 0.5
}}
color="#22d3ee"
radius={0.28} />
<Star
center={{
x: 0.68,
y: 0.5
}}
color="#f59e0b"
radius={0.27} />
</Group>
</Shader>
)
}<!-- WebGPU 를 지원하는 브라우저에서만 그립니다. -->
<script setup lang="ts">
import {
Shader,
Circle,
Group,
Star
} from 'shaders/vue'
</script>
<template>
<Shader style="width: 100%; height: 320px" :disable-telemetry="true">
<Group>
<Circle
:center="{
x: 0.35,
y: 0.5
}"
color="#22d3ee"
:radius="0.28"/>
<Star
:center="{
x: 0.68,
y: 0.5
}"
color="#f59e0b"
:radius="0.27"/>
</Group>
</Shader>
</template><!-- WebGPU 를 지원하는 브라우저에서만 그립니다. -->
<script>
import {
Shader,
Circle,
Group,
Star,
} from 'shaders/svelte'
</script>
<Shader style="width: 100%; height: 320px" disableTelemetry>
<Group>
<Circle
center={{
x: 0.35,
y: 0.5
}}
color="#22d3ee"
radius={0.28} />
<Star
center={{
x: 0.68,
y: 0.5
}}
color="#f59e0b"
radius={0.27} />
</Group>
</Shader>// WebGPU 를 지원하는 브라우저에서만 그립니다.
import {
Shader,
Circle,
Group,
Star,
} from 'shaders/solid'
export default function ShaderEffect() {
return (
<Shader style={{ width: '100%', height: '320px' }} disableTelemetry>
<Group>
<Circle
center={{
x: 0.35,
y: 0.5
}}
color="#22d3ee"
radius={0.28} />
<Star
center={{
x: 0.68,
y: 0.5
}}
color="#f59e0b"
radius={0.27} />
</Group>
</Shader>
)
}// WebGPU 를 지원하는 브라우저에서만 그립니다.
// <canvas id="canvas" style="width:100%;height:320px"></canvas> 가 페이지에 있어야 한다
import { createShader } from 'shaders/js'
const shader = await createShader(document.getElementById("canvas"), {
components: [
{
type: 'Group',
children: [
{
type: 'Circle',
props: {
center: {
x: 0.35,
y: 0.5
},
color: '#22d3ee',
radius: 0.28,
},
},
{
type: 'Star',
props: {
center: {
x: 0.68,
y: 0.5
},
color: '#f59e0b',
radius: 0.27,
},
},
],
}
]
}, { disableTelemetry: true })Group값을 바꾸면 위 데모와 코드 탭에 바로 반영됩니다. 설명은 라이브러리 레지스트리의 영어 원문(MIT)입니다.
이 컴포넌트에는 조절할 속성이 없습니다.
모든 컴포넌트 공통: blendMode · opacity · visible · maskSource/maskType · boundingBox · id
Group은 여러 레이어를 한 묶음으로 정리하는 컨테이너입니다. 책상 위 카드 몇 장을 한 트레이에 담듯, 자식 레이어를 함께 다루면서 전체 장면의 구조를 읽기 쉽게 만듭니다.
`children`에 묶을 레이어를 넣고, `flow`의 `mode`를 `row` 또는 `column`으로 정하면 가로·세로 방향으로 쌓입니다. `gap`은 자식 사이 간격, `align`은 정렬을 다룹니다.
Group은 자체 그림을 만들지 않으므로 보이는 결과는 자식 레이어가 결정합니다. 개별 자식만 효과를 받게 하려면 효과 안에 그 자식들을 넣고, 전체 장면에 적용할 효과는 Group 바깥의 다음 레이어로 둡니다.
복잡한 데모를 하위 묶음으로 나눌 때, 관련 레이어를 한 방향으로 정렬할 때, 특정 효과의 적용 범위를 자식 몇 개로 제한할 때 유용합니다. 레이어가 두세 개뿐이고 별도 정렬이나 범위 구분이 없다면 Group을 추가하지 않아도 됩니다.
