# WebGL
three.js 입문
3D로 움직이는 웹사이트에 관심이 생겼고, 그것이 바로 thress.js라는 라이브러리로 사용이 가능하다고 알게되어, 바로 온라인 강의를 신청하였다. three.js에서는 스크립트를 불러올 때 모듈방식으로 많이 불러온다고 한다. (물론 일반 자바스크립트에서도 유용)많은
자체 제작 3D 렌더러 제작기 episode 6. OBJ & MTL과 큰 그림 그리기
OBJ: Wave Front 사에서 만든 그래픽스 모델 규격파일 안에는 정점위치, 노멀 벡터 위치, 텍스처 좌표가 기록되어져있다.해당 폴리곤이 어떤 재질을 선택하고 있는지는usemtl 이라는 키워드로 지시하고 있다.mtl은 재질의 성질, 텍스처 정보를 담고있는 파일이다
자체 제작 3D 렌더러 제작기 episode 5. OBJ & MTL 파서 만들기 -0
OBJ: Wave Front 사에서 만든 그래픽스 모델 규격이다.MTL: OBJ 파일의 재질을 담는 파일이다.현재 도전하고 있는건 OBJ, MTL 파일을 읽어 WebGL로 화면에 띄우는걸 목표로 만들고 있다.원래는 라이브러리를 사용할려고 했는데... 마땅한 라이브러리가
자체 제작 3D 렌더러 제작기 episode 4. 3D 정육면체 렌더링
source code: https://github.com/lacomaco/laco3DRenderer구성해둔 구조에서 3D 정육면체를 렌더링하고 회전시켜봤다.UV 좌표를 잘못 설정해서 찢어지는 부분이 있는데 이 부분은 쉽게 수정할 수 있고 지금 해야할일이 너무
자체 제작 3D 렌더러 제작기 episode 3. Perspective Projection
Source code: https://github.com/lacomaco/laco3DRendererPerspective Projection 구현 전에 간단한 Back face culling, orthogonal projection도 확인하고 작업에 들어갔다.간
자체 제작 3D 렌더러 제작기 episode 2. webgl과 친숙해지기
이전 이야기 : https://velog.io/@lacomaco/%EC%9E%90%EC%B2%B4-%EC%A0%9C%EC%9E%91-3D-%EB%A0%8C%EB%8D%94%EB%9F%AC-%EC%A0%9C%EC%9E%91%EA%B8%B0-episode-1.-%ED%8F
자체 제작 3D 렌더러 제작기 episode 1. 포부
건강이 나빠져서 퇴사하였다.퇴사후 내가 들고있던 급한 일들을 해결하고 드디어 나에게 투자할 시간을 확보하였다.그 시간을 좀 더 효율적으로 타이트하게 관리할 수 있도록 지금 만들고 잇는 3D 렌더러 제작기를 블로깅 하고자 한다.이 블로깅은 정보전달이 목표가 아니고 내가
Playcanvas 로 웹에 3D 띄우기- 1
안녕하세요오늘은 Playcanvas 로 웹 상에서의 3D를 구현해보도록 하겠습니다.Three.js 만 하다가 하니까 굉장히 편하고 좋습니다 따봉 Playcanvas 와 Three.js 의 차이점으로는 Playcanvas 는 웹 게임 엔진이고 Three.js는 3D 그래
WebGL 개요 및 실습
OpenGL : Open Graphics Library컴퓨터 그래픽스를 위한 교차 플랫폼 2D 및 3D 그래픽 라이브러리다.GPU를 이용하여 하드웨어 가속화를 통해 렌더링을 해2D,3D 그래픽을 표현한다.OpenGL의 성능은 CPU 보다는 GPU가 좌우하는데 그 이유가
웹 사이트에서 멋있게 3D 모델을 적용해보자!
Three.js는 웹페이지에 3D 객체를 쉽게 랜더링할 수 있도록 도와주는 Javascript 3D 라이브러리
WebGL Shader: Fragment Shader
출처: webglfundamentals.org 사이트해당 사이트의 내용과 설명이 필요한 개념들을 추가하여 재구성한 내용입니다.
WebGL Shader : Vertex Shader
출처: webglfundamentals.org 사이트해당 사이트의 내용과 설명이 필요한 개념들을 추가하여 재구성한 내용입니다.WebGL은 뭔가를 그릴 때마다 2개의 셰이더를 필요로 한다.바로 Vertex Shader와 Fragment Shader이다.각각의 셰이더는 함
WebGL 시작하기
모든 출처: webglfundamentals.org 사이트WebGL 은 종종 3D API로 여겨진다.사실 WebGL 은 래스터화 엔진에 불과하다.래스터화 Rasterization3D 그래픽을 2D 화면에 표시하기 위해 정점을 픽셀로 변환하는 과정WebGL 은 컴퓨터에
WebGL의 작동방식
모든 출처: webglfundamentals.org 사이트GPU 에는 기본적으로 두가지 부분이 있다.첫 번째 부분은 정점을 클립 공간의 정점으로 처리하는 부분이다.두 번째로는 첫 번째 작업을 기반으로 픽셀을 그리는 부분이다.위와 같이 호출할 때 9는 ' 정점 9개 처리
Unity WebGL build error
최근 webGL 관련해서 빌드할 일이 생겼다. 에러가 뜬다파이썬으로 해결하면댐해당 폴더로 가서Python 내장 웹 서버를 실행python -m http.server그담 http://127.0.0.1:8000/ 으로 접속잘됨
tiemr
p5js 에서 시간이 나오는걸 어떻게 더 하면 더 입체적으로 볼수 있을까 해서 해 보았다전체 코드이다 p5js cdn을 들고 과서 link에 추가 해 서 사용 하였다(사이트에 가서하면 script안에 들어 있는거만 복사 해서 하면 같은 화면을 볼 수 있다).맨 안쪽에
WebGL 빌드 시 Failed to find entry-points: 발생 시에 대처법
기록해두면 나중에 같은 문제가 발생해도 빠르게 해결 할 수 있겠지?참고자료https://forum.unity.com/threads/first-person-starters-input-system-doesnt-work-on-webgl.1296837/Edit->Pr
앗! 취업에 도움되는(?)Threejs를 vanila 및 react-three-fiber 버전의 예제와 함께 복습해보자. [코드편 3탄]
코드편 3탄에서는 light(조명), shadow(그림자), material의 빛과 관련된 속성에 대해서 알아보도록 하겠다. 이번에도 역시, 같은 코드를 vanila javascript와 react 두 가지 방식으로 모두 작성해보겠다. vanila javascrip