FREN

Contexte technologique des écrans mobiles

L’apparition des smartphones et des tablettes dans la dernière moitié des années 2000 a donné lieu à leur adoption massive : les écrans mobiles, hybridation du téléphone portable et des ordinateurs, ont su se rendre indispensables et peuplent aujourd’hui notre quotidien. Étant une forme d’ordinateur adaptée à des situations de mobilité, la nouveauté de ces machines numériques s’est progressivement diluée dans le paysage technologique contemporain : elles font maintenant partie intégrante de l’ensemble technique numérique qui caractérise notre époque. Cette dilution ne correspond cependant pas à une uniformisation des dispositifs numériques qui permettraient de remplacer l’un par l’autre indifféremment. Au contraire, elle résulte d’une nécessité d’interopérabilité entre les différents formats des appareils dont nous nous entourons. En effet, les écrans mobiles présentent des spécificités techniques qui leur sont propres et qu’il convient d’explorer au-delà de leurs usages préconçus. Les champs du design et des pratiques artistiques de l’interactivité sont particulièrement propices à cette exploration. Parce qu’ils permettent d’obtenir des informations concernant leur état physique propre (orientation, inclinaison, etc.), les écrans mobiles annulent le besoin d’interfaces de contrôle tierces, tels que la souris ou le clavier. A l’aide des nombreux capteurs qu’ils embarquent, les écrans mobiles permettent d’interagir avec les médias qu’ils diffusent (image, textes, vidéos, etc.) à travers leur manipulation : ils sont leur propre périphérique de contrôle. Pendant un temps, la mise en œuvre exploratoire et artistique de ces spécificités techniques s’est avérée difficile d’accès, les conditions pratiques de la création d’ouvrages interactifs sur les écrans mobiles demandant la maîtrise d’une chaîne de développement conçue pour les spécialistes de l’informatique. Mais cette situation tend à se transformer.

Parce qu’ils sont des objets techniques permettant la réalisation d’un « Internet mobile », les écrans mobiles intègrent des navigateurs Internet, élément logiciel que l’on retrouve sur un nombre croissant de machines numériques (ordinateurs, consoles de jeux, smartTV, etc.). L’omniprésence des services de réseaux sociaux, la banalisation de l’usage d’Internet et de la mise en œuvre des techniques de création de documents web interactifs participent à l’évolution des technologies du web, le navigateur devenant progressivement une plateforme à part entière, au même titre que les grands systèmes d’exploitation et montrant même une tendance à vouloir s’y substituer (ChromeOS, Firefox OS). Plus que jamais, créer pour la plateforme web permet aujourd’hui de diffuser ses créations sur une grande variété d’appareils, à partir du moment où il sont dotés d’une forme de navigateur Internet. Machine virtuelle a priori universelle, support de consultation et de création logicielle standardisé et simple d’accès, le navigateur Internet est l’un des vecteurs de l’interopérabilité entre les diverses machines numériques : moyennant quelques efforts investis dans la mise en place d’un système d’adaptation automatique au support matériel, il est aujourd’hui possible de produire des œuvres qui peuvent tirer partie des capacités des écrans mobiles tout en étant exécutables sur d’autres formes d’appareils.

Un outil auteur pour quelle mobilité ?

Ainsi, si l’exploration de la mobilité des écrans mobiles à l’aide d’outils de création dédiée a été un enjeu important, à l’origine de la forge du langage de programmation Mobilizing à destination des artistes et des designers désireux de mettre en œuvre les écrans mobiles et leurs spécificités dans leur pratique, c’est une nouvelle forme de mobilité qu’il nous apparaît indispensable de favoriser aujourd’hui : celle des œuvres interactives à travers la variété contemporaine des supports numériques. Il s’agit de conférer aux créations interactives une capacité à s’exécuter et à s’offrir à l’expérimentation du public sur différents appareils tout en s’adaptant à leurs particularités techniques.

C’est cette mobilité qu’il nous importe de favoriser aujourd’hui à travers la conception et la création de Mobilizing.js. Librairie logicielle et interface de programmation fondée sur le langage interprété JavaScript, notamment utilisé pour programmer le comportement des éléments contenus dans les pages web, Mobilizing.js est un environnement de création graphique par la programmation. Le choix du langage JavaScript repose d’une part sur les récentes évolutions du statut du navigateur Internet et, d’autre part, sur la multiplication des contextes d’exécution JavaScript qui permettent aujourd’hui un accès aux couches natives des plateformes d’accueil : sur les écrans mobiles, par exemple, lorsqu’un élément matériel ne peut être atteint et contrôlé par le contexte JavaScript, il est possible de créer des ponts entre ce contexte d’interprétation (JavaScriptCore, V8, Rhino, etc.) et les couches logicielles inférieures (SDK natif) ayant un accès direct au système d’exploitation et au hardware. Cette possibilité d’extension des capacités des interpréteurs JavaScript est un élément clé de cette nouvelle forme de mobilité que nous cherchons à faire exister avec Mobilizing.js. Aussi, parce que JavaScript est interprété, il est également propice à la forge de langages de programmation alternatifs de haut niveau, qu’il s’agisse de programmation visuelle, textuelle, expérimentale, voire, même, ésotérique. Mobilizing.js est donc le projet d’un environnement logiciel auteur qui souhaite répondre à une nouvelle mobilité, plurielle et composite, software et hardware, qui caractérise selon nous le paysage technologique numérique actuel d’aujourd’hui et de demain et qui fait suite à l’introduction des écrans mobiles.

Mobilizing.js ?

Mobilizing.js est le projet d’un environnement logiciel auteur à destination des artistes et des designers dont l’objectif est de favoriser la création d’œuvres interactives sur différentes formes d’appareil-écrans. La grande polyvalence que présente actuellement JavaScript, qui montre une tendance à s’affirmer, permet à Mobilizing.js d’étendre son champ d’intervention à des contextes logiciels variés, parmi lesquels on trouve le navigateur Internet, les serveurs Node.js ou encore des contextes spécifiques à certaines machines (périphériques mobiles - tablettes, smartphones - iOS, Android, Windows, etc). Les fondations de Mobilizing.js prennent donc la forme d’une librairie JavaScript qui définit une interface de programmation conçue pour la création artistique interactive dans des contextes matériels et logiciels qui sont dès à présent unifiés par le langage JavaScript.

Le noyau principal des fonctionnalités de Mobilizing.js est centré sur la création graphique en proposant un moteur 2D et 3D temps réel forgé au-dessus de webGL, standard héritant d’OpenGL et spécifiquement défini pour le web qui semble aujourd’hui s’installer de manière durable dans le paysage des technologies contemporaines de l’image calculée. Ce choix, en plus d’être un pari sur l’avenir d’un standard en définition, s’appuie sur la disponibilité maintenant établie sur l’ensemble des périphériques mobiles du marché de processeurs graphiques spécialisés (GPUs), qui ouvre de nouvelles possibilités de mise en œuvre de la 3D temps réel. Lorsque l’on souhaite exploiter ces GPUs avec les technologies du web, l’usage de webGL devient nécessaire, car il dispose maintenant de plus en plus souvent d’une implémentation « accélérée ». Mais il s’agit aussi de pouvoir imaginer plus aisément des implémentations du moteur graphique de Mobilizing.js sur des plateformes différentes de celles reposant sur le Document Object Model (DOM) des navigateurs Internet.

Car si, sous l’effet des spécifications du HTML5, le navigateur tend à permettre toujours plus l’accès aux couches inférieures, voire matérielles, de la machine hôte sur laquelle il est exécuté, de nombreuses impossibilités de mises en œuvre des spécificités des appareils (mobiles en particulier) constituent encore un frein à la création artistique avec les technologies du web : le temps nécessaire à l’implémentation effective des spécifications HTML5 par les grands éditeurs de logiciels pour permettre la mise en œuvre d’éléments techniques récemment intégrés dans un appareil (capteur, etc.) est démesurément long relativement à la nécessité d’expérimentation au regard des pratiques artistiques œuvrant avec l’interactivité. C’est pourquoi, à l’instar de projets comme Cordova, PhoneGap ou Ejecta, Mobilizing.js souhaite proposer la possibilité de mettre en œuvre ces spécificités matérielles en forgeant des ponts avec d’autres environnements (WebView dont le contexte JavaScript est étendu vers l’OS, via objective-C sur iOS ou Java sur Android). Ainsi, lorsqu’une interface de programmation n’existe pas déjà dans les standards du web, l’extension de contexte JavaScript vers des fonctionnalités natives est employée. C’est pourquoi Mobilizing.js comporte, en plus de ses composants graphiques, un certain nombre de fonctionnalités génériques relatives aux capteurs embarqués (capteurs de mouvements de nouvelle génération, micro, caméra vidéo, etc.) afin de proposer un environnement de création unifiée dans une interface cohérente et portable qui ne limite pas les possibilités de mise en œuvre à ce que le seul web permettrait ou non.

Du point de vue de l’utilisateur, Mobilizing.js est une librairie JavaScript, elle-même composée d’un certain nombre de grande classe de fonctionnalités. Open source, cette librairie est destinée à la création artistique sur les supports numériques et permet de créer des applications graphiques interactives sur des machines diverses parce qu’elle assure une compatibilité «multiplateforme», une adaptation automatique à l’appareil sur lequel l’application sera exécutée. Mais elle assure aussi une certaine interopérabilité, grâce à JavaScript, en offrant accès, par exemple, à la création des deux versants d’un système client-serveur ou à la création d’applications hybrides (mélangeant haut niveau et couche système) sur plusieurs appareils à l’aide d’une même interface de programmation. Ces deux caractéristiques et cet effort d’unification représentent un avantage majeur pour les auteurs d’œuvre logicielle, car l’environnement technologique sur lequel repose Mobilizing.js reste fortement composite malgré l’omniprésence de JavaScript.

L’utilisateur de Mobilizing.js utilise donc la librairie pour écrire ses scripts et ainsi créer ses travaux. Des gabarits et des exemples permettent d’appréhender l’architecture de la librairie et d’en faire l’expérience. Même si Mobilizing.js s’adresse pour une grande part au navigateur Internet, sa mise en œuvre passe exclusivement par la programmation en JavaScript et ne demande pas d’avoir recours directement à HTML ou CSS. Parce que cette pratique de la programmation est aussi une façon de se familiariser avec le langage JavaScript lui-même, Mobilizing.js s’inscrit avantageusement dans le paysage technique actuel.Étroitement lié aux mises en œuvre qu’il favorise, Mobilizing.js est pensé comme étant un environnement modulaire et évolutif, ses fonctionnalités pouvant augmenter et être redéfinies afin de répondre au mieux aux besoins des auteurs. Il est ainsi un outil de création s’adressant autant à des novices désireux de faire leur premier pas dans le design d’interaction et la création interactive, qu’à des spécialistes qui souhaiteraient éviter la création de composants logiciels spécifiques à des projets particuliers en forgeant. Mobilizing.js est un outil générique, extensible et flexible.

Informations techniques (version alpha de la librairie, 12/2014).

L’implémentation actuelle de Mobilizing.js utilise Three.js comme librairie de rendu. Si une partie des objets de Three.js et son graphe de scène sont utilisés assez directement dans la librairie d’objets de Mobilizing.js, le système d’héritage par agrégation (cf. schéma ci-dessous) ainsi que d’autres éléments ont été construits spécifiquement et, plus particulièrement, une couche d’abstraction rendant possible l’implémentation des fonctionnalités de rendu de Mobilizing.js sur un autre moteur 3D que Three.js. Aussi, Three.js et sa structure n’apparaissent pas dans les scripts utilisateur, mais uniquement dans la librairie d’objets de Mobilizing.js. D’autres librairies sont également utilisées pour leur efficacité à traiter certains problèmes, en particulier concernant la mise en œuvre de typographie (openType.js) sans avoir recours à des style CSS qui ne peuvent être employés directement dans un contexte 3D temps réel.

Mobilizing.js fait l’hypothèse que WebGL sera supporté de manière générale sur tous les écrans mobiles dans les mois qui viennent, partant du constat que les OS des ordinateurs et leurs navigateurs le supportent d’ores et déjà. Le choix d’investir cette technologie repose sur son efficacité, les opérations de rendu étant effectuées par le GPU, puisqu’il s’agit dans les fait d’une surface de rendu OpenGL ES 2.0 gérée par l’OS et rendu accessible depuis une webView. Mobilizing.js peut donc être employé sur l’ensemble des navigateur Internet permettant la mise en œuvre d’une surface de tracé compatible WebGL (c’est à dire la plus grande majorité des navigateurs actuels ainsi que les webView des plateformes mobiles natives).

De manière générale, et malgré le fait que les navigateurs Internet soient une cible privilégiée, Mobilizing.js tente d’être aussi peu dépendant du DOM que possible afin de permettre une haute compatibilité avec d’autres plateformes : il s’agit de ne pas surcharger des méthodes du DOM, voire de se détacher intégralement l’usage du DOM afin de faire s’exécuter Mobilizing.js dans des contextes JavaScript indépendants, par exemple lorsque l’accès à une surface de dessin permettant une accélération graphique matérielle est disponible sans imposer le recours à un navigateur. Afin d’étendre le contexte JavaScript, y compris celui d’une webView, nous utilisons le framework JavaScriptCore sur iOS et JavascriptInterface sur Android. Il s’agit, à travers ces extensions, de permettre l’ajout de fonctionnalités que les navigateurs ne supportent pas encore, comme la gestion du cash ou l’accès à certains capteurs qui font partie des spécifications HTML5 mais qui ne sont encore supportées par aucun navigateur.

Afin d’assurer une compatibilité avec WebGL sur les plateforme qui ne disposent pas d’un navigateur supportant l’accélération matérielle, nous utilisons Ejecta sur iOS. Ce choix fait suite à différents tests et une implémentation préliminaire de Mobilizing.js avec JavaScriptCore sur iOS. Pour la plateforme Android, le runtime Crosswalk est utilisé à l’aide du Intel XDK.




Exemple de code source minimal :

	
				//==============================================================
				//rotating_cube.js
				//example Mobilizing.js avec un cube qui tourne en 3D
				//==============================================================
				var engine;
				var cam;
				var cube;
				var y = 0;

				//function appellée automatiquement, initialisation de la scène
				function setup()
				{
					engine = Engine3D();//factory de création d’un moteur
					cam    = Camera();//factory de création d’une camera
					cube   = Cube();//etc.
					//place le cube dans l’espace
					cube.transform.setLocalPosition(0,0,-100);
					//pour y voir quelque chose
					light = Light();
				}
				//Boucle de rafrâchissement, 60 fps
				function update()
				{
					y += Time.deltaTime*100;//Time est une «classe statique»
					//rotation du cube
					cube.transform.setLocalEulerAngles(33,y,68);
				}
			

Équipe de recherche, développement et design de Mobilizing.js

Les recherches et développements pour ce logicel sont menés par l'EnsadLab (laboratoire de l'École nationale supérieure des Arts Décoratifs) dans le cadre du programme de recherche Reflective interaction, sous la direction de Samuel Bianchini, avec le soutien de l'Agence Nationale de la Recherche (ANR) pour le projet de recherche Cosima (Collaborative Situated Media, 2014-2017), et d'Orange dans le contexte du projet Surexposition.

Réalisations

Surexposition

Surexposition est un dispositif interactif associant une installation et une application pour smartphones. Sur une place, au milieu de l’espace urbain, un grand monolithe noir produit un intense faisceau de lumière blanche dans le ciel. Visible de toute la ville, ce faisceau s’éteint, puis se rallume, il pulse suivant une logique dont on peut ressentir la rigueur, la volonté de communiquer, même si on ne comprend pas immédiatement les signaux ainsi produits. Sur une face du monolithe, des points ou tirets blancs défilent, de bas en haut, imprimant leur rythme au dispositif : à chaque fois qu’ils atteignent le haut du monolithe, la lumière se déclenche, comme si ces signes se vidaient dans la lumière.

Visiter le site surexposition.net

surexposition surexposition

Un projet Orange / EnsadLab
Œuvre conçue et réalisée sous la direction de Samuel Bianchini (EnsadLab) en collaboration avec Dominique Cunin (EnsadLab), Catherine Ramus (Orange Labs / Sense) et Marc Brice (Orange Labs / Openserv), dans le cadre d’un partenariat de recherche avec Orange Labs

Responsables du partenariat "Orange / EnsadLab" : Armelle Pasco, directrice des partenariats culturels et institutionnels, Orange et Emmanuel Mahé, directeur de la Recherche de l’EnsAD

Production déléguée : Orange
Production exécutive : EnsadLab

Les recherches et développements pour cette œuvre sont menés en lien avec le projet de recherche Cosima (“Collaborative Situated Media”), soutenu par l’Agence nationale de la recherche (ANR) et participent au développement de Mobilizing.js, environnement de programmation pour les écrans mobiles, élaboré par l’EnsadLab, à destination des artistes et des designers

surexposition