웹에서 3D 쉐이더 효과를 「shader-park.js」

 

 

 

 

shader-park는 위와 같이 webgl을 활용하여(three.js)웹에서 3D 쉐이더 효과를 낼 수 있는 라이브러리다. 위와 같은 3D 표현은 three.js나 GLSL 자체 기능으로 가능하지만 shader-park를 사용한다면 아주 간단하게 '흐느적거리는(?)' 폴리곤들을 생성할 수 있다. shader-park DOC는 github에서 확인할 수 있으며, glitch를 통해 웹상에서 실험해 볼 수 있다.

 

 

https://github.com/shader-park/shader-park-core

GitHub - shader-park/shader-park-core: A JavaScript library for creating real-time 2D and 3D shaders. JS -> Shader. https://shad

 

 

그리고 위의 github 문서에는 node.js의 npm관련 install설명만 있지만 CDN방식으로도 가능하다.(상단 블로그에서 구현중) 아래 JSDELIVR에서 CDN을 붙여넣거나 glitch 예제의 unpkg.com의 경로를 import하는 방식이 가능하다. 

 

https://www.jsdelivr.com/package/npm/shader-park-core

jsDelivr - A free, fast, and reliable CDN for Open Source

 

 

 

https://glitch.com/edit/#!/shader-park-template?path=index.html%3A16%3A6 

Glitch Code Editor ･ﾟ✧

 

 

 

shader-park는 창의적이며 감각적인 분야의 웹사이트를 구현하는 분야에서 시선을 사로잡는 용도에 적합하다. 단, 아쉬운 점은 자체 3D소스를 사용할 수 없다는 점인데, 아래와 같이 three.js에서 지원하는 Geometry만을 구현할 수 있다. 

 

 

 

 

 

 

한편, shader-park의 랜더링 엔진은 canvas기반이므로 향후 SVG소스를 활용하는 방향으로 나아간다면, 그 활용분야가 상당히 넓어질 것으로 기대된다.