threejs (6) 썸네일형 리스트형 [WebGL] 14Island (1. Intuition ~ 전시작) Intro.퇴사 후, 모두의 연구소에서 진행한 "인터렉티브 아트 연구소"에서 전시회를 연다길래 출품하기 위해 무엇을 만들어볼까 하다가, 전부터 Awwwards에서 즐겨보던 에이전시 홈페이지에 있는 수채화 이펙트를 직접 만들어보기로 했다. 처음 봤을때는 그리 크게 어려워 보이지 않았는데, 다음의 시퀀스를 생각했다. 캔버스에 흰색 배경을 깐다마우스 위치에 특정 도형( 원 )을 렌더링 한다.해당 프레임에 대한 텍스쳐를 따온다.텍스쳐를 쉐이더에서 FBM 처리를 한다.다채로운 색감을 위해, 시간에 따라 hsl 을 바꿔서 색감을 입힌다. 여기에 이왕 전시할꺼, 전에 만든 VGesture를 사용하여 포인터 제스처를 추가해보기로 하였다. Implemention들어가기 앞서서, 팁을 하나 주자면, 왠만한 강심장이 .. Shattering Text Animation 제작기 소스코드는 하단에 있습니다 Intro.웹 사이트의 목적은 정보의 전달이 목적이라 생각하고, 텍스트는 가장 직접적인 정보 전달의 수단이기에 개인적으로 텍스트 애니메이션이 들어가면 유독 임팩트가 강하게 느껴집니다. 요즘 소소하게 awwwards 둘러보면서 인사이트를 얻고는 하는데, 사이트가 기억이 안나지만... 스크롤에 따라 파편 상태 -> 하나로 합쳐지는 이미지 애니메이션이 있엇는데 정말 재밌게 반복해서 스크롤링 했었습니다. 그 애니메이션은 2d 이미지를 단순하게 16등분하고 스크롤 위치에 따라 CSS::translate 속성 조절을 통해 하나로 합치는 애니메이션이었는데, 문득 다음과 같은 생각을 하게 되었습니다. 임의의 3d 객체를 임의의 평면으로 쪼갰다가 합치면 재밌겠다 Problem .. [ThreeJs] 선형 색 공간(Linear color space) - sRGB 색보정 최신 버전의 Three.js에선 outputColorSpace가 기본적으로 sRGB이지만, 이전에는 linearColorSpace였다. 이번 글에선 어떻게 선형 색 공간 값을 sRGB에 맞게 보정할 수 있는지 알아보고자 한다. 먼저 왜 sRGB로 보정 해야할까? 왜냐하면 Chorme 이든 Firefox든, 기본적으로 sRGB 색 공간을 사용하고 있기 때문이다. 이전 글 들에서 fragment shader에서 dot 연산과 같은 연산들을 많이 했는데, 이 연산에 경우, sRGB색공간에 대해 열려있다. dot연산의 결과값의 경우 linear color space(선형 색공간)값이기에, 이 값을 그대로 sRGB 공간에서 사 용할 경우, 크게 문제는 없지만, 살짝 부자연스러운 느낌을 준다. 다음과 같은 과정을 .. [WebGL + ThreeJs] 램버시안 조명 (Lambertian Light) 본 글은 이전 ambient & hemi lighting에 대한 확장 글입니다. Three.BasicMaterial의 성질을 갖는 Lambertian Lighting(램버시안 조명)을 구현해 보도록 하겠습니다. varying vec3 vNormal; varying vec3 vPosition; uniform samplerCube specMap; float inverseLerp(float v,float minValue,float maxValue){ return(v-minValue)/(maxValue-minValue); } float remap(float v,float inMin,float inMax,float outMin,float outMax){ float t=inverseLerp(v,inMin,inMax.. [WebGL] Hemisphere Lighting About. https://threejs.org/examples/#webgl_lights_hemisphere three.js examples threejs.org 특정 객체가 두 광원 사이에 존재 할 시, 객체의 정점들에 대해 각 광원과 가깝고 마주볼수록 해당 광원에 영향을 많이 받습니다. 이러한 조명을 구현한 것이 Hemisphere lighting 입니다. 일반적으로 특정 객체에 대해 하늘과 땅에 의해 산란되는 빛을 표현하기 위해 사용됩니다. Implementation. 먼저 Vertex Shader에서 각 정점에 대한 normal Vector(법선 벡터) 정보를 가져와야합니다. 정점의 normal과 광원과의 교차에 따라 산란이 달라지기 때문입니다. varying vec3 vNormal; void m.. [WebGL + Three] Textures (텍스쳐 다루기) 텍스쳐 사용하기 먼저 텍스쳐 정보는 glsl의 내장 타입인 'Sampler2D'로 인식할 수 있습니다. Sampler2D의 경우, 텍스쳐 정보와 텍스쳐 좌표계 (이하, uv 좌표계, uv-coordinate)를 인자로 삼아 각 uv 좌표계에 대응하는 색상 채널값을 반환합니다. 따라서 vec4로 타입캐스팅이 가능합니다. 텍스쳐 정보는 Three.js의 Texture 로더를 통해 이미지를 텍스쳐화 시켜 uniform값으로써, 쉐이더에 넘겨주도록 하겠습니다. const loader = new THREE.TextureLoader(); const texture = loader.load('./concentrated.jpeg'); const material = new THREE.ShaderMaterial({ unif.. 이전 1 다음
