본문 바로가기

분류 전체보기

(68)
[javascript] 불변성(Immutability)을 위한 자료구조적 최적화 Intro. 함수형 프로그래밍을 접하면 아마 '불변성'이란 키워드에 대해서 듣게된다. 말 그대로, 원본 데이터에 대한 변이(Mutation) 과정을 진행하지 않겠다는 의미이다. 대신 변이 과정이 필요하다면, 원본 데이터를 복제 / 수정하여 사용한다. function square(data){ return data.map((d) => d ** 2); // data = [1,2,3] , return -> [1,4,9] } square([1,2,3]) Side Effect 방지 , 참조 투명성을 보장한다 etc.. 다 좋은데 매번 변이 과정이 필요할 때 마다 원본 데이터의 복제가 필요하다니, 메모리 관리 측면에선 정말 최악이란 생각이 든다. 원본 데이터의 크기가 크면 클 수록, 복제를 위한 메모리 & 시간 자원..
[Three.js] case study: m-trust Intro. 최근에 재밌게 보고 있는 유투버 겸 개발자 (Yuri Artikuh) 스트리밍 영상들을 통해 이런 저런 기법들 배우는 게 많아서 영상 따라 공부하며 배운것들을 공유해보자고 한다. 영상에서 얻어간 것은 다음과 같다. 이미지를 어떻게 입자화 시킬 것인가? 입자들에 넣는 반짝이는 이펙트는 어떻게 구현한 것인가? 비디오와 Three.js 간 동기화 + 애니메이션 처리는 어떻게 할 것인가? 안보이는 입자 제거를 통해 gpu성능 최적화 1. 이미지를 어떻게 입자화 시키는가? 3가지 스텝으로 이루어진다. 먼저, geometry 와 material을 일반적인 Mesh에 연결시키는것이 아닌, Points 객체에 연결시킨다. const geometry = new THREE.PlaneGeometry(480 * ..
[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..