Æon Création

FIT Angers

2018-03-23T00:00:00+01:00

FIT, présentation du Selfin'

Du 22 au 25 mars 2018

Deuxième édition du FIT, Festival International du Tourisme à Angers avec comme invité le Québec.

Conférences, présentations, rencontres, échanges, une bonne journée pendant laquelle nous avons présenté notre réalisation Selfin’Angers et discuté autour des kiosques et des applications professionnelles Camino.

Quelques secondes aux Salons Curnonsky

Enjoy and share ...

Le site dédié du Selfin'
Selfin.world
Le site dédié de Camino
Camino.pro

Blender, Three.js & AR.js

2018-03-09T00:00:00+01:00

Introduction

Cela fait quelques temps que je souhaite tester les possibilités AR (augmented reality) en web pur. Je vous fais donc part de mon expérience.

Les outils

Blender

Pour les modélisations 3D j'ai l'habitude d'utiliser blender (https://www.blender.org/), c'est un outil très puissant même si sa learning curve est un peu raide au démarrage. En effet, la modélisation pure, le texturing, en passant par le rendu photo réaliste et même l'animation, exigent de blender un très large éventail de fonctionnalités.

AR.js

Pour le rendu web j'ai choisi AR.js (https://github.com/jeromeetienne/AR.js). Cette librairie javascript est au dessus de three.js (https://threejs.org/). Elle comporte de bonnes optimisations pour les plates-formes à ressources limitées telles que les smart-phone.

A-FRAME

Il existe une librairie au dessus de three.js nommée a-frame https://aframe.io/. Elle permet de construire une scène en pseudo-html. Exemple:

<a-scene>
    <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
    <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
    <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" 
                color="#FFC65D"></a-cylinder>
    <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" 
             color="#7BC8A4"></a-plane>
    <a-sky color="#ECECEC"></a-sky>
</a-scene>

Il est même possible de créer son propre tag, pour charger des éléments dans la scène. Mes essais avec cette librairie ne m'ont pas satisfait. Le FPS était trop bas sur la plate-forme de test (galaxy tab 4). J'ai donc supprimé cette couche pour utiliser directement ArToolkitSource de AR.js.

glTF-Blender-Exporter

Enfin pour charger le modèle 3D avec les animations, j'ai choisi de passer par le format GLTF2 (https://github.com/KhronosGroup/glTF) un format libre pour les scènes 3D. Il faut savoir qu'il existe un add-on blender dans le dépôt three.js utilisant le format json. Mais celui-ci n'est plus activement maintenu, d'ailleurs les développeurs de three.js se demandent si cet addon doit rester dans le dépôt GIT de three.js (issue github). De mon coté j'ai choisi l'addon: glTF-Blender-Exporter

Du code

Voici un essai fonctionnant avec le marker HIRO

var container, stats, controls, clock, mixer;
var camera, scene, renderer, light;
var arToolkitContext;
var smoothedControls;
var clock = new THREE.Clock();
var onRenderFcts= [];
var SHADOW = false;

function initAR(){

    var arToolkitSource = new THREEx.ArToolkitSource({
        sourceType : 'webcam'
    })

    arToolkitSource.init(function onReady(){
        onResize()
    })

    window.addEventListener('resize', function(){
        onResize()
    })

    function onResize(){
        arToolkitSource.onResize()      
        arToolkitSource.copySizeTo(renderer.domElement) 
        if( arToolkitContext.arController !== null ){
            arToolkitSource.copySizeTo(arToolkitContext.arController.canvas)    
        }       
    }

    // create atToolkitContext
    arToolkitContext = new THREEx.ArToolkitContext({
        cameraParametersUrl: THREEx.ArToolkitContext.baseURL + 
            '../data/data/camera_para.dat',
        detectionMode: 'mono',
        maxDetectionRate: 30,
        canvasWidth: 80*3,
        canvasHeight: 60*3,
    })
    // initialize it
    arToolkitContext.init(function onCompleted(){
        // copy projection matrix to camera
        camera.projectionMatrix.copy( arToolkitContext.getProjectionMatrix() );
    })

    // update artoolkit on every frame
    onRenderFcts.push(function(){
        if( arToolkitSource.ready === false )   return

        arToolkitContext.update( arToolkitSource.domElement )
    })

    var markerRoot = new THREE.Group
    scene.add(markerRoot)
    var artoolkitMarker = new THREEx.ArMarkerControls(arToolkitContext, markerRoot, {
        type : 'pattern',
        patternUrl : THREEx.ArToolkitContext.baseURL + '../data/data/patt.hiro'
    })

    // build a smoothedControls
    var smoothedRoot = new THREE.Group()
    scene.add(smoothedRoot)
    smoothedControls = new THREEx.ArSmoothedControls(smoothedRoot, {
        lerpPosition: 0.4,
        lerpQuaternion: 0.3,
        lerpScale: 1,
    })
    onRenderFcts.push(function(delta){
        smoothedControls.update(markerRoot)
    })

    var arWorldRoot = smoothedRoot;
    return arWorldRoot;
}

init();
function init() {
    container = document.createElement( 'div' );
    document.body.appendChild( container );

    scene = new THREE.Scene();

    light = new THREE.DirectionalLight( 0xffffff ,2);
    light.position.set(  20, 20, 20 );

    if(SHADOW){
        light.castShadow = true;      
        light.shadow.mapSize.width = 512;  // default
        light.shadow.mapSize.height = 512; // default
        light.shadow.camera.near = 0.5;       // default
        light.shadow.camera.far = 500      // default
    }

    camera = new THREE.PerspectiveCamera();

    var loader = new THREE.GLTF2Loader();
    loader.load( 'tram2.gltf', function ( gltf ) {

        for(var index in gltf.scene.children){
            var obj = gltf.scene.children[index];
            if(SHADOW){
                if(obj.name == "Plane"){
                    obj.castShadow = false;
                    obj.receiveShadow = true;
                }else{
                    obj.castShadow = true;
                    obj.receiveShadow = true;
                }
            }
        }

        scene.add(camera);

        console.debug("camera", gltf.cameras)
        console.debug("camera", camera )
        console.debug("gltf", gltf)
        console.debug("scene", scene)

        root = initAR();

        var geometry = new THREE.CubeGeometry(1,1,1);
        var material = new THREE.MeshNormalMaterial({
            transparent : true,
            opacity: 0.5,
            side: THREE.DoubleSide
        }); 
        var mesh = new THREE.Mesh( geometry, material );

        root.add( light );
        root.add( gltf.scene );

        var animationClip = gltf.animations[ 0 ];
        mixer = new THREE.AnimationMixer( scene );
        mixer.clipAction( animationClip ).play();

        animate();

    } );

    renderer = new THREE.WebGLRenderer({
        antialias: true,
        alpha: true
    });

    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.gammaOutput = true;
    if(SHADOW){
        renderer.shadowMap.enabled = true;
        renderer.shadowMap.type = THREE.PCFSoftShadowMap;
    }

    container.appendChild( renderer.domElement );
    window.addEventListener( 'resize', onWindowResize, false );
    stats = new Stats();

    container.appendChild( stats.dom );
}
function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize( window.innerWidth, window.innerHeight );
}

var lastTimeMsec= null;
function animate(nowMsec) {
    requestAnimationFrame( animate );
    renderer.render( scene, camera );
    stats.update();

    lastTimeMsec        = lastTimeMsec || nowMsec-1000/60
    var deltaMsec       = Math.min(200, nowMsec - lastTimeMsec)
    lastTimeMsec        = nowMsec

    onRenderFcts.forEach(function(onRenderFct){
        onRenderFct(deltaMsec/1000, nowMsec/1000)
    })

    render()
}

function render() {
    var delta = 0.75 * clock.getDelta();
    mixer.update( delta );
    renderer.render( scene, camera );
}

Biolait

2017-11-16T00:00:00+01:00

Biolait - La bio partout et pour tous

Un peu de légende

Biolait nous a fait confiance dès 2014 avec la création de son site web. L'histoire s'est passé dans une écurie pendant la traite des vaches :

Tiens, dis donc tu connais pas quelqu'un qui pourrait nous refaire notre site, il serait temps qu'on s'en occupe ? On en a un mais il a besoin de grandir.
Ben nous, on peut le faire.
?
Tu sais, c'est historiquement mon travail même si depuis quelques années j'ai levé le pied autour de la programmation. Et puis début d'année prochaine je travaille avec deux développeurs supers.
D'accord, on demande une offre à plusieurs sociétés, tu peux en remettre une, pas de problème !

C'était fin 2013, ÆON Création n'était pas née et pourtant une belle histoire commençait. Depuis nous avons développé le backoffice qui permet d'interroger dynamiquement la base de données et de générer des documents, de partager de l'information par niveau d'accès, de renseigner la base, d'analyser, etc. tout un panel souple et modulable d'outils métier.

Nous avons également accompagné Biolait lors d'événements : les assemblées générales, haut lieu de rencontre entre les paysans, les 25 ans du groupement né en 1994 autour d'une poignée d'irréductibles voulant valoriser leur lait bio. Nous avons vécu de l'intérieur cette punchline « Un groupement de producteurs engagés ».

Dans le film « Témoignages clients » dont voici un extrait: Olivier buiche, Emmanuel Vasseneix, Serge Papin et Claude Gruffat..

Self'in Angers

2017-10-25T00:00:00+02:00

Self'in Angers, le selfie panoramique géant

[/sɛlfiː/], selon wikipedia

Un selfie, autoportrait, ou encore égoportrait en français canadien, est un autoportrait photographique pris dans un contexte social (en couple ou au sein d'un groupe), festif ou touristique (avec un arrière-plan célèbre) avec un smartphone, soit tenu à bout de bras, soit fixé au bout d'une perche à selfie.

Selon la ville d'Angers et mis en œuvre par ÆON Création

la perche à selfie mesure 350 mètres. Le selfie panoramique est installé promenade du bout du monde, près du château, matérialisé au sol par un cercle métallique. Là vous pouvez vous connecter grâce à votre smartphone au site « www.selfin.world ». Une fois connecté, vous déclenchez les appareils photo de l'autre coté de la Maine, en une minute vous recevez une mini vidéo avec un plan large allant du château à la cathédrale et vous montrant dans ce fabuleux paysage en un zoom saisissant.

Self'in Angers le film

Enjoy and share ...

Le site dédié
Selfin.world
On en parle
Mag ville intelligente
Club Innovation et Culture France
Créé en octobre 2008, le Club Innovation & Culture, CLIC France réunit les musées, lieux de patrimoine et lieux de culture scientifique français sensibilisés aux problématiques des nouvelles technologies numériques et de leurs usages.
Courrier de l'Ouest du 19/04/2018

Tramway d'Angers

2017-10-23T00:00:00+02:00

Timeline - Découvrez Angers

Un tramway pour la connected week

Aujourd'hui nous suivons Arthur dans son trajet quotidien. Il rentre du lycée ou il commence son année de terminale. Oreillettes vissées sur les oreilles, son dernier morceau préféré : « Green Summer » . Station « Saint Serge» , le tram arc-en-ciel s'ébroue laissant s'échapper ceux du quartier. Arthur monte. Il aime bien le tramway, c'est un moment à lui. Il pense à son dernier devoir de philo : répondre à " la question : qui suis-je ", admet-elle une réponse exacte? », il lui reste l'introduction et la conclusion à écrire, ce soir c'est bon, la nuit sera un peu plus courte mais il devrait pouvoir rendre sa copie demain.
Arrivé près du Ralliement, une image semble flotter sur la fenêtre, une carte postale ancienne vers 1900 se superpose à sa vision de la place. Il reconnaît les immeubles, voit des voitures avec chevaux et cochers. L'ancienne poste est devenue un restaurant mais les Caves du Ralliement et l'hôtel St Julien sont déjà là. Voyage.

Connected week Angers

Pour la Connected Week, vous aurez l'occasion de voir des vidéos entre les différentes stations du parcours. Elles sont contextualisées, c'est une position GPS qui en déclenche la lecture. Développé et réalisé par ÆON Création, piloté par Angers Loire Métropole et Keolis ce projet devrait se poursuivre au-delà du WEF et pourrait évoluer vers une version 2 permettant des annonces culturelles, spectacles à venir, etc. La transparence de la projection sur la fenêtre permettra une vue augmentée en superposant une image ancienne du lieu, la vidéo d'un événement qui s'est passé là, une 3D de projet urbain.
A suivre…

Laurent Minier, directeur technique de Keolis et Bernard Dupré, vice-président de l'agglo en charge des infrastructures de transport

Connected week

On en parle :

My Angers info 23/10/2017
Ouest France 23/10/2017
Angers télé journal du 23/10/2017 avec Dominique Rocha, directeur général de Keolis
Ville intelligente Mag du 23/10/2017
Courrier de l'Ouest Angers du 24/10/2017
JT 13h France3 du 24/10/2017 (début à 2'36")
La revue Bus et Car Connexion

Caves Duhard à Amboise - 37 -

2017-09-30T00:00:00+02:00

Caves Duhard à Amboise

Depuis cet été les « Caves Duhard » à Amboise invite les visiteurs dans un parcours scénographié. Ponctué d'appels à nos sens, ce parcours nous emmène en voyage au pays de la vigne et du vin en découvrant une véritable vinoscénie.
Spécialisées depuis de nombreuses années dans l'assemblage et la vente de vins, essentiellement de Vouvray, les « Caves Duhard » possèdent une collection extraordinaire de vins millésimés, des crus les plus anciens datant de 1872, année de la création des caves et de l'atelier de tonnelerie, aux crus d'aujourd'hui.
Dans ce parcours troglodyte sensoriel, ÆON Création a réalisé les audiovisuels diffusés lors de la visite : depuis les « Couleurs des vins » de Loire jusqu'à une rencontre entre Léonard de Vinci et François 1er qui a marqué à jamais les paysages du Val de Loire.

La texture du tuffeau. Les murs et plafonds sont restés bruts des méthodes d'extraction au pic des perreyeux.

Dès les premiers pas, la cave nous plonge dans les entrailles de la terre, sa texture, ses saveurs, sa pénombre, son intimité, sa parenté réticulaire avec notre réseau d'usage quotidien réveillant la curiosité et invitant à la découverte, un peu, beaucoup, passionnément.

Vous découvrirez ainsi des millésimes dans leurs contextes historiques, tous ces événements qui ont laissé leurs marques dans nos mémoires et que nous retrouvons dans une dégustation, comme si ces mémoires étaient toujours aussi présentes, aisées à réveiller et toujours prêtes à se rappeler à nos sens : 1969, les premiers pas de l'homme sur la lune, 1989 et le bicentenaire, la révolution chinoise, 1945, la fin de la guerre, la reconstruction et la création de l'ONU, etc.

Le château modélisé et adapté à la cave.

La dernière étape du parcours consiste en un mapping. Modélisée en 3D, la cave est mise en image ajustée au plus près de sa forme. Après réalisation des animations 3D avec Blender, logiciel open-source, le film est assemblé et projeté. Il est composé de séquences vidéo et de modèles adaptés au lieu. D'une durée de quelques minutes et diffusé par 8 projecteurs vidéo, il raconte une histoire, celle de la vigne ramenée par St Martin, des paysages façonnés par sa culture, du vin partagé par les hommes.

Le soir tombé, les habitants et leurs amis partagent un verre.

Pour tout voir, je vous laisse le plaisir de découvrir lors de votre visite à Amboise.

VueJS & RxJS

2017-09-21T00:00:00+02:00

Cela fait plus de deux mois déjà que je suis en stage chez Aeon création. Le temps passe vite à coder !

Le projet sur lequel je travaille est vraiment très intéressant, mais je ne peux pas vous donner beaucoup de détails car c’est top secret ;) !

Dans les grandes lignes : je programme une application web qui sera à destination des professionnels du tourisme.

Dans les petites lignes, voici quelques outils que j’utilise pour cela : les librairies Vue.JS et Rx.JS et les langages coffeeScript et pug. Pour être honnête, je ne connaissais aucune de ces technos, mis à part le html qui est bien plus facile à écrire avec le pug !

J’ai ainsi découvert le coffeeScript qui écrit bien plus simplement le javaScript mais qui m’a fait m’arracher les cheveux au début, notamment une fois où il manquait juste un espace pour que mon code fonctionne… En effet, dans le coffeeScript l’indentation et certains espaces sont significatifs. Du côté des librairies, Vue.JS me permet de créer des composants réutilisables n’importe où dans mes pages. C’est assez pratique. Mais surtout, cette librairie est vraiment bien car elle permet de rendre très réactif le rendu visuel des pages lors de changement dans les données sous-jacentes puisqu’elle se charge elle-même de la modification du DOM.

Et enfin, la librairie Rx.JS me permet de rester à l’écoute des changements ayant lieu dans la base de données dans laquelle le programme puise. Ainsi si une nouvelle donnée arrive dans la base, l’appli sera mise à jour !

Rendez-vous dans quelques semaines pour la suite de l’aventure…

Gitlab Pages, intégration continue & python 3

2017-07-21T00:00:00+02:00

Introduction

Voici les étapes pour le déploiement de notre site via l'outil CI intégré de gitlab, j'ai nommé Gitlab Pages.

Activer l'intégration continue

Configurer Gitlab avec un domaine commun pour servir les projets "statiques".
Ajouter un "Shared Runner" dans l'administration de Gitlab.
Activer les pipelines dans les settings du projet (bien caché dans la liste des options).

Configurer votre projet pour utiliser l'intégration continue

Ajouter un fichier .gitlab-ci.yml. Vous pouvez en générer un depuis un modèle directement depuis l'interface.

Attention celui généré pour pelican contient un "image: python2.7-alpine". Cette option n'est utile que si votre instance de Gitlab est configurée pour utiliser Docker. Ce qui n'est pas le cas chez nous pour le moment. Mais ça va venir rapidement.

Si vous n'utilisez pas Docker sur votre instance de Gitlab comme nous, vous devez installer python 3 "en dur" si votre pelican utilise python 3.

Vous devez aussi installer sur le serveur toutes les dépendances de votre projet, le "runner" de gitlab n'ayant pas les droits pour installer les dépendances python sur la machine.

Push

Nous hébergeons notre site sur un autre serveur que celui de notre instance Gitlab. Nous utilisons donc la commande pelican: make rsync_upload pour construire le site et l'envoyer via rsync & ssh sur l'autre serveur.

Nous avons donc généré une clef ssh pour l'utilisateur gitlab-runner (sous Ubuntu):

sudo su gitlab-runner
ssh-keygen

que nous avons copiée sur le serveur servant le site (derrière nginx compilé avec le module pagespeed). Ne pas oublier d'ouvrir les ports nécessaires sur les firewall, et tout roule ! A chaque commit & push sur la branche master le site est reconstruit et poussé sur le bon serveur.

Le fichier de configuration de l'intégration continue est donc minimal:

stages:
  - build
  - upload

build:
  stage: build
  script:
    - make publish
  only:
    - master

upload:
  stage: upload
  script:
    - make rsync_upload
  only:
    - master

Le "stage" nommé "pages" est réservé par gitlab et déclenche une copie en locale pour être servi par le nom de domaine des pages statiques Gitlab.

J'ai donc ajouté manuellement les 2 étapes (la dernière aurait suffit car le Makefile régénère le site avant upload).

Hello world !

2017-04-15T00:00:00+02:00

Cet article marque le début de notre blog. Bienvenus à vous !

Nous allons vous proposer des articles techniques sur ce que l'on fait, montrer nos réalisations et partager un peu de la vie de notre entreprise.

A bientôt !