본문 바로가기
Creo/새로운 소식

Web에서 3D 데이터를 게시 하기

by 아이디티 2020. 3. 30.

소개

 

 

WebGL은 래스터화(rasterization) 엔진중 하나입니다. 여기서 래스터화라는 것은 벡터 또는 윤곽선 데이터를 비트맵으로 바꾸는 과정을 의미합니다. 개발자는 WebGL 3D API를 사용해 코드를 작성하면 점, 선, 삼각형등을 그릴 수 있습니다.

 

WebGL은 컴퓨터의 GPU에서 실행됩니다. 따라서 해당 GPU에서 실행되는 코드를 제공해야합니다. 함수 쌍 형태로 해당 코드를 제공합니다. 이 두 함수를 정점 셰이더(vertex shader)와 프래그먼트 셰이더라(fragment shader)고하며 각각 GLSL (GL Shader Language) 이라는 매우 엄격한 형식의 C / C ++로 작성됩니다 .  쌍을 이루어 프로그램 이라고합니다 .

 

 

 

  • 버텍스 셰이더(Vertex shader)
    정점의 위치를 계산하는 역할을 하기 위해 버텍스 셰이더 함수가 호출됩니다. 작성된 함수가 최종적으로 반환하는 정점을 기준으로 점, 선 또는 삼각형을 비롯한 다양한 종류의 도형을 래스터화 할 수 있습니다. 이렇게 래스터화되면 그 다음으로 프래그먼트 셰이더의 함수가 호출됩니다.

  • 프래그먼트 셰이더(fragment shader)
    프래그먼트 셰이더는 버텍스 셰이더에 의해 래스터화된 도형 내에 각 픽셀에 들어가는 색상을 계산합니다.

 

 

Faraday Future - FF 91 VR

FF 91 VR - Experience Faraday Future's 3D simulation of their flagship vehicle: FF 91

vr.ff.com

 


3D 파일 WEBGL 변환 방법

 

 

 

[Web뷰어] Three.js로 모델이 돌아가는 WebGL을 만들어보자! #1. 모델링 준비

안녕하세요, 플릭스예요. 이번 포스팅에서는 three.js를 활용한 WebGL 제작 방법에 대해 다뤄볼거예요. ...

blog.naver.com

 

 

샘플 사이트

 

https://threejs.org/