๐Ÿ“ FE CONF 2018 โŸช์ƒ๊ฐ๋ณด๋‹ค ์‰ฌ์šด WebGLโŸซ

[meษช]ยท2022๋…„ 1์›” 26์ผ
0

6-1. Todays I Want to learn. Graphics

๋ชฉ๋ก ๋ณด๊ธฐ
3/3

๋ฐœํ‘œ ๋‚ด์šฉ

  1. WebGL์ด๋ž€?

    • Web Browser์—์„œ CPU๊ฐ€ ์•„๋‹Œ GPU๋ฅผ ์‚ฌ์šฉํ•ด ํ™”๋ฉด์„ renderingํ•จ
    • ๊ทธ๋ž˜์„œ ๋น ๋ฆ„
  2. WebGL ํ™œ์šฉ

    • web game
    • interactive page
    • ์ง€๋„
    • 3D ์˜์ƒ, YouTube player
    • data ์‹œ๊ฐํ™”
    • storytelling
  3. Three.js ์‹œ์ž‘ํ•˜๋Š” ๋ฒ•

    • var scene : ๋ฌด๋Œ€๋ฅผ ๋งŒ๋“ค๊ณ 
    • var aspect : camera์˜ ์ข…ํšก๋น„๋ฅผ ์„ค์ •ํ•˜๊ณ 
    • var camera : camrea๋ฅผ ์„ค์น˜ํ•œ ๋’ค
    • var renderer : ํ™”๋ฉด์˜ ํฌ๊ธฐ๋„ ์„ค์ •ํ•˜๊ณ 
    • document.body.appendChild : body์— ๋„ฃ์€ ํ›„
    • var axes : AxesHelper๋ž‘
    • var gridHelper : GridHelper๋ฅผ ์ถ”๊ฐ€ํ•˜๋ฉด 3D๊ฐ™์•„ ๋ณด์ธ๋‹ค...!
    • var geometry : ๊ฐœ์ฒด๋ฅผ ๋งŒ๋“ค๊ณ 
    • var material : ์žฌ์งˆ์„ ์ง€์ •ํ•ด์„œ
    • var boxMesh ~ scene.add( boxMesh ) : ์œ„ ๋‘ ๊ฐ€์ง€๋กœ ๋งŒ๋“  ๊ฑธ scene์— ์ถ”๊ฐ€
    • var OOlight ~ scene.add( OOLight ) : ์กฐ๋ช…์„ ๋งŒ๋“ค์–ด์„œ scene์— ์ถ”๊ฐ€
  4. know-how

// ๐ŸŽต ํ…Œ๋‘๋ฆฌ ๋งค๋ˆํ•˜๊ฒŒ ๋งŒ๋“ค๊ธฐ
renderer = new THREE.WebGLRenderer({ antialias : true });
// ๐ŸŽต ๊ธฐ๋ณธ ๋„ํ˜•์„ ์‘์šฉํ•ด ๋นจ๋Œ€ ๋งŒ๋“ค๊ธฐ
var geometry = new THREE.CylinderGeometry(1, 1, 120, 10, 1, true);

var objectMaterial = new THREE.MeshToonMaterial( {
  color: 0x000000,
  side: THREE.DoubleSide,
  transparent: true,
  opacity: .8
} );
var cylinder = new THREE.Mesh( geometry, objectMateiral );

// ์ž…์ฒด๊ฐ์„ ์ฃผ๊ธฐ ์œ„ํ•œ ์•ˆ๊ฐœ ์ง€์ •
var seaColor = 0x002159;
scene.fog = new THREE.fog( seaColor, 0.005, 2000 );
// ํ˜น์€ scene.fog = new THREE.forExp2( seaColor, 5 );

Intro to WebGL with Three.js
three.js spher room
three.js - 3D Z๊ฐ’์˜ ์ดํ•ด
three.js camera setting
The JoongAng ๋””์ง€ํ„ธ ์ŠคํŽ˜์…œ

๐Ÿ™‡ the source of this content

FEConf Korea - [FEConf2018] ์ƒ๊ฐ๋ณด๋‹ค ์‰ฌ์šด webGL (feat. three.js)

profile
๋Š๋ ค๋„ ํ•  ๊ฑฐ์•ผ.......

0๊ฐœ์˜ ๋Œ“๊ธ€