BaeBox

Shader : 렌더링 효과를 계산하는 명령어. VertexShader : 각 정점의 위치를 계산하는 Shader FragmentShader : 정점들을 이어 선으로 만들었을시 생성되는 면들의 색을 채울 색을 계산하는 Shader. 즉, pixel 그리는 Shader 위 이미지는 Vertex Shader 의 예제이고 아래는 Fragment Shader이다. 위 이미지들을 보면 알겠지만, Vertex Shader의 gl_Position은 정점의 위치를 결정하는 변수, Fragment Shader는 gl_FragmentColor는 면의 색상을 결정하는 변수라는 것을 알 수 있다. 즉, Vertex Shader 와 Fragment Shader의 궁극적인 목적은 gl_Position과 gl_FragmentCol..

clip coordinate(clip space) : clipping에 사용되는 그래픽 파이프라인의 좌표계. 표기단위만 다를 뿐, pixel 좌표 비슷한거다. * clipping : 정의된 영역 내에서 렌더링을 선택적으로 활성화/비활성화 하는 방법.

WebGL : 웹 기반의 그래픽 라이브러리 openGL 같은 녀석인데, 웹에서 동작한다고 생각하면 된다. 엄밀히 정의하자면 'Web 기반의 Rasterization 엔진' 이라고 보면 된다. 매우 쉽게 말하면 그냥 점찍는 툴이다. 반드시 webGL이 필요한게 아니라면 어지간하면 Three.js 쓰는게 낫다. * raster image : 비트맵(bitmap) * Rasterization : 비트맵화(bitmap化) 아래 링크에서 web-gl을 배울 수 있다. https://webglfundamentals.org/webgl/lessons/ko/ WebGL Fundamentals Learn WebGL from the ground up. No magic webglfundamentals.org https://d..

아래 코드 두 개를 참고해서 이런걸 만들어봤다. https://iamdap91.github.io/webgl-globe/ new-webgl-globe iamdap91.github.io https://codepen.io/qkevinto/pen/EVGrGq three.js Earth Wait a bit for the textures to load! Made with the help of http://learningthreejs.com/blog/2013/09/16/how-to-make-the-earth-in-webgl/. Textures from ... codepen.io https://threejsfundamentals.org/threejs/lessons/threejs-indexed-textures.html ..

Picking : 사용자가 터치하거나 클릭한 객체를 파악하는 프로세스. 내가 고른 객체 데이터를 가져오는 방법이라고 생각하자. 처음보면 저걸 어떻게하나 어려워 보이는데, Three.js에서 기본적으로 제공해주는 RayCasting 기능을 사용하면 굉장히 쉽게 구현이 가능하다. 아래 코드는 공식 문서에서 긁어왔다. var raycaster = new THREE.Raycaster(); var mouse = new THREE.Vector2(); function onMouseMove( event ) { // calculate mouse position in normalized device coordinates // (-1 to +1) for both components mouse.x = ( event.clien..

https://github.com/devJang/developer-roadmap devJang/developer-roadmap 2020년 웹 개발자가 되기 위한 로드맵 :kr:. Contribute to devJang/developer-roadmap development by creating an account on GitHub. github.com 개발자 로드맵이다. 트렌드에 뒤처지지 않기 위해 보면 좋다고 한다. 앞으로는 위에 나온 내용을 위주로 포스팅을 해봐야겠다.

https://gist.github.com/ihoneymon/652be052a0727ad59601 마크다운 사용법 마크다운 사용법. GitHub Gist: instantly share code, notes, and snippets. gist.github.com 쩐당.

* node 에서는 기본적으로 class를 사용하지 못하므로 babel을 사용해야 한다. 적용법은 최하단 링크에 있다. 귀찮으면 아래 링크의 git을 clone을 하시면 된다. QuickSort (퀵정렬) : Pivot을 기준으로 좌우 좌측에는 그보다 작은 수만, 우측에는 큰 수만 남기는 방식으로 정렬하는 방법. 평균적인 상황에서 최고의 성능을 가짐. 구현 방법은 간단하다. (* 오름차순 정렬을 한다고 가정한다. ) 전체 범위에서 Pivot을 정한다. Pivot을 기준으로 나뉜 범위를 Partiton 이라고 하겠다. Pivot을 기준으로 작은 수는 왼쪽, 큰 수는 오른쪽으로 넘긴다. 좌/우측 파티션을 각각 1, 2의 과정을 반복한다. https://eyecandyzero.tistory.com/236 퀵 ..

* node 에서는 기본적으로 class를 사용하지 못하므로 babel을 사용해야 한다. 적용법은 최하단 링크에 있다. 귀찮으면 아래 링크의 git을 clone을 하시면 된다. Trie : 트리의 응용 자료구조로, 단어를 찾는데 몹시 효과적이라고 한다. 찾고자 하는 단어의 길이만큼의 시간복잡도를 가진다. 나무위키를 보자. https://namu.wiki/w/%ED%8A%B8%EB%9D%BC%EC%9D%B4 트라이 - 나무위키 이 저작물은 CC BY-NC-SA 2.0 KR에 따라 이용할 수 있습니다. (단, 라이선스가 명시된 일부 문서 및 삽화 제외) 기여하신 문서의 저작권은 각 기여자에게 있으며, 각 기여자는 기여하신 부분의 저작권을 갖습니다. 나무위키는 백과사전이 아니며 검증되지 않았거나, 편향적이거나..

* node 에서는 기본적으로 class를 사용하지 못하므로 babel을 사용해야 한다. 적용법은 최하단 링크에 있다. 귀찮으면 아래 링크의 git을 clone을 하시면 된다. HashSet : Hash를 이용한 Set 기능. 집합이므로 동일한 값들은 무시된다. 그냥 Set 기능 쓰면 되는데... 왜 하느냐!! 그냥... class CustomHashSet { data = {}; length = 0; // _default = new Date(); contains = (val) => { val = val.toString(); return (!!this.data[val] && this.data.hasOwnProperty(val)); }; add = (val) => { if (!this.contains(val..