La 3D sur le web avec Babylon.js pas à pasMicrosoft
"Aujourd’hui, la meilleure solution pour afficher du contenu 3D dans une page web est d’utiliser la technologie WebGL.
KEYVEO utilise cette technologie basée sur le WebGL avec le moteur open source Babylon.js, qui vous permet de créer très facilement un monde virtuel à intégrer dans un site web. Fluide, légère, sans plug-in, cette technologie vous ouvre un champs des possibles dont seule votre imagination est la limite !
Parce qu'une démo vaut toutes les explications, venez découvrir comment créer une scène virtuelle 3D, en live, avec Babylon.js. Enfin, un temps d'échange nous permettra de répondre à vos questions autour de la 3D sur le web."
Samir ROUABHI's slides for the presentation "The Future of Javascript" in The Algiers Developer Meetup (http://algiers-meetup.org/) 3rd of october, 2015
The Future of JavaScript, presented by Samir Rouabhi at the 3rd edition of Algiers Developer Meetup, which was held at Djezzy Training Center on October 3rd, 2015
Initiation à la réalité augmentée sur Windows Phone 7.5 (Mango)Microsoft
Avec Windows Phone 7.5 (Mango) le développeur a maintenant accès au flux vidéo de la caméra, et à l'intégralité des capteurs de mouvements disponible sur le téléphone. Dans cette session nous expliquerons les concepts mathématiques de base, ainsi que les APIs Silverlight et XNA qu'il faut connaitre pour ajouter des vues "augmentées" dans vos applications, avec comme exemples d'applications: - détecter des tags ou des codes barres, et éventuellement afficher des informations par dessus - superposer des informations géolocalisées sur la vue caméra - incruster des objets en 3d dans une vidéo Cette session est une introduction et ne demande donc qu'une connaissance de base du développement, les principes étant applicables pour la plupart sur d'autres plateformes, mobiles ou non.
La 3D sur le web avec Babylon.js pas à pasMicrosoft
"Aujourd’hui, la meilleure solution pour afficher du contenu 3D dans une page web est d’utiliser la technologie WebGL.
KEYVEO utilise cette technologie basée sur le WebGL avec le moteur open source Babylon.js, qui vous permet de créer très facilement un monde virtuel à intégrer dans un site web. Fluide, légère, sans plug-in, cette technologie vous ouvre un champs des possibles dont seule votre imagination est la limite !
Parce qu'une démo vaut toutes les explications, venez découvrir comment créer une scène virtuelle 3D, en live, avec Babylon.js. Enfin, un temps d'échange nous permettra de répondre à vos questions autour de la 3D sur le web."
Samir ROUABHI's slides for the presentation "The Future of Javascript" in The Algiers Developer Meetup (http://algiers-meetup.org/) 3rd of october, 2015
The Future of JavaScript, presented by Samir Rouabhi at the 3rd edition of Algiers Developer Meetup, which was held at Djezzy Training Center on October 3rd, 2015
Initiation à la réalité augmentée sur Windows Phone 7.5 (Mango)Microsoft
Avec Windows Phone 7.5 (Mango) le développeur a maintenant accès au flux vidéo de la caméra, et à l'intégralité des capteurs de mouvements disponible sur le téléphone. Dans cette session nous expliquerons les concepts mathématiques de base, ainsi que les APIs Silverlight et XNA qu'il faut connaitre pour ajouter des vues "augmentées" dans vos applications, avec comme exemples d'applications: - détecter des tags ou des codes barres, et éventuellement afficher des informations par dessus - superposer des informations géolocalisées sur la vue caméra - incruster des objets en 3d dans une vidéo Cette session est une introduction et ne demande donc qu'une connaissance de base du développement, les principes étant applicables pour la plupart sur d'autres plateformes, mobiles ou non.
Présentation réalisée par MBA Multimedia dans le cadres d'un Expresso de Rennes Atalante, sur les techniques HTML5 et les transformations CSS3D avec, comme exemple, le projet W3D pour illustrer le web 3D. Présentation effectuée par Julien Le Thuaut, ingénieur R&D de la société MBA Multimédia, agence rennaise de communication numérique.
La présentation aborde les points suivants :
- Description des innovations HTML5/CSS3 en termes de visualisation, transition, animation et transformation 3D
- Exemples techniques et illustrations sur des cas concrets
- Les cas d’utilisation en IHM Web (UI/UX)
- Les problématiques de support (navigateur, matériel…)
- Les outils, ressources, sites intéressants…
Les Expressos de Rennes Atalante sont des rendez-vous bimestriels que propose la technopole dans le cadre de La Cantine numérique rennaise. Ouverts à tous, leur objectif est d’échanger sur des sujets d’actualités relatifs aux nouvelles technologies et à leurs usages.
Nouveautés JavaScript dans le monde Microsoftdavrous
Présentation delivrée le 19 mars 2015 lors du JavaScript Open Day: http://www.meetup.com/Javascript-Open-Day/events/220087351/
Au programme: les nouveautés du moteur du projet Spartan comme Web Audio ou ECMAScript 6
Session donnée lors du Drupal Camp Lyon 2012. Présentant les différentes alternatives pour gérer la mobilité avec Drupal.
- Responsive Design
- Contextes mobiles (themes mobiles)
- Applications Natives et intégrations en Web Services ou HTML5
Room ou Realm : Quelle base de données pour vos applications Android ?Ludovic ROLAND
Lors de la dernière I/O 2017, Google a annoncé la mise à disposition aux développeurs d'un ensemble de d'outils et composants regroupés sous le nom "Android Architecture Components".
Le but est d'aider les développeurs à développer des applications robustes, testables et maintenables permettant notamment de manipuler les données et intervenir sur le cycle de vie des écrans.
Dans le cadre de cette présentation, nous allons plus particulièrement nous intéresser au module "Room", une couche d'abstraction à SQLite (ORM) permettant de manipuler la base de données des applications et assurer la persistance des données.
Puisque Realm est aujourd'hui à la mode mais présente des limitations, nous comparerons les deux outils sur plusieurs angles :
• configuration
• gestion d'une entité avec une relation
• écriture des requêtes
• rapidité d'exécution
• gestion de la migration
• etc.
Nous verrons ainsi si Room est, à ce stade, prometteur ou si au contraire, Realm a encore de beaux jours devant lui.
Analyse et optimisation des performances des applications Windows Phone 7.5Microsoft
Dans cette sessions nous aborderons les points clés pour la conception et la réalisation d'une application Windows Phone performante et réactive. Nous verrons comment optimiser votre code pour garantir une exécution optimale que ce soit au niveau de la mémoire que de la vitesse d'exécution. Nous en profiterons pour partager nos trucs & astuces de développement, comme par exemple la création d'un contrôle pour tracer l'utilisation mémoire, ou encore l'utilisation du profiler de VS2010 A propos des speakers : • Jérémy Alles : MVP Client App Dev, blogueur (www.japf.fr), rédacteur pour le magazine Programmez!, intervenant AskTheExpert, voyageur (MVPSummit 2011, //BUILD 2011), expert WPF/Silverlight/WindowsPhone/Windows8 • Charlotte Chavancy : rédacteur pour le magazine Programmez!, expert et formatrice WPF/Silverlight/WindowsPhone/Windows8
This document discusses a public live streaming mobile app that allows users to geolocate or search by hashtag to view live streams from other users. The app treats every user both as a node that can broadcast streams and as a viewer of other streams. It aims to crowdsource live media reporting from everyday users rather than traditional media organizations. The document promotes the app by saying it provides truthful live streams without filtering, as users serve as both broadcasters and viewers on the network.
Présentation réalisée par MBA Multimedia dans le cadres d'un Expresso de Rennes Atalante, sur les techniques HTML5 et les transformations CSS3D avec, comme exemple, le projet W3D pour illustrer le web 3D. Présentation effectuée par Julien Le Thuaut, ingénieur R&D de la société MBA Multimédia, agence rennaise de communication numérique.
La présentation aborde les points suivants :
- Description des innovations HTML5/CSS3 en termes de visualisation, transition, animation et transformation 3D
- Exemples techniques et illustrations sur des cas concrets
- Les cas d’utilisation en IHM Web (UI/UX)
- Les problématiques de support (navigateur, matériel…)
- Les outils, ressources, sites intéressants…
Les Expressos de Rennes Atalante sont des rendez-vous bimestriels que propose la technopole dans le cadre de La Cantine numérique rennaise. Ouverts à tous, leur objectif est d’échanger sur des sujets d’actualités relatifs aux nouvelles technologies et à leurs usages.
Nouveautés JavaScript dans le monde Microsoftdavrous
Présentation delivrée le 19 mars 2015 lors du JavaScript Open Day: http://www.meetup.com/Javascript-Open-Day/events/220087351/
Au programme: les nouveautés du moteur du projet Spartan comme Web Audio ou ECMAScript 6
Session donnée lors du Drupal Camp Lyon 2012. Présentant les différentes alternatives pour gérer la mobilité avec Drupal.
- Responsive Design
- Contextes mobiles (themes mobiles)
- Applications Natives et intégrations en Web Services ou HTML5
Room ou Realm : Quelle base de données pour vos applications Android ?Ludovic ROLAND
Lors de la dernière I/O 2017, Google a annoncé la mise à disposition aux développeurs d'un ensemble de d'outils et composants regroupés sous le nom "Android Architecture Components".
Le but est d'aider les développeurs à développer des applications robustes, testables et maintenables permettant notamment de manipuler les données et intervenir sur le cycle de vie des écrans.
Dans le cadre de cette présentation, nous allons plus particulièrement nous intéresser au module "Room", une couche d'abstraction à SQLite (ORM) permettant de manipuler la base de données des applications et assurer la persistance des données.
Puisque Realm est aujourd'hui à la mode mais présente des limitations, nous comparerons les deux outils sur plusieurs angles :
• configuration
• gestion d'une entité avec une relation
• écriture des requêtes
• rapidité d'exécution
• gestion de la migration
• etc.
Nous verrons ainsi si Room est, à ce stade, prometteur ou si au contraire, Realm a encore de beaux jours devant lui.
Analyse et optimisation des performances des applications Windows Phone 7.5Microsoft
Dans cette sessions nous aborderons les points clés pour la conception et la réalisation d'une application Windows Phone performante et réactive. Nous verrons comment optimiser votre code pour garantir une exécution optimale que ce soit au niveau de la mémoire que de la vitesse d'exécution. Nous en profiterons pour partager nos trucs & astuces de développement, comme par exemple la création d'un contrôle pour tracer l'utilisation mémoire, ou encore l'utilisation du profiler de VS2010 A propos des speakers : • Jérémy Alles : MVP Client App Dev, blogueur (www.japf.fr), rédacteur pour le magazine Programmez!, intervenant AskTheExpert, voyageur (MVPSummit 2011, //BUILD 2011), expert WPF/Silverlight/WindowsPhone/Windows8 • Charlotte Chavancy : rédacteur pour le magazine Programmez!, expert et formatrice WPF/Silverlight/WindowsPhone/Windows8
This document discusses a public live streaming mobile app that allows users to geolocate or search by hashtag to view live streams from other users. The app treats every user both as a node that can broadcast streams and as a viewer of other streams. It aims to crowdsource live media reporting from everyday users rather than traditional media organizations. The document promotes the app by saying it provides truthful live streams without filtering, as users serve as both broadcasters and viewers on the network.
Présentation de soutenance pour notre semaine intensive de design consistant à concevoir le nouveau site internet d'Arc'teryx, un des leaders en terme d'équipements de haute montagne.
Présentation projetée dans les locaux de Bouygues Telecom (Tour Sequana, Paris) devant une centaine de managers résumant le concept de notre projet réalisé en une nuit à HETIC.
----------------------
Plus d'infos : http://www.vincentgarreau.com/store/vainqueur-bouygues-ux-challenge/
Animation Flash - HETIC, une passion à vivre au rythme des saisonsVincent Garreau
Présentation de notre soutenance pour notre projet d'animation Flash : HETIC, une passion à vivre au rythme des saisons.
Plus d'info sur : http://www.vincentgarreau.com/animation-flash-hetic-une-passion-a-vivre-au-rythme-des-saisons/
Semaine de projet H1 P2015 - HETIC - Deccco.comVincent Garreau
Présentation d'une soutenance au terme de notre semaine de projet consistant à réaliser l'intégration complète d'un site par le biais de maquettes graphiques.
H1 P2015 - HETIC - 2nd Trimestre
7. WebGL OpenGL Rendu 3D
Dans une
balise <canvas>
Javascript WebGLRenderingContext
8. Compatibilité
Desktop
Premières implémentations fin 2009
Chrome 8.0+ Safari 5.1+ Firefox 4.0+ Opera 12.0+ IE
IEWebGL
Chrome Frame
...
9. Compatibilité
Tablette / Mobile
Premières implémentations fin 2011
Blackberry Chrome Safari
Opera Firefox Android Opera
Browser iOS / And. iOS
Mobile Android Browser Mini
(PlayBook) (Dev iAd.) (Dev iAd.)
10. Comment on fait ça ?
Coder en WebGL natif
ou
Utiliser une librairie
20. 2 Caméra
1 Scène 2 Caméra 3 Objets 4 Lumière 5 Rendu
// Création d’une caméra
var camera = new THREE.PerspectiveCamera(
75, // Angle de vue en degrés
window.innerWidth/window.innerHeight, // Vue ratio
0.1, // Distance minimale (axe Z)
1000 // Distance maximale (axe Z)
);
// Position de la caméra sur l’axe Z
camera.position.z = 5;
22. 3 Objets
1 Scène 2 Caméra 3 Objets 4 Lumière 5 Rendu
// Création d’une forme géométrique (ici un carré)
var cubeGeometry = new THREE.CubeGeometry(1,1,1),
cubeMaterial = new THREE.MeshLambertMaterial({
color: 0xFF0000
});
var cube = new THREE.Mesh(cubeGeometry,cubeMaterial);
// Rotation du cube (X, Y, Z)
cube.rotation.set(100,100,0);
// On ajoute le cube à notre scène
scene.add(cube);
23. 3 Objets
1 Scène 2 Caméra 3 Objets 4 Lumière 5 Rendu
// Importer un modèle SketchUp (Collada, .dae)
new THREE.ColladaLoader().load('models/piano.dae',
function(model){
var piano = model.scene;
piano.scale.set(0.1, 0.1, 0.1);
piano.position.set(-10, -15, 0);
piano.rotation.set(Math.PI/8, Math.PI/4, 0);
scene.add(piano);
});
24. 3 Objets
1 Scène 2 Caméra 3 Objets 4 Lumière 5 Rendu
// Importer un modèle .obj converti en .js
new THREE.JSONLoader().load('models/A380.js',
function(planeGeometry, material){
var planeMaterial = new THREE.MeshFaceMaterial(
material
);
var plane = new THREE.Mesh(
planeGeometry, planeMaterial
);
scene.add(plane);
}, 'models/A380');
28. 5 Rendu
1 Scène 2 Caméra 3 Objets 4 Lumière 5 Rendu
var renderer = new THREE.WebGLRenderer();
// Taille du rendu
renderer.setSize(window.innerWidth, window.innerHeight);
// On intègre le rendu dans la page
document.body.appendChild(renderer.domElement);
function render(){
requestAnimationFrame(render); // Rafraîchissement
renderer.render(scene, camera); // Rendu
}
render(); // On lance le rendu
29. Bien d’autres méthodes
existent...
Création d’ombres, différents types de lumières, de matières
et de caméras, géométries et textures dynamiques...
mrdoob.github.com/three.js/docs
31. En conclusion, le WebGL c’est...
Une forte valeur ajoutée
« expérience utilisateur »
Pas si difficile que ça, notamment avec
Three.js (des notions en 3D est un plus)
Une technologie qui tend à se démocratiser
(mobile, e-commerce...)
32. Merci !
Slides + Démos
vincentgarreau.com/webgl.zip
Des questions ?