208. 何故高速通信が可能か
あるHTTP requestのHeader
GET / HTTP/1.1
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/
*;q=0.8
Accept-Encoding: gzip,deflate,sdch
Accept-Language: ja,en-US;q=0.8,en;q=0.6
Cache-Control: max-age=0
Connection: keep-alive
Host: localhost
If-Modified-Since: Tue, 08 Oct 2013 17:46:38 GMT
If-None-Match: "3e031b2-13a1-4e83e59bcbb80"
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_5) AppleWebKit/537.36
(KHTML, like Gecko) Chrome/30.0.1599.69 Safari/537.36
400 Bytes over!
209. 何故高速通信が可能か
WebSocketのHeader
FIN 1 bit
RSV1 1 bit
RSV2 1 bit
RSV3 1 bit
Opcode 4 bits
Mask 1 bit
Payload length 7 bits, 7+16 bits, or 7+64 bits
Masking-key 0 bytes or 4 bytes
2 14 Bytes
247. Media Capture and Streams
(getUserMedia)
ブラウザからマイクやカメラにアクセス
利用範囲はWebRTC以外とも
音声処理(with Web Audio API)
ボイスチェンジャー etc.
画像処理(with Canvas)
顔検出 etc.
顔認識ができるようになるのも時間の問題か?
305. var renderer =
new THREE.WebGLRenderer({antialias: true});
renderer.setSize(500, 500);
renderer.setClearColorHex(0xcccccc, 1);
var disp = document.getElementById('disp');
disp.appendChild(renderer.domElement);
var camera = new THREE.PerspectiveCamera();
camera.position = new THREE.Vector3(0, 0, 8);
camera.lookAt(new THREE.Vector3(0, 0, 0));
var light = new THREE.DirectionalLight(0xcccccc);
light.position = new THREE.Vector3(1, 1, 1);
var geometry = new THREE.SphereGeometry(3, 32, 16);
var material =
new THREE.MeshPhongMaterial({color: 0xff0000});
var mesh = new THREE.Mesh(geometry, material);
var scene = new THREE.Scene();
scene.add(light);
scene.add(mesh);
renderer.render(scene, camera);
306. var renderer =
new THREE.WebGLRenderer({antialias: true});
renderer.setSize(500, 500);
renderer.setClearColorHex(0xcccccc, 1);
var disp = document.getElementById('disp');
disp.appendChild(renderer.domElement);
var camera = new THREE.PerspectiveCamera();
camera.position = new THREE.Vector3(0, 0, 8);
camera.lookAt(new THREE.Vector3(0, 0, 0));
var light = new THREE.DirectionalLight(0xcccccc);
light.position = new THREE.Vector3(1, 1, 1);
var geometry = new THREE.SphereGeometry(3, 32, 16);
var material =
new THREE.MeshPhongMaterial({color: 0xff0000});
var mesh = new THREE.Mesh(geometry, material);
var scene = new THREE.Scene();
scene.add(light);
scene.add(mesh);
renderer.render(scene, camera);
レンダラーを作成し、サイズと色を指定
307. var renderer =
new THREE.WebGLRenderer({antialias: true});
renderer.setSize(500, 500);
renderer.setClearColorHex(0xcccccc, 1);
var disp = document.getElementById('disp');
disp.appendChild(renderer.domElement);
var camera = new THREE.PerspectiveCamera();
camera.position = new THREE.Vector3(0, 0, 8);
camera.lookAt(new THREE.Vector3(0, 0, 0));
var light = new THREE.DirectionalLight(0xcccccc);
light.position = new THREE.Vector3(1, 1, 1);
var geometry = new THREE.SphereGeometry(3, 32, 16);
var material =
new THREE.MeshPhongMaterial({color: 0xff0000});
var mesh = new THREE.Mesh(geometry, material);
var scene = new THREE.Scene();
scene.add(light);
scene.add(mesh);
renderer.render(scene, camera);
描画領域をDOM Treeに追加
308. var renderer =
new THREE.WebGLRenderer({antialias: true});
renderer.setSize(500, 500);
renderer.setClearColorHex(0xcccccc, 1);
var disp = document.getElementById('disp');
disp.appendChild(renderer.domElement);
var camera = new THREE.PerspectiveCamera();
camera.position = new THREE.Vector3(0, 0, 8);
camera.lookAt(new THREE.Vector3(0, 0, 0));
var light = new THREE.DirectionalLight(0xcccccc);
light.position = new THREE.Vector3(1, 1, 1);
var geometry = new THREE.SphereGeometry(3, 32, 16);
var material =
new THREE.MeshPhongMaterial({color: 0xff0000});
var mesh = new THREE.Mesh(geometry, material);
var scene = new THREE.Scene();
scene.add(light);
scene.add(mesh);
renderer.render(scene, camera);
カメラを作成
カメラの位置と方向を指定
309. var renderer =
new THREE.WebGLRenderer({antialias: true});
renderer.setSize(500, 500);
renderer.setClearColorHex(0xcccccc, 1);
var disp = document.getElementById('disp');
disp.appendChild(renderer.domElement);
var camera = new THREE.PerspectiveCamera();
camera.position = new THREE.Vector3(0, 0, 8);
camera.lookAt(new THREE.Vector3(0, 0, 0));
var light = new THREE.DirectionalLight(0xcccccc);
light.position = new THREE.Vector3(1, 1, 1);
var geometry = new THREE.SphereGeometry(3, 32, 16);
var material =
new THREE.MeshPhongMaterial({color: 0xff0000});
var mesh = new THREE.Mesh(geometry, material);
var scene = new THREE.Scene();
scene.add(light);
scene.add(mesh);
renderer.render(scene, camera);
色を指定し、ライトを作成
ライトの位置を指定
310. var renderer =
new THREE.WebGLRenderer({antialias: true});
renderer.setSize(500, 500);
renderer.setClearColorHex(0xcccccc, 1);
var disp = document.getElementById('disp');
disp.appendChild(renderer.domElement);
var camera = new THREE.PerspectiveCamera();
camera.position = new THREE.Vector3(0, 0, 8);
camera.lookAt(new THREE.Vector3(0, 0, 0));
var light = new THREE.DirectionalLight(0xcccccc);
light.position = new THREE.Vector3(1, 1, 1);
var geometry = new THREE.SphereGeometry(3, 32, 16);
var material =
new THREE.MeshPhongMaterial({color: 0xff0000});
var mesh = new THREE.Mesh(geometry, material);
var scene = new THREE.Scene();
scene.add(light);
scene.add(mesh);
renderer.render(scene, camera);
大きさと目の細かさを指定し、
形状(球)を作成
311. var renderer =
new THREE.WebGLRenderer({antialias: true});
renderer.setSize(500, 500);
renderer.setClearColorHex(0xcccccc, 1);
var disp = document.getElementById('disp');
disp.appendChild(renderer.domElement);
var camera = new THREE.PerspectiveCamera();
camera.position = new THREE.Vector3(0, 0, 8);
camera.lookAt(new THREE.Vector3(0, 0, 0));
var light = new THREE.DirectionalLight(0xcccccc);
light.position = new THREE.Vector3(1, 1, 1);
var geometry = new THREE.SphereGeometry(3, 32, 16);
var material =
new THREE.MeshPhongMaterial({color: 0xff0000});
var mesh = new THREE.Mesh(geometry, material);
var scene = new THREE.Scene();
scene.add(light);
scene.add(mesh);
renderer.render(scene, camera);
色を指定し、マテリアルを作成
312. var renderer =
new THREE.WebGLRenderer({antialias: true});
renderer.setSize(500, 500);
renderer.setClearColorHex(0xcccccc, 1);
var disp = document.getElementById('disp');
disp.appendChild(renderer.domElement);
var camera = new THREE.PerspectiveCamera();
camera.position = new THREE.Vector3(0, 0, 8);
camera.lookAt(new THREE.Vector3(0, 0, 0));
var light = new THREE.DirectionalLight(0xcccccc);
light.position = new THREE.Vector3(1, 1, 1);
var geometry = new THREE.SphereGeometry(3, 32, 16);
var material =
new THREE.MeshPhongMaterial({color: 0xff0000});
var mesh = new THREE.Mesh(geometry, material);
var scene = new THREE.Scene();
scene.add(light);
scene.add(mesh);
renderer.render(scene, camera);
形状とマテリアルから
メッシュを作成
313. var renderer =
new THREE.WebGLRenderer({antialias: true});
renderer.setSize(500, 500);
renderer.setClearColorHex(0xcccccc, 1);
var disp = document.getElementById('disp');
disp.appendChild(renderer.domElement);
var camera = new THREE.PerspectiveCamera();
camera.position = new THREE.Vector3(0, 0, 8);
camera.lookAt(new THREE.Vector3(0, 0, 0));
var light = new THREE.DirectionalLight(0xcccccc);
light.position = new THREE.Vector3(1, 1, 1);
var geometry = new THREE.SphereGeometry(3, 32, 16);
var material =
new THREE.MeshPhongMaterial({color: 0xff0000});
var mesh = new THREE.Mesh(geometry, material);
var scene = new THREE.Scene();
scene.add(light);
scene.add(mesh);
renderer.render(scene, camera);
シーンを作成し、
ライト・メッシュを
シーンに追加
314. var renderer =
new THREE.WebGLRenderer({antialias: true});
renderer.setSize(500, 500);
renderer.setClearColorHex(0xcccccc, 1);
var disp = document.getElementById('disp');
disp.appendChild(renderer.domElement);
var camera = new THREE.PerspectiveCamera();
camera.position = new THREE.Vector3(0, 0, 8);
camera.lookAt(new THREE.Vector3(0, 0, 0));
var light = new THREE.DirectionalLight(0xcccccc);
light.position = new THREE.Vector3(1, 1, 1);
var geometry = new THREE.SphereGeometry(3, 32, 16);
var material =
new THREE.MeshPhongMaterial({color: 0xff0000});
var mesh = new THREE.Mesh(geometry, material);
var scene = new THREE.Scene();
scene.add(light);
scene.add(mesh);
renderer.render(scene, camera);
シーンとカメラと指定し
レンダリング(描画)
315. var renderer =
new THREE.WebGLRenderer({antialias: true});
renderer.setSize(500, 500);
renderer.setClearColorHex(0xcccccc, 1);
var disp = document.getElementById('disp');
disp.appendChild(renderer.domElement);
var camera = new THREE.PerspectiveCamera();
camera.position = new THREE.Vector3(0, 0, 8);
camera.lookAt(new THREE.Vector3(0, 0, 0));
var light = new THREE.DirectionalLight(0xcccccc);
light.position = new THREE.Vector3(1, 1, 1);
var geometry = new THREE.SphereGeometry(3, 32, 16);
var material =
new THREE.MeshPhongMaterial({color: 0xff0000});
var mesh = new THREE.Mesh(geometry, material);
var scene = new THREE.Scene();
scene.add(light);
scene.add(mesh);
renderer.render(scene, camera);
329. 付録2
WebGL
3D Interactive Asteroid Space Visualization - Asterank
http://www.asterank.com/3d/
+360º - Car Visualizer - Three.js
http://carvisualizer.plus360degrees.com/threejs/
HelloRacer™ WebGL
http://helloracer.com/webgl/
Water/Ocean
http://oos.moxiecode.com/js_webgl/water_noise/
Md5 Test
http://oos.moxiecode.com/js_webgl/md5_test/
Alcatraz Radiotherapy
http://scoopex1988.org/released/prods/2012/RadioTherapy/
ACTISKU ¦ 3D Real-time Crypt demo ¦ WebGL
http://crypt-webgl.unigine.com/game.html
Quake 3 WebGL Demo
http://media.tojicode.com/q3bsp/
330. 付録3
Combination
Color Monoliths
https://github.com/youkinjoh/color-monoliths
VCMap - Video Chat on The Map
http://vcmap.net/
Face substitution
http://auduno.github.io/clmtrackr/examples/facesubstitution.html
PhiloGL - Real time color 3D histogram
http://www.senchalabs.org/philogl/PhiloGL/examples/histogram/
Chrome World Wide Maze
for Machine
http://chrome.com/maze/
for Android
http://g.co/maze
Cube Slam
https://www.cubeslam.com/
DOM Visualizer - Leap
https://github.com/youkinjoh/leap-motion-multiplace-dom-visualizer
