본문 바로가기
반응형

전체 글355

color warping mat2 rotate(float a) { return mat2(cos(a), -sin(a), sin(a), cos(a));}void mainImage( out vec4 fragColor, in vec2 fragCoord ){ vec2 uv = fragCoord / iResolution.xy; uv = uv * 2.0 - 1.0; uv.x *= iResolution.x / iResolution.y; float t = iTime; // ------- 중심 회전 추가 ------- float rotSpeed = 0.1; uv = rotate(sin(t) * rotSpeed) * uv; // ------- 좌표 워핑 ------- .. 2025. 12. 1.
fBM에 대한 정리 1. fBM 이란 fBM은 fractional Brown Motion의 약자이다. 대충 아래의 형태의 수식을 얘기한다 By adding different iterations of noise (octaves), where we successively increment the frequencies in regular steps (lacunarity) and decrease the amplitude (gain) of the noise we can obtain a finer granularity in the noise and get more fine detail. This technique is called "fractal Brownian Motion" (fBM), or simply "fractal nois.. 2025. 11. 19.
패턴을 위한 fract와 floor함수 https://thebookofshaders.com/09/ The Book of ShadersGentle step-by-step guide through the abstract and complex universe of Fragment Shaders.thebookofshaders.com 1. fract와 floor fract는 fraction 즉 분수를 의미한다. 숫자를 넣으면 소수부분을 리턴한다 floor는 소수부분을 날려버린 정수부분을 의미한다. 2. 패턴을 만들때 어떻게 쓰이나? 가로 세로로 5x5를 만들고 싶다면, 먼저 normalized된 좌표에 숫자 5를 곱한다.그리고 fract를 uv에 취하면 해당 타일에 대한 uv값을 얻을 수 있다vec2 uv_tile = fract(uv * 5... 2025. 11. 18.
smoothstep으로 선그리기 https://thebookofshaders.com/05/ The Book of ShadersGentle step-by-step guide through the abstract and complex universe of Fragment Shaders.thebookofshaders.com 쉐이더북에 나온 내용 이해하려고 정리 먼저 smoothstep은 아래와 같은 형태다 smoothstep(val1, val2, 변수); va1 이전에는 값이 0이고, val1~val2에서는 부드럽게 0~1값범위이고 val2이후부터는 1임. 만약 val1이 val2보다 크다 한다면, 예를들어 smoothstep(3, 3-0.02, x); 3보다 큰값에는 0이고 2.98 이하로는 1이다. 방향만 틀었다고 이해하자. .. 2025. 11. 17.
React Native Skia에서 uniform에 애니메이션 주기 useValue가 없어 져서 헤맸다. 결론부터 말하면 reanimated를 써야한다. useSharedValue로 값을 만들고 useDerivedValue로 uniforms를 만들어야 한다. 그리고 uniforms를 캔버스에 넘겨줄때 value말고 변수명 그대로 넘겨주면 된다. import { Canvas, Fill, Shader, Skia, vec } from "@shopify/react-native-skia";import { useWindowDimensions, View } from "react-native";import { Gesture, GestureDetector } from "react-native-gesture-handler";import { useDerivedValue, useShar.. 2025. 11. 10.
SDF 응용 - 선 그리기 1. 선 기본 개념 sdf에서 보통 도형의 안쪽이면 음수, 경계면이면 0, 바깥이면 양수다애초에 선은 안쪽이 없기때문에 0~ 양수 범위만 가진다. 어쨋든 sdf 기본개념인 점에서 내가 원하는 모형까지의 거리를 구하는 개념은 똑같으므로 선까지 거리를 구해보자. 선을 그릴때는 아래 세개의 점이 필요하다쉐이더의 인풋으로 들어오는 점직선의 시작점직선의 끝점 인풋으로 들어오는 점에서 직선까지의 거리는 아래처럼 내적으로 표현 가능하다. float sdLine(vec2 pos, vec2 a, vec2 b) { vec2 ap = pos - a; vec2 ab = b - a; float h = clamp(dot(ap, ab) / dot(ab, ab), 0.0, 1.0); return length(ap - a.. 2025. 11. 9.
SDF(Signed Distance Function)이란 1. SDF란? 거리를 기반으로 도형을 표현하는 수학적 방법이다. 가령 아래 코드는 0,0에서 1만큼 떨어진 원을 나타내는 코드이다. float sdfCircle(vec2 p) { return length(p) - 1.0;} 여기서 중요한건 sdf에서는 안쪽은 항상 음수로 잡고, 바깥쪽은 양수로 잡는다는점이다. 다양한 sdf함수는 아래 페이지에서 공부할 수 있다. https://iquilezles.org/articles/ Inigo Quilez :: computer graphics, mathematics, shaders, fractals, demoscene and more iquilezles.org 2. SDF의 강점 sdf는 min max 함수와 부호를 이용해서 도형을 조합할 수 .. 2025. 11. 6.
RN에서 네이티브 코드 불러오기 1. expo module 플러터에서는 네이티브 코드를 호출하려면 메소드 채널, 이벤트 채널이라는걸 사용했는데 rn에서는 모듈이라는걸 사용한다. 먼저 프리빌드를 한 뒤 모듈을 설치해준다 npx expo prebuildnpx create-expo-module@latest --local 2. module의 구조 모듈을 설치하면 아래와 같은 폴더구조가 생긴다 module/ 모듈폴더/ android/ 네이티브모듈.kt 네이티브뷰.kt ios/ 네이티브모듈.swift 네이티브뷰.swift src/ 타입스크립트.types.ts 타입스크립트모듈.ts expo-module.config.json index.ts 여기서 index.t.. 2025. 11. 6.
flutter개발자의 RN 애니메이션 적응하기 애니메이션은 플러터가 짱이라고 생각했는데 RN도 공부를 해보니 깊게 파면 RN이 훨씬 더 좋은거 같다.플러터는 0~1이라는 변화만 주면 이걸 이용해서 내맘대로 커스텀하기 쉽지만 코드가 좀 읽기 어렵고 재사용이 쉽지 않다.플러터의 경우 스타일링을 여러 위젯을 조합해서 만드는데 각 위젯마다 각기 다르게 값을 물려줘야 하니깐 좀 어렵다. RN의 경우 스타일링은 css로 전부 처리하기 때문에 css코드 부분만 잡으면 장땡이다. 게다가 자바스크립트 스레드와 애니메이션 스레드(ui스레드)가 확실하게 분리되어있어 성능에도 이점이 있는거 같다. 1. implicit animation, expilicit animation사실 rn에서는 이를 명확하게 구분하지는 않음.플러터처럼 0~1이라는 명확한 범위의 변화를 강조.. 2025. 11. 5.
반응형

티스토리툴바