profile
interactive front-end artist

WGSL Syntax

파라미터와 리턴값이 없는 경우.파라미터가 있을 경우 타입을 명시해준다.파라미터와 리턴값이 있을 경우 리턴값의 타입을 명시해준다.

2023년 5월 19일
·
0개의 댓글
·
post-thumbnail

msdf font

webgl작업을 하다보면 만나는 msdf폰트에 대해 알아보자.우선 왜 이런 기술이 나왔을까? 우선 glsl에서는 그냥 쌩으로 폰트를 읽어 올 수 없다. 그래서 폰트를 이미지화 해서 가져와야 하는데, 이럴경우 각각의 크기별로 폰트의 이미지를 만들어야 하는데 이러면 비 효

2023년 4월 18일
·
0개의 댓글
·

glb vs gltf

glb와 gltf는 3d 데이터를 webgl로 불러오는데 많이 사용되는 포맷이다.데이터가 바이너리로 되어 있다.모션 데이터가 같이 묶여있다.데이터가 json형태로 되어 있다.이런차이 때문에 둘 사이에는 용량차이가 발생한다. 사람이 보는거 아니면 glb포맷이 나을것이다.

2023년 4월 9일
·
0개의 댓글
·

vertex shader

2023년 3월 28일
·
0개의 댓글
·
post-thumbnail

post processing

three.js에서 post processing을 사용하면 하나의 pass를 통해서 효과가 부여된 이미지가 전달된다.위와 같이 pass를 통해 다음 pass로 전달이 되는데 이때 사용되는 이름이 'tDiffuse'이다.tDiffuse의 값을 null로 한다는 것은 이전

2023년 3월 27일
·
0개의 댓글
·

svg filter에 대한 이해

canvas에서 svg필터를 사용하여 여러가지 효과를 낼때가 있는데 필터에 대해서 알아둘 필요가 있어서 정리한다.필터는 defs 태그안에 정의해서 사용하는데 filter태그를 만들어 주고 그 안에 fe로 시작되는 적용하고자 하는 필터의 이름을 적어준다.feSpotLig

2023년 3월 1일
·
0개의 댓글
·

File Watchers SCSS

다른사람이 하던 프로젝트를 이어 받아서 하게 되었는데, vscode를 사용해서 작업을 하셨고, scss를 사용하면서 css가 만들어질때 source map을 사용하지 않게 세팅을 하셨다.(source map파일은 있는게 더 좋은데 왜 그런지 모르겠다)나는 intelli

2023년 2월 17일
·
0개의 댓글
·

3d 용어

폴리곤이 실제로 화면에 그려지는 크기에 맞추어 텍스처를 교체하는 기법. 다른 해상도의 텍스처를 공통된 uv좌표로 다룰 수 있게 하려고 실제 텍스처 이미지 크기를 따르지 않고 좌표로 지정한다.

2023년 2월 1일
·
0개의 댓글
·

벡터의 내적과 외적의 응용

벡터의 내적을 이용해서 두 벡터 사이의 각도를 구할 수 있다. 각도가 90도일때 내적이 0이 되므로 직교하는지 판정할 수 있고, $a{x}b{x}+a{y}b{y}+a{z}b{z}=0$ 이 되도록 성분을 조정해 특정 벡터 a에 직교하는 벡터를 만들 수도 있다.$a \\c

2023년 1월 28일
·
0개의 댓글
·

드 모르간의 법칙

전체의 부정은 개개의 부정으로 분해할 수 있다. 단, 그 때 조건 AND는 OR이 되고, OR은 AND가 된다조금만 생각하면 상식적으로 이해하기 쉽다. 하지만, 그냥 외워 버리면 생각하는 시간을 절약할 수 있다.

2023년 1월 22일
·
0개의 댓글
·

shift 연산자

시프트 연산자는 비트단위에서 연산이 이루어 진다.왼쪽 시프트 연산자는 곱하기를 한 효과가 있고, 오른쪽 시프트 연산자는 나누기를 한 효과가 있다.위 식에서 CHIPSIZE를 64라고 하면..이렇게 하는 이유는 십진수를 이진수로 변환해서 계산하고 다시 십진수르 표현하는

2023년 1월 20일
·
0개의 댓글
·

다중 스크롤

화면의 너비를 wv기준 이미지의 너비를 w표시 위치를 결정할 이미지의 너비를 w2기준이 되는 이미지의 위치를 x표시 위치를 결정할 이미지의 위치를 x2라고 하면x2 = (w2 - wv)/(w1 - wv)\*x1

2023년 1월 20일
·
0개의 댓글
·

ScrollTrigger에서 pin사용시 스크롤 튕김현상

gsap에서 만든 scrolltrigger라는 플러그인은 참 유용한 플러그인이다. 하지만, 스크롤을 이용한 모션은 버그가 많이 존재하는것 같다. 팀원분이 페럴럭스 모션을 만들었는데 모바일 브라우져의 하단에서 스크롤이 튀는 현상이 발견되었다.모바일 브라우져는 스크롤이 제

2023년 1월 16일
·
0개의 댓글
·

자바스크립트 랜덤함수 범위지정 이해하기

Math.floor(Math.random() * (max - min + 1)) + min 자바스크립트로 범위를 지정하는 랜덤함수를 구글링해보면 위와 같은 식을 찾을 수 있다. 그냥 가져다 써도 되지만, 이해하면 더 좋지 않을까?

2022년 12월 28일
·
0개의 댓글
·

gitlab에서 특정 폴더만 clone

gitlab에서 클론을 해야 하는데 프론트 작업과 상관없는 오로지 백단 작업과 관련된 폴더들까지 모두 클론이 될때가 있다. 이런 경우를 대비하여 특정 폴더만 클론하는 방법이 존재한다.먼저 폴더를 만든후 깃을 초기화 한다폴더만 받을 수 있도록 설정을 바꿔준다clone할

2022년 12월 2일
·
0개의 댓글
·

node-gyp with python

프로젝트를 클론하고 yarn install을 하니..이런 에러가 생김대충 보니 node-sass가 node-gyp을 이용하는데 node-gyp는 python을 이용하는 상황먼저 node-gyp을 깔아줌brew를 통해 python도 깔아줌.zshrc에 환경변수를 추가해줌

2022년 11월 7일
·
0개의 댓글
·

자바스크립트 논리연산자

&&논리 연산자 ||논리 연산자

2022년 8월 18일
·
0개의 댓글
·

Create a React Application without CRA

리엑트 프로젝트를 CRA(Create React App)명령어를 통해 시작을 하면 세팅이 거의 되어 있어서 좋지만, 프로젝트 후반부에 무언가 설정을 커스텀하게 바꾸려면 세팅 파일이 숨어(?) 있어서 굉장히 어렵다. 물론, 끄집어 낼 수 있지만 그렇게 되면 파일이 복잡하

2022년 8월 17일
·
0개의 댓글
·

Event handling

event를 파라미터로 던지지 않아도 받아 올 수 있다. 하지만, 다른 값을 넘기려면 두번째 파라미터로 전달해야 한다.

2022년 8월 11일
·
0개의 댓글
·

JSX differences

camelCase property naming convention

2022년 8월 11일
·
0개의 댓글
·