WebGL로 가는 길

1.GLSL 기초

post-thumbnail

https://thebookofshaders.com/http://editor.thebookofshaders.com/ex) abs(), sin() 등...https://thebookofshaders.com/glossary위 링크에서 확인 가능f

2022년 3월 23일

2.Three.js - Geometry

post-thumbnail

Geometry

2022년 5월 31일

3.Three.js 기초

post-thumbnail

2022년 5월 31일

4.Three.js - Geometry 2

post-thumbnail

라인 네모 라인 sin 그래프 TubeGeometry LatheGeometry - 라인을 그려 회전시켜 면을 생성 인자1: 회전시킬 대상에 대한 좌표 배열 인자2: 분할 수 인자3: 시작각. default: 1 인자4: 연장각. default: 2pi Extr

2022년 6월 2일

5.Three.js - Scene Graph를 이용한 공간 구성

post-thumbnail

삼각형 면으로 구성된 객체선형 객체점x, y, z축에 대한 위치값default: 0x, y, z축에 대한 회전값default: 0x, y, z축에 대한 크기의 배수값default: 1 (1배)

2022년 6월 2일

6.Three.js - Material

post-thumbnail

선에 대한 색상만 지정 가능선의 길이를 참조하여 재질이 적용되므로 선의 길이를 계산해줘야 함MeshPhysicalMaterialMeshToonMaterial

2022년 6월 2일

7.Three.js - Material (Texture)

post-thumbnail

출처 : 유튜브 GIS DEVELOPER https://youtu.be/F4aTwdpFkfwgeometry에 UV좌표 개념으로 맵핑된다.UV좌표는 three.js에서 제공하는 geometry에 기본적으로 지정되어있다.출처 : 유튜브 GIS DEVELOPER h

2022년 6월 3일

8.Three.js - Custom Geometry

post-thumbnail

geometry를 정의하는 클래스.geometry를 구성하는 3차원 좌표에 대한 정점(vertex)각 정점에 대한 수직 벡터(법선 벡터)법선벡터: 광원이 mesh의 표면에 미치는 입사각과 반사각을 계산하여 재질과 함께 표면의 색상을 결정하는데 사용된다.법선 벡터가 있어

2022년 6월 3일

9.Three.js - Light

post-thumbnail

Light 클래스 AmbientLight HemisphereLight 빛의 방향성을 가지는 광원 DirectionalLight PointLight SpotLight RectAreaLight

2022년 6월 6일

10.Three.js - Camera

post-thumbnail

원근감을 표현해 랜더링인자1: fovy - 절두체의 높이 방향에 대한 각도 (던위 deg)인자2: aspect - 절두체의 가로길이를 세로길이로 나눈 비율인자3: zNear - 카메라로부터의 거리(가장 가까운)인자4: zFar - 카메라로부터의 거리(가장 먼)zNear

2022년 6월 6일