본문 바로가기

WebGL

(10)
[WebGL] 14Island - 2. 디컴파일 먼저 순수하게 번들링 파일을 까보자. 난독화가 되어있어서 알아보기 힘들지만, 난독화의 경우, 객체의 멤버 혹은 메소드 혹은 원시값들은 변형시킬 수 없다. 이 성질을 이용해 추론해보자. 먼저 DOM 상, canvas id의 three.js 특유의 흔적이 남아있어서, threejs를 사용했다는 사실은 자명하다.   문제는 에이전시라 그런지, 온갖 파트에 canvas를 떡칠해놓았다. 즉, 번들링 된 코드 상에서도 상당히 많은 three.js 코드들이 있다는 뜻인데... 분명 fbm을 썼을 테니, fbm을 키워드 삼아 검색해보았다.  (헤헤... 찾았다)  변수 이름들 보아하니, j.g가 shaderMaterial을 선언하는 부분인듯 하다. 그 뜻은 이 주위에 render 관련 메서드가 있다는 뜻이다. 아니나 ..
[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..
[Graphics] 조도(Irradiance)와 휘도(Radiance) 배경지식 : 2d angle & Solid angle 2d angle, 즉, 중 고등학교 시간 때 흔히 사용하던 호도법 (radian)은 2차원 상에서 각도를 표현할 때, (원 호) / (반지름)의 형태로 정의한다. (원 호) , (반지름) 둘다 같은 단위기에, 차원에 물리적 단위가 존재하진 않는다. 3차원 상의 구에 대해서도 비슷한 개념이 존재하는데, 이를 입체각(solid angle), 단위는 스테라디안(steradian)으로 삼는다. 라디안의 개념을 3차원으로 확장했다고 생각하면 된다. 정의에 따라, 입체각 dω는 다음과 같다. 그럼 표면에 입사하는 빛의 입사각은 다음과 같은 그림으로 나타낼 수 있다. 평면 위 입사 영역 dA, dA의 법선 벡터 n, 광원과 법선 벡터사잇각 θ, 입체각 dω라 할..
[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] Ambient light Ambient Light란? Ambient Light, 주변광은 일반적으로 Scene의 전체적인 밝기와 색상을 정의하는데 사용합니다. 실세계의 빛을 컴퓨팅하기엔 굉장히 많은 변수들이 존재하고, 또 이를 구현한다하더라도 소모되는 컴퓨팅 자원이 굉장히 부담스럽기 때문에, 실세계와 상당히 근사한 조명 모델을 사용하여 조명을 구현합니다. 일반적으로 나무의 색상은 갈색이지만, 위 사진에선 거의 검정색으로 보입니다. 그 이유는 나무의 색상, 즉 나무에 의해 반사된 빛 뿐만 아니라 흙, 물, 등 수많은 광원들에 의해 산란된 빛의 영향을 받고, 애당초 흔히 가정하는 빛의 색상(#ffffff)이 구름에 의해 반사되어, 상당히 어둡습니다. 뿐만 아니라 여러 요인들이 더 있지만, 이정도만 해도 컴퓨팅하는데 있어서 꽤나 많은..
[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..
[WebGL + Three.js] GLSL - colors Intro. 음.. glsl에 대해 검색하시는 분들이 어떤 용도로 glsl에 대해 찾아볼까 생각하다가 (학술, 실무 etc..) 결론적으로 어찌되었든 그래픽 관련된 이슈 때문이겠지요? 그래서 가장 첫 주제로는 color에 대해 이야기 해 보려합니다. 참고로 테스팅 환경은 Three.js를 기반으로 사용했습니다. 아래 링크들을 통해 테스팅 환경을 구현해 보세요! https://threejs.org/docs/#api/en/materials/ShaderMaterial three.js docs threejs.org https://gist.github.com/kylemcdonald/9593057 Minimal three.js shader example. Minimal three.js shader example. ..