Créez les interfaces du futur avec les APIs d aujourd hui. Thursday, October 18, 12

Size: px

Start display at page:

Download "Créez les interfaces du futur avec les APIs d aujourd hui. Thursday, October 18, 12"

Arthur Eric Taylor
10 years ago
Views:

1 Créez les interfaces du futur avec les APIs d aujourd hui

2 Je suis web opener chez

3 Deux interfaces futuristes utilisant des APIs web

4 + web sockets + device orientation = + du WebGL!!

5 server.js α, β, ɣ α, β, ɣ remote.js teapot.js

6 web sockets

7 remote.js: var websocketserverurl = 'ws:// :8080/'; window.addeventlistener('domcontentloaded', function init() { //init websocket connections //device orientation sync socket var ws = new WebSocket(websocketServerUrl); ws.onopen = function() { ws.opened = true; }; //listen to device orientation window.addeventlistener('deviceorientation', function(e) { if (ws.opened) { ws.send(json.stringify({ alpha: e.alpha, beta: e.beta, gamma: e.gamma })); } }); });

var ws = new WebSocket(websocketServerUrl); ws.onopen = function() { ws.

8 server.js: // ws server var ws = require('websocket-server'); var wsserver = ws.createserver(); wsserver.addlistener('connection', function(connection){ connection.addlistener('message', function(msg) { wsserver.broadcast(msg); }); }); wsserver.listen(8080);

9 teapot.js: window.addeventlistener('domcontentloaded', function init() { //connect to server using websockets var ws = new WebSocket('ws:// :8080/'); ws.onopen = function() { ws.onmessage = function(e) { var data = JSON.parse(e.data), avalue = data.alpha / 180 * Math.PI, bvalue = data.beta / 180 * Math.PI, gvalue = data.gamma / 180 * Math.PI; }; }; }); teapot.rotation.set(gvalue, avalue, -bvalue);

new WebSocket('ws://10.112.0.139:8080/'); ws.onopen = function() { ws.

11 socket.io

12 device orientation

13 remote.js: //listen to device orientation window.addeventlistener('deviceorientation', function(e) { angles.innerhtml = 'alpha: ' + e.alpha + ', beta: ' + e.beta + ', gamma: ' + e.gamma; if (ws.opened) { ws.send(json.stringify({ alpha: e.alpha, beta: e.beta, gamma: e.gamma })); } });

15 source: public-geolocation/2012jun/0000.html All Android-based test results shown below were obtained from a HTC One X running Android 4.0. All iosbased test results were obtained from an Apple ipad running ios 5.1. N up up α β ɣ Chrome beta for Android / / FF mobile for Android 360/ / Opera Mobile for Android 0/ / Safari for ios / /180 Specification 0/ /

All iosbased test results were obtained from an Apple ipad running ios 5.1.

16 et tout ça n est que pour un dispositif!

17 1. shim: gist.github.com/ (crée par richtr) 2. étalonnage fait à travers d une UI

18 WebGL

19 three.js

21 // scene size var WIDTH = 724, HEIGHT = 512; // get the DOM element to attach to var container = $('container'); // create a WebGL renderer, set its size and append it to the DOM var renderer = new THREE.WebGLRenderer(); renderer.setsize(width, HEIGHT); renderer.setclearcolorhex(0x111111, 1); renderer.clear(); container.appendchild(renderer.domelement); // create a scene var scene = new THREE.Scene();

22 // camera settings: fov, aspect ratio, near, far var FOV = 45, ASPECT = WIDTH / HEIGHT, NEAR = 0.1, FAR = 10000; // create a camera and position camera on z axis (starts at 0,0,0) var camera = new THREE.PerspectiveCamera( FOV, ASPECT, NEAR, FAR); camera.position.z = 100; // add the camera to the scene scene.add(camera); // create some lights, position them and add it to the scene var spotlight = new THREE.SpotLight(); spotlight.position.set( 170, 330, -160 ); scene.add(spotlight); ambilight = new THREE.AmbientLight(0x333333); scene.add(ambilight); //enable shadows on the renderer renderer.shadowmapenabled = true;

23 // add an object (teapot) to the scene var teapot; var loader = new THREE.JSONLoader(), createscene = function createscene( geometry ) { var material = new THREE.MeshFaceMaterial(); teapot = new THREE.Mesh( geometry, material ); teapot.scale.set(8, 8, 8); teapot.position.set( 0, -10, 0 ); scene.add( teapot ); console.log('matrix ' + teapot.matrix); console.log('rotation ' + teapot.rotation.x); }; loader.load('teapot-model.js', createscene ); // draw renderer.render(scene, camera); animate(); //animate function animate() { requestanimationframe(animate); renderer.render(scene, camera); }

25 canvas 2D?

26 + getusermedia = + du WebGL!!

27 getusermedia

28 <video id="camera" autoplay></video> var video = document.getelementbyid("camera"); navigator.getusermedia({ video: true }, function(stream) { video.src = window.url.createobjecturl(stream) stream; }, function() { //error... }); ** vous devez ajouter ces deux lignes pour que vôtre code marche dans tous les navigateurs navigator.getusermedia = navigator.getusermedia navigator.webkitgetusermedia navigator.mozgetusermedia navigator.msgetusermedia; window.url = window.url window.webkiturl window.mozurl window.msurl;

30 headtrackr.js

31 <canvas id="inputcanvas" width="320" height="240" style="display:none"></canvas> <video id="inputvideo" autoplay loop></video> <script> var videoinput = document.getelementbyid('inputvideo'); var canvasinput = document.getelementbyid('inputcanvas'); var htracker = new headtrackr.tracker(); htracker.init(videoinput, canvasinput); htracker.start(); </script>

32 // set up camera controller for head-coupled perspective headtrackr.controllers.three.realisticabsolutecameracontrol( camera, 27, [0,0,50], new THREE.Vector3(0,0,0), {damping : 0.5}); {THREE.PerspectiveCamera} camera {number} scaling size of screen in 3d-model relative to vertical size of computer screen in real life {array} fixedposition array (x,y,z) w/ the position of the real life screen in the 3d-model space coordinates {THREE.Vector3} lookat the object/position the camera should be pointed towards {object} params optional object with optional parameters

33 document.addeventlistener('headtrackingevent', function(event) { scene.fog = new THREE.Fog(0x000000, 1+(event.z*27), 3000+(event.z*27)); }, false); * x : position of head in cm's right of camera as seen from users point of view (see figure) * y : position of head in cm's above camera (see figure) * z : position of head in cm's distance from camera (see figure)

34 WebGL

35 three.js

36 //top wall plane1 = new THREE.Mesh(new THREE.PlaneGeometry(500, 3000, 5, 15), new THREE.MeshBasicMaterial({color: 0xcccccc, wireframe : true })); plane1.rotation.x = Math.PI/2; plane1.position.y = 250; plane1.position.z = ; scene.add(plane1);

37 var geometry = new THREE.Geometry(); geometry.vertices.push( new THREE.Vertex(new THREE.Vector3(0, 0, ))); geometry.vertices.push(new THREE.Vertex( new THREE.Vector3(0, 0, z))); var line = new THREE.Line(geometry, new THREE.LineBasicMaterial({color: 0xeeeeee })); line.position.x = x; line.position.y = y; scene.add(line);

39 github.com/luzc/wiimote auduno.github.com/ headtrackr/examples/targets.html github.com/auduno/headtrackr

40 shinydemos.com/touch-tracker github.com/operasoftware

41 @gerbille github.com/luzc dev.opera.com

Technological Educational Institute of Crete School of Applied Technology Department of Informatics Engineering

Technological Educational Institute of Crete School of Applied Technology Department of Informatics Engineering Paper Title Integrating WebRTC and X3DOM: Bridging the Gap between Communications and Graphics