HTML Canvas 2

오늘의 목표

WebGL의 생태계

WebGL에 대한 흥미 유발?

Three.js 간단한 사용법

WebGL

웹 브라우저에서 제공하는 3차원 그래픽
플래시, 실버라이트 등의 플러그인이 필요가 없음
GPU 가속을 사용하기 때문에 높은 성능의 그래픽 구현 가능
WebGL 1.0 - 2011년 3월 (OpenGL ES 2.0 기반)
WebGL 2.0 - 2017년 2월 (OpenGL ES 3.0 기반)

3D 프로그래밍에 기본개념

화면에 무엇인가를 그리려면?

Vertex(정점)

vertex는 정점의 정보(position)를 가지고 있는 자료구조
vertex는 위치정보를 포함한 색상 정보등을 가지고 있음
position과 color를 가지고 있는 자료구조

Polygon

두개의 vertex를 연결 하면 - 선
세개의 vertex를 연결 하면 - 삼각형
vertex를 연결해서 만든 모든 면을 polygon이라 함

Polygon Mesh

polygon과 vertex들이 모여있는 집합
mesh라고 부르기도 함

Texture

OpenGL에서 사용하는 Object
Shader 처리를 거칠 이미지 데이터

Shader

vertex 정보 처리해 화면에 보여주는 명령어들의 집합
이 명령어들은 스크린 위에 낱개의 픽셀마다 실행되고 한번에 일어난다.

Shader는

어떻게 일어날까?

픽셀연산이라면..

parellel processing

WebGL 지원 브라우저

Firefox 4+
Google Chrome 9+
Opera 12+
Safari 5.1
Internet Explorer 11+에서 지원
사실상 거의 대부분의 브라우저에서 지원

IE는 사용 못하나요?

IEWebGL ( http://iewebgl.com )
IE Plugin
Works in all actual IE versions

Hello WebGL

function webGLStart() {
    var canvas = document.getElementById("canvas-id");
    initGL(canvas);
    initShaders()
    initBuffers();

    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.enable(gl.DEPTH_TEST);

    drawScene();
}

Hello WebGL

function initGL(canvas) {
    try {
        gl = canvas.getContext("experimental-webgl");
        gl.viewportWidth = canvas.width;
        gl.viewportHeight = canvas.height;
    } catch (e) {
    }
    if (!gl) {
        alert("Could not initialise WebGL, sorry :-(");
    }
}

Hello WebGL

function initShaders() {
	var fragmentShader = getShader(gl, "shader-fs");
	var vertexShader = getShader(gl, "shader-vs");

	shaderProgram = gl.createProgram();
	gl.attachShader(shaderProgram, vertexShader);
	gl.attachShader(shaderProgram, fragmentShader);
	gl.linkProgram(shaderProgram);

	if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
		alert("Could not initialise shaders");
	}

	gl.useProgram(shaderProgram);

	shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
	gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);

	shaderProgram.vertexColorAttribute = gl.getAttribLocation(shaderProgram, "aVertexColor");
	gl.enableVertexAttribArray(shaderProgram.vertexColorAttribute);

	shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
	shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
}

Hello WebGL

function initBuffers() {
	triangleVertexPositionBuffer = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
	var vertices = [
		 0.0,  1.0,  0.0,
		-1.0, -1.0,  0.0,
		 1.0, -1.0,  0.0
	];
	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
	triangleVertexPositionBuffer.itemSize = 3;
	triangleVertexPositionBuffer.numItems = 3;
	
	var indices = [0, 2, 1];
	
	triangleIndexPositionBuffer = gl.createBuffer();
	gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, triangleIndexPositionBuffer);
	gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);

	triangleVertexColorBuffer = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexColorBuffer);
	var colors = [
		1.0, 0.0, 0.0, 1.0,
		0.0, 1.0, 0.0, 1.0,
		0.0, 0.0, 1.0, 1.0
	];
	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
	triangleVertexColorBuffer.itemSize = 4;
	triangleVertexColorBuffer.numItems = 3;
}
					
WEBGL CODE(5)

   function drawScene() {
	gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
	gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

	mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);

	mat4.identity(mvMatrix);

	mat4.translate(mvMatrix, [0, 0.0, -7.0]);
	gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
	gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, triangleVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);

	gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexColorBuffer);
	gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, triangleVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0);

	setMatrixUniforms();
		
	gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, triangleIndexPositionBuffer);
	gl.drawElements(gl.TRIANGLES, 3, gl.UNSIGNED_SHORT,0);
	
}

Hello WebGL

function drawScene() {
	gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
	gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

	mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);

	mat4.identity(mvMatrix);

	mat4.translate(mvMatrix, [0, 0.0, -7.0]);
	gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
	gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, triangleVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);

	gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexColorBuffer);
	gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, triangleVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0);

	setMatrixUniforms();
		
	gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, triangleIndexPositionBuffer);
	gl.drawElements(gl.TRIANGLES, 3, gl.UNSIGNED_SHORT,0);
	
}

Three.js

3D 그래픽 왕초보를 위한 경량 자바스크립트 라이브러리
https://github.com/mrdoob/three.js/
2010. 4 ~ 2018.12 (r99)
539 KB (minified)

Hello Three.js

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

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

      var geometry = new THREE.BoxGeometry(1, 1, 1);
      var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
      var cube = new THREE.Mesh(geometry, material);
      scene.add(cube);

      camera.position.z = 5;

      var animate = function() {
        requestAnimationFrame(animate);

        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;

        renderer.render(scene, camera);
      };

      animate();

WebGL 좌표계

Renderer

최종 결과물을 그려주는 객체
- WebGLRenderer
- CanvasRenderer
- SVGRenderer

Renderer


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

Scene

화면을 구성하는 기본요소
여러개의 모델과 조명으로 구성

Scene


var scene = new THREE.Scene();

scene.add(object);
scene.add(mesh);
scene.add(light);

Camera

PerspectiveCamera
OrthographicCamera
CubeCamera
StereoCamera

Camera

var camera = 
new THREE.PerspectiveCamera(
          50,
          innerWidth / innerHeight,
          1,
          10000
        );
camera.position.z = 1000;

PerspectiveCamera

투시투영, 원시투영(Perspective Projection)
원근법에 따라 가까운 물체는 크게 먼 물체는 작게 보임

PerspectiveCamera(fov, aspect, near, far);

OrthographicCamera

직교투영
바라보는 방향은 있지만 지점은 없음
같은 크기의 물체는 거리에 상관없이 같은 크기로 보임

OrthographicCamera(left, right, top, bottom, near, far);

Mesh

그물망이라는 사전적 뜻
와이어프레임
도형과 질감을 적용한 물체
Mesh = Geometry + Material

Mesh


function createMesh() {
    var geometry = new THREE.SphereGeometry(200);
    var material = new THREE.MeshBasicMaterial({
          color: 0x1d6e99,
          wireframe: true
    });
    var mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
}

Geometry

PlaneBufferGeometry
PlaneGeometry
PolyhedronBufferGeometry
PolyhedronGeometry
RingBufferGeometry
RingGeometry
ShapeBufferGeometry
ShapeGeometry
SphereBufferGeometry
SphereGeometry
TetrahedronBufferGeometry
TetrahedronGeometry
TextBufferGeometry
TextGeometry
TorusBufferGeometry
TorusGeometry
TorusKnotBufferGeometry
TorusKnotGeometry
TubeBufferGeometry
TubeGeometry
WireframeGeometry
PlaneBufferGeometry

BoxBufferGeometry
BoxGeometry
CircleBufferGeometry
CircleGeometry
ConeBufferGeometry
ConeGeometry
CylinderBufferGeometry
CylinderGeometry
DodecahedronBufferGeometry
DodecahedronGeometry
EdgesGeometry
ExtrudeBufferGeometry
ExtrudeGeometry
IcosahedronBufferGeometry
IcosahedronGeometry
LatheBufferGeometry
LatheGeometry
OctahedronBufferGeometry
OctahedronGeometry
ParametricBufferGeometry
ParametricGeometry

Geometry

Material

LineBasicMaterial
LineDashedMaterial
MeshBasicMaterial
MeshDepthMaterial
MeshLambertMaterial
MeshNormalMaterial
MeshPhongMaterial

MeshPhysicalMaterial
MeshStandardMaterial
MeshToonMaterial
PointsMaterial
RawShaderMaterial
ShaderMaterial
ShadowMaterial
SpriteMaterial

Material

Light

명암으로 사물의 입체감을 더함
- AmbientLight
- DirectionalLight
- HemisphereLight
- PointLight
- RectAreaLight
- SpotLight

DirectionLight

PointLight

SpotLight

AmbientLight

Light


AmbientLight(hex)

DirectionLight(hex, intensity, distance)

PointLightZ(color, intensity, distance)

SpotLight(color, intensity, distance, castShadow)

Light

Shadow

조명의 방향과 세기를 반영


renderer.shadowMapEnabled = true;

light.castShadow = true;

object.castShadow = true;
object.receiveShadow = true;

Shadow

Texture

물체의 표면을 이미지 파일로 처리

var texture = THREE.ImageUtils.loadTexture('any.jpg');

new THREE.MeshBasicMaterial({
    map: texture
});

HTML Canvas 2

오늘의 목표

WebGL

3D 프로그래밍에 기본개념

Vertex(정점)

Polygon

Polygon Mesh

Texture

Shader

Shader는

어떻게 일어날까?

픽셀연산이라면..

parellel processing

WebGL 지원 브라우저

IE는 사용 못하나요?

Hello WebGL

Hello WebGL

Hello WebGL

Hello WebGL

Hello WebGL

Three.js

Hello Three.js

WebGL 좌표계

Renderer

Renderer

Scene

Scene

Camera

Camera

PerspectiveCamera

OrthographicCamera

Mesh

Mesh

Geometry

Geometry

Material

Material

Light

DirectionLight

PointLight

SpotLight

AmbientLight

Light

Light

Shadow

Shadow

Texture

Texture

오늘의 목표

HTML Canvas 2

More from leejaemin