![Page 1: Découverte du moteur de rendu du projet Spartan](https://reader030.vdocuments.pub/reader030/viewer/2022032421/55a6c0ff1a28ab31688b4861/html5/thumbnails/1.jpg)
AMBIENT INTELLIGENCE
tech days•
2015
#mstechdays techdays.microsoft.fr
![Page 2: Découverte du moteur de rendu du projet Spartan](https://reader030.vdocuments.pub/reader030/viewer/2022032421/55a6c0ff1a28ab31688b4861/html5/thumbnails/2.jpg)
Nouveautés du moteur de rendu du projet Spartan
David CATUHE – David ROUSSET
@deltakosh
@davrous
![Page 3: Découverte du moteur de rendu du projet Spartan](https://reader030.vdocuments.pub/reader030/viewer/2022032421/55a6c0ff1a28ab31688b4861/html5/thumbnails/3.jpg)
tech days•
2015
#mstechdays techdays.microsoft.fr
TEASING
![Page 4: Découverte du moteur de rendu du projet Spartan](https://reader030.vdocuments.pub/reader030/viewer/2022032421/55a6c0ff1a28ab31688b4861/html5/thumbnails/4.jpg)
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
![Page 5: Découverte du moteur de rendu du projet Spartan](https://reader030.vdocuments.pub/reader030/viewer/2022032421/55a6c0ff1a28ab31688b4861/html5/thumbnails/5.jpg)
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
![Page 6: Découverte du moteur de rendu du projet Spartan](https://reader030.vdocuments.pub/reader030/viewer/2022032421/55a6c0ff1a28ab31688b4861/html5/thumbnails/6.jpg)
tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE
Web Platform Runtime
![Page 7: Découverte du moteur de rendu du projet Spartan](https://reader030.vdocuments.pub/reader030/viewer/2022032421/55a6c0ff1a28ab31688b4861/html5/thumbnails/7.jpg)
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
![Page 8: Découverte du moteur de rendu du projet Spartan](https://reader030.vdocuments.pub/reader030/viewer/2022032421/55a6c0ff1a28ab31688b4861/html5/thumbnails/8.jpg)
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
![Page 9: Découverte du moteur de rendu du projet Spartan](https://reader030.vdocuments.pub/reader030/viewer/2022032421/55a6c0ff1a28ab31688b4861/html5/thumbnails/9.jpg)
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
![Page 10: Découverte du moteur de rendu du projet Spartan](https://reader030.vdocuments.pub/reader030/viewer/2022032421/55a6c0ff1a28ab31688b4861/html5/thumbnails/10.jpg)
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é
![Page 11: Découverte du moteur de rendu du projet Spartan](https://reader030.vdocuments.pub/reader030/viewer/2022032421/55a6c0ff1a28ab31688b4861/html5/thumbnails/11.jpg)
tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE
Un graph à base de nœuds audio
![Page 12: Découverte du moteur de rendu du projet Spartan](https://reader030.vdocuments.pub/reader030/viewer/2022032421/55a6c0ff1a28ab31688b4861/html5/thumbnails/12.jpg)
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);
}
![Page 13: Découverte du moteur de rendu du projet Spartan](https://reader030.vdocuments.pub/reader030/viewer/2022032421/55a6c0ff1a28ab31688b4861/html5/thumbnails/13.jpg)
tech days•
2015
#mstechdays techdays.microsoft.fr
DEMO
![Page 14: Découverte du moteur de rendu du projet Spartan](https://reader030.vdocuments.pub/reader030/viewer/2022032421/55a6c0ff1a28ab31688b4861/html5/thumbnails/14.jpg)
tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE
Mélanger des sons facilement
![Page 15: Découverte du moteur de rendu du projet Spartan](https://reader030.vdocuments.pub/reader030/viewer/2022032421/55a6c0ff1a28ab31688b4861/html5/thumbnails/15.jpg)
tech days•
2015
#mstechdays techdays.microsoft.fr
DEMO
![Page 16: Découverte du moteur de rendu du projet Spartan](https://reader030.vdocuments.pub/reader030/viewer/2022032421/55a6c0ff1a28ab31688b4861/html5/thumbnails/16.jpg)
tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE
Analyser le son
![Page 17: Découverte du moteur de rendu du projet Spartan](https://reader030.vdocuments.pub/reader030/viewer/2022032421/55a6c0ff1a28ab31688b4861/html5/thumbnails/17.jpg)
tech days•
2015
#mstechdays techdays.microsoft.fr
DEMO
![Page 18: Découverte du moteur de rendu du projet Spartan](https://reader030.vdocuments.pub/reader030/viewer/2022032421/55a6c0ff1a28ab31688b4861/html5/thumbnails/18.jpg)
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
![Page 19: Découverte du moteur de rendu du projet Spartan](https://reader030.vdocuments.pub/reader030/viewer/2022032421/55a6c0ff1a28ab31688b4861/html5/thumbnails/19.jpg)
tech days•
2015
#mstechdays techdays.microsoft.fr
DEMO
![Page 20: Découverte du moteur de rendu du projet Spartan](https://reader030.vdocuments.pub/reader030/viewer/2022032421/55a6c0ff1a28ab31688b4861/html5/thumbnails/20.jpg)
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!
![Page 21: Découverte du moteur de rendu du projet Spartan](https://reader030.vdocuments.pub/reader030/viewer/2022032421/55a6c0ff1a28ab31688b4861/html5/thumbnails/21.jpg)
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!
![Page 22: Découverte du moteur de rendu du projet Spartan](https://reader030.vdocuments.pub/reader030/viewer/2022032421/55a6c0ff1a28ab31688b4861/html5/thumbnails/22.jpg)
tech days•
2015
#mstechdays techdays.microsoft.fr
DEMO
![Page 23: Découverte du moteur de rendu du projet Spartan](https://reader030.vdocuments.pub/reader030/viewer/2022032421/55a6c0ff1a28ab31688b4861/html5/thumbnails/23.jpg)
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
![Page 24: Découverte du moteur de rendu du projet Spartan](https://reader030.vdocuments.pub/reader030/viewer/2022032421/55a6c0ff1a28ab31688b4861/html5/thumbnails/24.jpg)
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();
}
}
![Page 25: Découverte du moteur de rendu du projet Spartan](https://reader030.vdocuments.pub/reader030/viewer/2022032421/55a6c0ff1a28ab31688b4861/html5/thumbnails/25.jpg)
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);
});
![Page 26: Découverte du moteur de rendu du projet Spartan](https://reader030.vdocuments.pub/reader030/viewer/2022032421/55a6c0ff1a28ab31688b4861/html5/thumbnails/26.jpg)
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);
}
![Page 27: Découverte du moteur de rendu du projet Spartan](https://reader030.vdocuments.pub/reader030/viewer/2022032421/55a6c0ff1a28ab31688b4861/html5/thumbnails/27.jpg)
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);
}
![Page 28: Découverte du moteur de rendu du projet Spartan](https://reader030.vdocuments.pub/reader030/viewer/2022032421/55a6c0ff1a28ab31688b4861/html5/thumbnails/28.jpg)
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);
}
![Page 29: Découverte du moteur de rendu du projet Spartan](https://reader030.vdocuments.pub/reader030/viewer/2022032421/55a6c0ff1a28ab31688b4861/html5/thumbnails/29.jpg)
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
![Page 30: Découverte du moteur de rendu du projet Spartan](https://reader030.vdocuments.pub/reader030/viewer/2022032421/55a6c0ff1a28ab31688b4861/html5/thumbnails/30.jpg)
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);
}};
![Page 31: Découverte du moteur de rendu du projet Spartan](https://reader030.vdocuments.pub/reader030/viewer/2022032421/55a6c0ff1a28ab31688b4861/html5/thumbnails/31.jpg)
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
![Page 32: Découverte du moteur de rendu du projet Spartan](https://reader030.vdocuments.pub/reader030/viewer/2022032421/55a6c0ff1a28ab31688b4861/html5/thumbnails/32.jpg)
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
![Page 33: Découverte du moteur de rendu du projet Spartan](https://reader030.vdocuments.pub/reader030/viewer/2022032421/55a6c0ff1a28ab31688b4861/html5/thumbnails/33.jpg)
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) {},
};
![Page 34: Découverte du moteur de rendu du projet Spartan](https://reader030.vdocuments.pub/reader030/viewer/2022032421/55a6c0ff1a28ab31688b4861/html5/thumbnails/34.jpg)
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
![Page 35: Découverte du moteur de rendu du projet Spartan](https://reader030.vdocuments.pub/reader030/viewer/2022032421/55a6c0ff1a28ab31688b4861/html5/thumbnails/35.jpg)
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!"
![Page 36: Découverte du moteur de rendu du projet Spartan](https://reader030.vdocuments.pub/reader030/viewer/2022032421/55a6c0ff1a28ab31688b4861/html5/thumbnails/36.jpg)
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)
![Page 37: Découverte du moteur de rendu du projet Spartan](https://reader030.vdocuments.pub/reader030/viewer/2022032421/55a6c0ff1a28ab31688b4861/html5/thumbnails/37.jpg)
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
![Page 38: Découverte du moteur de rendu du projet Spartan](https://reader030.vdocuments.pub/reader030/viewer/2022032421/55a6c0ff1a28ab31688b4861/html5/thumbnails/38.jpg)
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
![Page 39: Découverte du moteur de rendu du projet Spartan](https://reader030.vdocuments.pub/reader030/viewer/2022032421/55a6c0ff1a28ab31688b4861/html5/thumbnails/39.jpg)
tech.days 2015#mstechdaysNouveautés du moteur de rendu de IE
![Page 40: Découverte du moteur de rendu du projet Spartan](https://reader030.vdocuments.pub/reader030/viewer/2022032421/55a6c0ff1a28ab31688b4861/html5/thumbnails/40.jpg)
tech days•
2015
#mstechdays techdays.microsoft.fr
DEMO
![Page 41: Découverte du moteur de rendu du projet Spartan](https://reader030.vdocuments.pub/reader030/viewer/2022032421/55a6c0ff1a28ab31688b4861/html5/thumbnails/41.jpg)
Nouveautés du moteur de rendu de IE
David CATUHE – David ROUSSET
@deltakosh
@davrous
![Page 42: Découverte du moteur de rendu du projet Spartan](https://reader030.vdocuments.pub/reader030/viewer/2022032421/55a6c0ff1a28ab31688b4861/html5/thumbnails/42.jpg)
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