Skip to content

[#460] 행사 배치도 카드 배경 Shader 구현 (Layered Radial Gradient 쉐이더 코드 작성)#467

Merged
workspace merged 3 commits into
droidknights:2025/compose-multiplatformfrom
easternkite:feature/#460-add_layered_radial_gradient_background
Jun 1, 2025
Merged

[#460] 행사 배치도 카드 배경 Shader 구현 (Layered Radial Gradient 쉐이더 코드 작성)#467
workspace merged 3 commits into
droidknights:2025/compose-multiplatformfrom
easternkite:feature/#460-add_layered_radial_gradient_background

Conversation

@easternkite

Copy link
Copy Markdown

Issue

Overview (Required)

행사 배치도 카드 배경을 Shader로 작성해보았습니다. 랜더링 되는 원의 크기는 레이아웃의 width 길이에 비례하여 반응적으로 조정되도록 처리했습니다.
추가적으로, 카드 컴포넌트 색상관련해서 기존엔 colorScheme으로 처리되고 있었는데요, 요건 차후 다크모드일 때도 일관적인 색상 유지를 위해 고정 색상으로 할당해두었습니다.

확인 부탁드립니다.

알게된 사실

sksl코드에서 색상을 리턴할 때, Non-Android 타겟에서 일반적인 방법으로 투명도가 안먹는 케이스가 존재했습니다.
요 때는 각각 RGB색상에 투명도를 곱해주어야 한다는 사실을 알았습니다.

AS-IS

return half4(1.0, 1.0, 1.0, opacity);

TO-BE

return half4(1.0 * opacity, 1.0 * opacity, 1.0 * opacity, opacity);

Screenshot

image

@workspace workspace left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@easternkite LGTM! 마지막(?) 어마무시한 배경 shader도 작업하신다면, 어떻게 하실지 너무 궁금하네요 ㅎㅎ 수고하셨습니다!

@easternkite

Copy link
Copy Markdown
Author

@workspace
요것도 우선 Compose Canvas로 3겹 그라데이션 Circle을 만든 다음에, GPT와 함께 작업하였는데요 ㅎㅎ
그 어마무시한 것도 우선 Canvas로 그라데이션 타원형을 먼저 만들어 놓은 다음에 sksl 작업 진행할 것 같습니다.

재미있는 제안 주셔서 감사합니다~~

@workspace workspace merged commit 8fded6a into droidknights:2025/compose-multiplatform Jun 1, 2025
8 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants