découverte du moteur de rendu du projet spartan
TRANSCRIPT
AMBIENT INTELLIGENCE
tech days•
2015
#mstechdays techdays.microsoft.fr
Nouveautés du moteur de rendu du projet Spartan
David CATUHE – David ROUSSET
@deltakosh
@davrous
tech days•
2015
#mstechdays techdays.microsoft.fr
TEASING
tech.days 2015#mstechdays
Architecture du moteur de rendu
WebAudio
HTTP/2
CSS animations and transitions pour SVG
ECMAScript 6
Outils pour le développeur: F12
Nouveautés du moteur de rendu de IE
tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE
Un long chemin pour un clic
Browser
User
NetworkConnection Protocol
System &
Apps
Server
Settings
Auth
Content
CDN/EdgeWeb Platform
Runtime
tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE
Web Platform Runtime
tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE
Un seul browser – Plusieurs modes
Compatibilitemshtml.dll
IE5Quirks
IE7Compat
View
IE8Standards
Mode
IE9Standards
Mode
IE10Standards
Mode
QMEQuirks Mode
Emulation
IE11Standards
Mode
EMIEEnterprise
Mode
Edge
Nouveau moteur de renduedgehtml.dll
tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE
Le dernier stade de l’evolution auditive du web!
<bgsound>
flash<audio>
Web Audio API
Learn Web Audio API
tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE
Accès complet au stream du son
Basé sur un graph de nœuds audio
Contrôle précis du son :
En résumé
Temps
Filtres
Gain
Analyse spectrale
Convolvers
Accès par JS
Spatialisation 3D
tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE
Matériellement accéléré
Les codecs supportés sont ceux du navigateur, en général au minimum MP3 et WAV
Scénarios : jeux, logiciels de musique en ligne, reconnaissance et synthèse vocale, etc.
En résumé
tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE
Un graph à base de nœuds audio
tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE
Création du contexte audio
var canUseWebAudio = false;
try {
if (typeof AudioContext !== 'undefined') {
audioContext = new AudioContext();
canUseWebAudio = true;
} else if (typeof webkitAudioContext !== 'undefined') {
audioContext = new webkitAudioContext();
canUseWebAudio = true;
}
} catch (e) {
console.error("Web Audio: " + e.message);
}
tech days•
2015
#mstechdays techdays.microsoft.fr
DEMO
tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE
Mélanger des sons facilement
tech days•
2015
#mstechdays techdays.microsoft.fr
DEMO
tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE
Analyser le son
tech days•
2015
#mstechdays techdays.microsoft.fr
DEMO
tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE
Basé sur OpenAL (Open Audio Library)
La plupart des calculs automatiquement faits
Son omnidirectionnels ou directionnels
Spatialiser
tech days•
2015
#mstechdays techdays.microsoft.fr
DEMO
tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE
Oscillators
Sons procéduraux
Filtres
Effets via les convolvers (reverb, cathédrale, téléphone, etc.)
Compression dynamique
Et bien d’autres choses encore!
tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE
Géré par l’IETF et basé sur SPDY/3
Purement retro-compatible avec l’ancien : mêmes méthodes, entêtes, codes d’erreurs.
Conçu pour être plus rapide et efficace grâce notamment au multiplexage ou du push depuis le serveur
Dépoussiérons ce vieux HTTP 1.1 de 1999!
tech days•
2015
#mstechdays techdays.microsoft.fr
DEMO
tech.days 2015#mstechdaysTitre session pied de page
Le cœur de JavaScript est défini par le standard ECMA-262
Le langage ainsi défini se nomme ECMAScript
Très proche de TypeScript
tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE
function Mesh(name) {
// call the superclass constructor
BABYLON.AbstractMesh.call(this, name);
// initialize instance properties
this.color = BABYLON.Vector3.Color3(); ...
};
// inherit behavior from Mesh
Mesh.prototype = Object.create(BABYLON.AbstractMesh.prototype);
Mesh.prototype.constructor = Mesh;
// define an overridden update() method
Mesh.prototype.render = function() {
...
// call base version of same method
BABYLON.AbstractMesh.prototype. render.call(this);
};
Classesclass Mesh extends BABYLON.AbstractMesh {
constructor(name) {
super(name);
this.color = BABYLON.Vector3.Color3();
}
render() {
...
super.render();
}
}
tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE
fs.readFile('config.json',
function (error, text) {
if (error) {
console.error('Error while reading config file');
} else {
try {
var obj = JSON.parse(text);
console.log(JSON.stringify(obj, null, 4));
} catch (e) {
console.error('Invalid JSON in file');
}
}
});
PromisesreadFilePromisified('config.json')
.then(function (text) {
var obj = JSON.parse(text);
console.log(JSON.stringify(obj, null, 4));
})
.catch(function (reason) {
// File read error or JSON SyntaxError
console.error('An error occurred', reason);
});
tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE
var arr = ['one', 'two', 'three'];
Array.prototype._someLibraryAddedThis = {};
for (var i in arr) {
if (arr.hasOwnProperty(i)) {
console.log(arr[i]);
}
}
Iteratorsvar arr = ['one', 'two', 'three'];
Array.prototype._someLibraryAddedThis = {};
for (var i of arr) {
console.log(i);
}
tech.days 2015#mstechdays
function NumberIterator(arr) {
this['@@iterator'] = function () {
var index = 0;
return {
next: function () {
if (index >= arr.length) {
return {done: true};
} else {
return {
value: parseInt(arr[index++]),
done: false
}
}
}
}
};
}
Nouveautés du moteur de rendu de IE
Iterators
for (var i of new NumberIterator([1, 2, "3"])) {
console.log(i);
}
tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE
function* count() {
yield 1;
yield 2;
yield 3;
}
var counter = count();
counter.next(); // {value: 1, done: false}
counter.next(); // {value: 2, done: false}
counter.next(); // {value: 3, done: false}
counter.next(); // {done: true, value: undefined}
Generatorsfunction* range(start, end) {
for (let i = start; i <= end; i++) {yield i;
}}
for (let i of range(5, 8)) {console.log(i);
}
tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE
var sum = (num1, num2) => { return num1 + num2; }
// ==
var sum = function(num1, num2) {
return num1 + num2;
};
Arrow functions
tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE
Arrow functions
var PageHandler = {
id: "123456",
init: function() {document.addEventListener("click", function(event) {
this.doSomething(event.type); // Erreur}, false);
},
doSomething: function(type) {console.log("Handling " + type + " for " + this.id);
}};
var PageHandler = {
id: "123456",
init: function() {document.addEventListener("click",
event => this.doSomething(event.type), false);},
doSomething: function(type) {console.log("Handling " + type + " for " + this.id);
}};
tech.days 2015#mstechdaysTitre session pied de page
Number.EPSILON
Number.isInteger(Infinity) // false
Number.isNaN("NaN") // false
Math.acosh(3) // 1.762747174039086
Math.hypot(3, 4) // 5
Math.imul(Math.pow(2, 32) - 1, Math.pow(2, 32) - 2) // 2
"abcde".contains("cd") // true
"abc".repeat(3) // "abcabcabc"
Array.from(document.querySelectorAll('*')) // Retourne un vrai Array
Array.of(1, 2, 3) // Similaire avec new Array(...) mais avec plusieurs parametres
[0, 0, 0].fill(7, 1) // [0,7,7]
[1,2,3].findIndex(x => x == 2) // 1
["a", "b", "c"].entries() // iterateur [0, "a"], [1,"b"], [2,"c"]
["a", "b", "c"].keys() // iterateur 0, 1, 2
["a", "b", "c"].values() // iterateur "a", "b", "c"
Math, Number, Object, String Built-Ins
tech.days 2015#mstechdaysTitre session pied de page
var o1 = { a: 1 };
var o2 = { b: 2 };
var o3 = { c: 3 };
var obj = Object.assign(o1, o2, o3);
console.log(obj);
// { a: 1, b: 2, c: 3 }
Math, Number, Object, String Built-Ins
tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE
function createMonster(name, power) {
return { type: 'Monster', name: name, power: power };
}
Object Literal Enhancements
function createMonster(name, power) {return { type: 'Monster', name, power };
}
var o = {property([parameters]) {},get property() {},set property(value) {},* generator() {}
};
var o = {property: function ([parameters]) {},get property() {},set property(value) {},
};
tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE
var x = [1, 2];
var y = [3, 4];
x.push(...y); // x is [1, 2, 3, 4]
var addToStore = function(category, ...items) {
store[category].push(...items);
};
Spread operator
tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE
var a = 5;
var b = 10;
`Donc ca nous fait: ${a + b} euros` // Donc ca nous fait 15 euros
// Multi ligne
console.log(`string text line 1
string text line 2`);
Template Strings// Tag
var a = 5;
var b = 10;
function tag(strings, ...values) {
console.log(strings[0]); // "Hello "
console.log(strings[1]); // " world"
console.log(values[0]); // 15
console.log(values[1]); // 50
return "Babylon.js for ever!";
}
tag`Hello ${ a + b } world ${ a * b}`;
// "Babylon.js for ever!"
tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE
Clef unique et immutable
Utile pour identifier une propriété
Symbol("foo") === Symbol("foo"); // falsevar sym = new Symbol(); // TypeError
var obj = {};
obj[Symbol("a")] = "a";
obj[Symbol.for("b")] = "b";
obj["c"] = "c";
obj.d = "d";
for (var i in obj) {
console.log(i); // "c" and "d"
}
Symbols
var obj = {};var a = Symbol('a');var b = Symbol.for('b');
obj[a] = 'localSymbol';obj[b] = 'globalSymbol';
var objectSymbols = Object.getOwnPropertySymbols(obj);
console.log(objectSymbols.length); // 2console.log(objectSymbols); // [Symbol(a), Symbol(b)]console.log(objectSymbols[0]); // Symbol(a)
tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE
var loggable = function(obj) {
return Proxy.create({
get: function get(receiver, prop) {
console.log('Getting ' + prop);
return obj[prop];
},
set: function set(receiver, prop, value) {
console.log('Setting ' + prop + ' to ' + value + '; was ' + obj[prop]);
obj[prop] = value;
});
};
var person = { name: ‘Sylvie', age: 25 };
person = loggable(person);
person.age += 1;
Proxies
tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE
var ws = new WeakSet();
var obj = {};
var foo = {};
ws.add(window);
ws.add(obj);
ws.has(window); // true
ws.has(foo); // false
ws.delete(window); ws.has(window); // false
ws.clear();
Weak Set
tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE
tech days•
2015
#mstechdays techdays.microsoft.fr
DEMO
Nouveautés du moteur de rendu de IE
David CATUHE – David ROUSSET
@deltakosh
@davrous
tech.days 2015#mstechdays
Icon made by http://www.freepik.com from http://www.flaticon.com is licensed under http://creativecommons.org/licenses/by/3.0/ CC BY 3.0
Freepik