3차원 그래픽에서 특수 효과는 쉐이더를 통해 대부분 구현됩니다. 이 글은 간단한 GLSL 쉐이더 코드를 통해 물과 불에 대한 효과를 소개합니다.
먼저 불에 대해 구현하고자 하는 모습은 다음과 같습니다.
다음은 물에 대한 결과입니다.
전체 소스코드는 아래 링크를 통해 다운로드 받으실 수 있습니다. 웹기반에서 구현된 코드이므로 js와 css, html 파일로 구성되어 있으며 WebGL 2.0으로 쉐이더 코드가 실행됩니다.
공간정보시스템 / 3차원 시각화 / 딥러닝 기반 기술 연구소 @지오서비스(GEOSERVICE)
선생님 귀중한 자료 감사합니다.
소스 보다보니 코드에 의문이 있어 글을 남깁니다.
app_shaer.js의 35, 36라인의 canvas 객체는 의도적으로 html을 가져 오기 위한것인가요?…아니면 앞에 this를 빼먹으신건가요?
this를 빼먹으면 html의 id=canvas를 객체로서 바라보는 특성이 있는데 그걸 활용하신건가요?
진짜 질문인데요…
shader_fragment 파일들을 보면 glsl로 작성이 됐는데…
이런것들은 코드 어시스트를 어떻게 받으셨나요?
라이브러리 없이 혼자 하나 만들어보려고하는데 이런 부분을 보니 좀 막막하네요…
안녕하세요, 엽기^^토끼님
canvas 객체의 접근은 id=canvas라고 지정되어 있어서 바로 접근할 수 있습니다.
그리고 glsl은 컴퓨터 그래픽 기술 중 난이가 매우 깊은 것 중 하나로.. 저 역시 그 심오한 세계 앞에서 잠시 머뭇대고 있습니다.
glsl이 코드 어시스트는 자동완성이나 코드 미리 보기는 어렵고 코드 문법 색상 지원 정도만 가능합니다.
VS.Code의 경우 glsl 또는 Shader 확장 기능 설치를 통해 가능합니다.