JavaScriptでCGを扱う WebGL紹介

JavaScriptで
CGを扱う
WebGL紹介
2018/07/30 社内勉強会向け

CGとは？
コンピュータグラフィックスのこと

CGとは？
3DCG

CGとは？
3DCG 2DCG

実現するための技術
- OpenGL

- OpenGL
CGを表現するための規格。
- 様々な言語のライブラリが存
在する
- 様々なプラットフォームで動
作する

- WebGL- OpenGL
CGを表現するための規格。
在する
作する

- WebGL- OpenGL
CGを表現するための規格。 OpenGLの技術を使ってHTML5の
canvas要素にCGを描画するライブラ
リ。
在する
作する

WebGLの場合

WebGLの場合
- そのままWebGLを使う

WebGLの場合
- ライブラリを使う

WebGLの場合
- ライブラリを使う
- PixiJS(2Dの表現)
- Three.js(3Dの表現)
- etc...

WebGLで作られているWebサイトの例

株式会社闇

株式会社闇
http://death.co.jp/ja/pc/

株式会社ライゾマティクス

株式会社ライゾマティクス
https://rhizomatiks.com/

グラフィックス・プログラミングの概念

geometry

materialgeometry

mesh
materialgeometry

camera
mesh
materialgeometry

scene
camera
mesh
materialgeometry

scene
camera
mesh
materialgeometry
renderer

Three.jsでサンプルを作ってみる

Three.jsでサンプルを作ってみる
完成イメージ

実際のソースコード
ここに置いてます↓
Three.js_sample
https://codepen.io/isao_e/pen/MBOORM

index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="webgl"></div>
</body>
</html>

(() => {
window.addEventListener('load', () => {
let width = window.innerWidth;
let height = window.innerHeight;
let targetDOM = document.getElementById('webgl');
let scene;
let camera;
let renderer;
let geometry;
let material;
let box;
script.js 1/6

const CAMERA_PARAM = {
fovy: 60,
aspect: width / height,
near: 0.1,
far: 10.0,
x: 0.0,
y: 2.0,
z: 5.0,
lookAt: new THREE.Vector3(0.0, 0.0, 0.0)
};
script.js 2/6

const RENDERER_PARAM = {
clearColor: 0x333333,
width: width,
height: height
};
const MATERIAL_PARAM = {
color: 0xff9933
};
scene = new THREE.Scene();
script.js 3/6

camera = new THREE.PerspectiveCamera(
CAMERA_PARAM.fovy,
CAMERA_PARAM.aspect,
CAMERA_PARAM.near,
CAMERA_PARAM.far
);
camera.position.x = CAMERA_PARAM.x;
camera.position.y = CAMERA_PARAM.y;
camera.position.z = CAMERA_PARAM.z;
camera.lookAt(CAMERA_PARAM.lookAt);
script.js 4/6

renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(RENDERER_PARAM.clearColor));
renderer.setSize(RENDERER_PARAM.width, RENDERER_PARAM.height);
targetDOM.appendChild(renderer.domElement);
script.js 5/6

geometry = new THREE.BoxGeometry(1.0, 1.0, 1.0);
material = new THREE.MeshBasicMaterial(MATERIAL_PARAM);
box = new THREE.Mesh(geometry, material);
scene.add(box);
renderer.render(scene, camera);
}, false);
})();
script.js 6/6

何が実現するか
簡単
・雪
・雨
・宇宙空間
・レーザービーム
・箱、球、板、点、線

何が実現するか
簡単
・雪
・雨
・宇宙空間
・レーザービーム
・箱、球、板、点、線
難しい
・生き物
・建物
・自然
・液体

ディレクショナルライト（平行光源）：一方向からの光
アンビエントライト（環境光）：全体への光
他に必要な知識

fovy：視野の広さ（確度）
aspect：空間の縦横比（値ではなく比率）
near：空間の開始位置（ここより奥がカメラに映る）
far：空間の終了位置（ここより手前がカメラに映る）

rotation（回転）：同じ位置で向きが変わる（x軸に30度とか指定する）
position（平行移動）：別の位置に移動する

透視投影：人間が観たのと同じように遠近感をつけて描画する
平行投影：遠近感をつけずに描画する

頂点シェーダ：モデルの頂点の位置を、画面上の位置に変換する
フラグメントシェーダ：各ピクセルに色を出力する
GLSL ( OpenGL Shading Language )：シェーダを書く言語

頂点シェーダ：モデルの頂点の位置を、画面上の位置に変換する
フラグメントシェーダ：各ピクセルに色を出力する
GLSL ( OpenGL Shading Language )：シェーダを書く言語
etc...

WebGLの学習に参考になるサイト

・WebGL 開発支援サイト wgld.org
https://wgld.org/

https://wgld.org/
・WebGL 入門 - Web API インターフェイス | MDN
https://developer.mozilla.org/ja/docs/Web/API/WebGL_API/Tutorial/Getting_started_w
ith_WebGL

https://wgld.org/
ith_WebGL
・Three.js入門サイト - ICS MEDIA
https://ics.media/tutorial-three/index.html

https://wgld.org/
ith_WebGL
・Three.js入門サイト - ICS MEDIA
https://ics.media/tutorial-three/index.html
・Three.js入門 (全23回) - ドットインストール
https://dotinstall.com/lessons/basic_threejs_v2

WebGLを学んでよかったこと

・JavaScriptのイベントリスナーがちょっとわかる

=> 3DCG以外にも活かせそう！！

・3DCGがどんな風にできてるのかわかる

=> 世の中で使われているCGも調べれば自分でも実装できそうな
気がしてくる

気がしてくる
=> Unityや他の3DCGの技術も基本的には同じ原理

気がしてくる
・フロントエンドの自分の知らない深淵が垣間見える

気がしてくる
・フロントエンドの自分の知らない深淵が垣間見える
=> 3DCG界隈のすごい人とか実はゴロゴロいる。すごい

JavaScriptでCGを扱う WebGL紹介

Recommended

Recommended

More Related Content

Similar to JavaScriptでCGを扱う WebGL紹介

Similar to JavaScriptでCGを扱う WebGL紹介 (20)

JavaScriptでCGを扱う WebGL紹介