p5.js 와 three.js 의 함수들을 비교해보자.

-p5.js 사용법

p5.js 는 index.html 에 p5.js 파일 script 를 import 한 후 사용할 수 있다. (리액트에서는 p5-react.js 를 사용한다.)

 

p5.js 의 기본 화면 생성코드는 다음과 같다.

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
}

p5.js 는 setup 함수와 draw 함수가 필수 함수이다. 

setup 함수는 말그대로 처음 브라우저가 load 되었을때 init 되는 함수이고, 

draw 함수는 requestAnimationFrame() 함수와 같이, 1초당 60번씩 지속적으로 실행되는 애니메이션 드로잉 함수이다.

 

 

-p5.js 의 도형 그리기 함수들

p5.js 의 그리기 함수는 그 종류가 다양하며 사각형, 삼각형, 타원, 원, 선, 점과 같은 기본도형은 물론이고, 베지어곡선 과 같은 응용 도형도 그릴 수 있다. ( 사용법이 굉장히 간편하다!. )

https://p5js.org/ko/reference/

reference | p5.js

 

 

- three.js 의 원리

three.js 는 webgl 라이브러리이므로, 그 원리 역시 webgl 과 비슷하다.

화면에 무언가를 Render 하기 위해서는 1) Camera의 위치(관찰자의 시점)를(을) 지정해야하고, 2) 화면에 표시할 물체를 만들어야한다.

화면에 표시할 물체는 Light(명암), Geometry(형태), Material(색깔, 재질) 로 구성되어 있다.

아래 그림은 이러한 위계구조를 나타낸 것이다.

 

 

- three.js 사용법

three.js 는 index.html 에 three.js 파일 script 를 import 한 후 사용할 수 있다.

 

three.js 의 기본 화면 생성 코드는 다음과 같다.

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

three.js 는 3d 그래픽 라이브러리이므로, p5.js 에서와 같이 캔버스만 생성하는게 아니라, 추가적으로 카메라의 위치도 설정해준다.

 

 

-three.js 의 도형 그리기 함수들

three.js 의 그리기 함수들은 아래의 그림과 같이 다양한 종류가 존재하며, 기본적으로 BufferGeometry 를 상속받는다.

 

Webgl 에서 도형을 그릴때, 도형의 각 꼭지점을 vertex_shader 에 전달하면, gpu 에서 vertex_shader 에 전달된 벡터형태의 꼭짓점 좌표를 바탕으로 그리기를 진행하는데, three.js 에서도 webgl 과 동일한 원리로 그리기를 한다. 아래 그림은 three.js 에서 도형을 그릴때 buffer 에 저장되는 정보들이다.