08.14 디지털 트윈 부트캠프(OT) 30일차

WebGL

Web Graphic Library

웹에서 그래픽을 표시하기 위한 도구 모음으로 캔버스 API에 WebGL 컨텐츠를 추가해 표현한다.

설치 과정 필요 없이 브라우저에서 기본 제공하는 표준 라이브러리 -> 기존 브라우저 사용성으로 사용자 인터랙션 제공

 

캔버스 API

웹에서 동적 컨텐츠를 표현하기 위한 도구

2D, WebGL 등 드로잉 컨텍스트 제공

 

Three.js

WebGL의 복잡한 연산을 미리 계산된 함수로 제공해 사용자에게 보다 쉬운 3D 개발환경 제공

먼저, react 앱을 구성한 뒤, npm i three를 이용해 three.js 라이브러리를 다운로드 받아준다.

그 이후 react-router-dom을 이용해 페이지를 나누어 구성하자~~

 

Scene

그래픽스 영역 대상 객체, 3D 객체들을 담는 역할

import * as THREE from 'three'

const scene = new Scene()	// 생성자 함수 호출
scene.add(object)	// scene에 오브젝트 포함
scene.remove(object)	// scene에 포함된 오브젝트 삭제
scene.background("0xffff00")	// scene에 배경색/텍스처 적용

 

Camera

그래픽스 영역에서 바라보는 객체, 눈, 웹과 장면을 연결하는 역할

const camera = new THREE.PerspectiveCamera(
	45, window.innerWidth/window.InnerHeight, 0.1, 1000
);	// PerspectiveCamera(fov, aspect, near, far)
camera.lookAt(0,0,0);	// 카메라가 바라보는 좌표 지정
camera.zoom(2);	// 카메라의 줌 레벨 설정(확대 || 축소)
camera.updateProjectionMaterial();	// 카메라의 설정 값 정보 업데이트
scene.add(camera)

 

Light

그래픽스 영역에서 빛을 표현하는 객체, 그림자, 3D 객체를 밝히는 역할

1) 모든 오브젝트에게 전역으로 내리쬐는 조명

const light = new THREE.AmbientLight (0xff0000, 1);	// AmbientLight(color, intensity)
light.color.set(0x00ff00);	// Light의 색상 설정
light.intensity = 10;	// Light의 강도 설정
scene.add(light);

 

 

2) 지정된 방향으로 내리쬐는 조명

const light = new THREE.DirectionalLight(0xff0000, 1);	// DirectionalLight(color, intensity)
light.color.set(0x00ff00);
light.intensity = 10;
scene.add(light)

 

3) 위, 아래에서 비추는 조명

const light = new THREE.HemisphereLight(0xff0000, 0xffff00, 1);
// HemisphereLight(color1, color2, intensity)
light.color.set(0x00ff00);	// 하늘 Light의 색상 지정
light.groundColor.set(0x00ff00);	// 지상 Light의 색상 지정
light.intensity = 10;
scene.add(light)

 

4) 360도 전방위로 퍼지는 조명

const light = new THREE.PointLight(
	0xff0000, 1, 0.0, 1
);	// PointLight(color, intensity, distance, decay)
light.color.set(0x00ff00);
light.intensity = 10;
light.distance = 10;	// Light가 퍼지는 거리 설정, default: 무한
light.decay = 2;	// Light가 거리에 따라 희미해지는 정도
scene.add(light)

 

 

5) 사각형 Light 오브젝트에서 퍼지는 조명

const light = new THREE.RectAreaLight(0xff0000, 1, 10, 10);
// RectAreaLight(color, intensity, width, height)
light.color.set(0x00ff00);
light.intensity = 10;
light.width = 10;	// Light 오브젝트의 넓이 설정
light.height = 2;	// Height 오브젝트의 높이 설정
scene.add(light)

 

6) 스포트라이트 조명

const light = new THREE.SpotLight(
	0xff0000, 10, 50, 0.3, 1, 2
);	// SpotLight(color, intensity, distance, angle, penumbra, decay)
// penumba : 스포트라이트 외곽선 그림자 설정
light.color.set(0x00ff00);
scene.add(light);

 

Material

그래픽스 객체 표현, 3D 객체의 색, 재질

1) 단순 음영 방식으로 Geometry 표현하는 재질

const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
material.color.set(0xffff00);
material.wireframe = true;	// Material을 wireframe으로 표시

 

2) 대부분의 그래픽 엔진에서 기준이 되는 기본 재질

const material = new THREE.MeshStandardMaterial({ color: 0xff0000 });
material.color.set(0xffff00);
material.metalness = 0.5;	// Material 금속 정도 설정
material.roughness = 0.4;	// Material 표면의 거친 정도 설정
material.opacity = 0.5;	// Material 투명도 설정
material.transparent = true;	// Material 투명 객체로 정의할지 설정

 

3) 기본 재질 + 고급 물리 기반 렌더링 속성을 지원하는 재질

const material = new THREE.MeshStandardMaterial({ color: 0xff0000 });
material.color.set(0xffff00);
material.metalness = 0.5;
materialroughness = 0.5;
material.opacity = 0.5;
material.transparent = true;
material.clearcoat = 0.5;	// 클리어 코트 층(얇은 반투명 층)을 레이어드 및 정도 설정
materialclearcoatRoughness = 0.5;	// 클리어 코트 층의 거친 정도 설정

 

4) 반사 하이라이트는 없으나 Lambertian 방식으로 빛을 계산하는 재질(음영)

const material = new THREE.MeshLambertMaterial({ color: 0xff0000 });
material.color.set(0xffff00);
material.wireframe = true;

 

5) 반사하이라이트

const material = new THREE.MeshPhongMaterial({ color: 0xff0000 });
material.color.set(0xffff00);
material.wireframe = true;
material.shininess = 50;	// 반사 하이라이트
materialspecular.set(0x111111);	// 반사 하이라이트 색상

 

 

6) 카툰 렌더링 재질

const material = new THREE.MeshToonMaterial({ color: 0xff0000 });
material.color.set(0xffff00);
material.wireframe = true;

 

Geometry

점, 선, 면 그래픽스 도형, 3D 객체의 프레임

1) BoxGeometry

const geometry = new THREE.BoxGeometry();
// BoxGeometry(width, height, depth, widthSegments, heightSegments, depthSegments)

 

2) CircleGeometry

const geometry = new THREE.CircleGeometry();
// CircleGeometry(radius, segments)

 

3) CylinderGeometry

const geometry = new THREE.CylinderGeometry();
// CylinderGeometry(radiusTop, radiusBottom, height, radialSegments)

 

4) PlaneGeometry

const geometry = new THREE.PlaneGeometry();
// PlaneGeometry(width, height)

 

5) SphereGeometry

const geometry = new THREE.SphereGeometry();
// SphereGeometry(radius, widthSegments, heightSegments)

 

6) ToursGeometry

const geometry = new THREE.ToursGeometry();
// ToursGeometry(radius, tube, radialSegments, tubularSegments)

 

Renderer

그래픽스 영역을 웹 영역으로 표현하는 객체, 웹에서 장면을 그리는 객체

const renderer = new THREE.Renderer();	// Renderer 생성자 함수
renderer.setPixelRatio(window.devicePixelRatio);	// HiDPI 기능, 해상도 배율 설정
renderer.setSize(window.innerWidth, window.innerHeight);	// 캔버스와 뷰포트 크기 설정
renderer.shadowMap.enabled = true;	// 그림자 렌더링 여부
const rendererElement = render.domElement;	// 렌더링 결과물 캔버스 요소
document.querySelector(".container").appendChild(rendererElement);
renderer.render(scene, camera);	// 카메라로 3D 오브젝트 렌더링

 

Mesh

그래픽스 도형 + 재질, 공간에 존재하는 3D 객체, 오브젝트

const mesh = new THREE.Mesh(geometry, material);
// geometry: Mesh의 geometry에 접근하거나 설정
// material: Mesh의 material 접근하거나 설정

scene.add(mesh);
scene.remove(mesh);

 

Raycaster

Raycasting 기법 도구, 그래픽스 영역에 레이저를 투사해 표면을 파악하는 기술

const raycaster = new THREE.Raycaster();
const pointer = new THREE.Vector2(x, y);
raycaster.setFromCamera(pointer, camera);
// 광선을 쏘아보낼 2차원 좌표와 카메라 정보 입력
const intersects = raycaster.intersectObjects(scene.children);
// intersectObjects(object, recursive)
// 해당 오브젝트와 광선이 교차하는 모든 오브젝트 검사
// 거리순 정렬된 배열 반환
// recursive 옵션으로 검사 대상 오브젝트와 하위 오브젝트 재귀 검사 여부 결정
if(intersects.length > 0) {
	const intersect = intersects[0];
    intersect.object.material.color.set(0xffff00)
}

 

Control

웹 영역과 그래픽스 영역의 인터랙션 도구의 종류, 마우스 인터렉션을 그래픽스에 반영

import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls';
const control = new OrbitContolrs(camera, render.domElement);
// 줌 기능과 마우스 인터랙션에 대한 카메라 조작

 

Position

Object 3D 객체의 위치 설정

const object = new THREE.Mesh(geometry, material);
object.position.set(0, 0, 1);	// 오브젝트 전체 좌표 설정
object.position.x += 0.1;
scene.add(object)

 

Rotation

Object 3D 객체의 회전 설정

const object = new THREE.Mesh(geometry, material);
object.rotation.set(0, 0, 1);	// 오브젝트의 전체 회전 설정
object.rotation.x += 0.1;
scene.add(object);

 

Scale

Object 3D 객체의 크기 설정

const object = new THREE.Mesh(geometry, material);
object.scale.set(0, 0, 1);	// 오브젝트의 전체 크기 설정
object.scale.x += 0.1;
scene.add(object);

 

Helper

1) GridHelper

const size = 10;	// 그리드 크기 설정
const divisions = 10;	// 그리드 분할 정도 설정 
const gridHelper = new THREE.GridHelper(size, divisions);
scene.add(gridHelper);

 

2) AxesHelper

const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

d