197. 何故高速通信が可能か
ある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!
198. 何故高速通信が可能か
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
236. Media Capture and Streams
(getUserMedia)
ブラウザからマイクやカメラにアクセス
利用範囲はWebRTC以外とも
音声処理(with Web Audio API)
ボイスチェンジャー etc.
画像処理(with Canvas)
顔検出 etc.
顔認識ができるようになるのも時間の問題か?
293. 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);
294. 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);
レンダラーを作成し、サイズと色を指定
295. 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に追加
296. 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);
カメラを作成
カメラの位置と方向を指定
297. 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);
色を指定し、ライトを作成
ライトの位置を指定
298. 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);
大きさと目の細かさを指定し、
形状(球)を作成
299. 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);
色を指定し、マテリアルを作成
300. 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);
形状とマテリアルから
メッシュを作成
301. 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);
シーンを作成し、
ライト・メッシュを
シーンに追加
302. 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);
シーンとカメラと指定し
レンダリング(描画)
303. 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);