BLOG


(English) Realtime layered media rendering – part 2



Although a quick presentation of the layered media rendering in realtime was done in a previous blogpost, the graphical demonstration was a bit ‘dry’. I’ll use here other 3D material to illustrate the shader.

Oat used a beating heart to demonstrate the ability to render various layers of human tissue.

beating_heart

Screenshot of the beating heart in Oat’s demo

The original video can be accessed here : http://www.chrisoat.com/movies/Oat_RenderingGooeyMaterials_SIGGRAPH2006.mp4

The inner layer of vessel and tissue is clearly blurred when the heart is expanding.

To show something close to it, I made a quick demonstration, using a free heart 3D model.

Heart 3D model used for the demo

The 3D model is properly UV-mapped, but isn’t animated.

Since I needed it only for a quick demonstration of the shader, I ‘animated’ by pulsating it with two sin() combined, giving it a  ‘beating heart’ look (!).

The thickness of the inner layer is updated accordingly.

I don’t have any map for the inner tissue with the original 3D model. I used a quickly drawn map with fake vessels to illustrate the shader.

You can see in the following screenshot the comparison between the original heart, staying still.

The heart on the right shows the blurring of the inner layer

The second one is beating, but without treatment for the multilayer setup.

The third one use the multilayer shader.

The two heart on the right have a different lighting from the heart on the left : the first one use Unity’s standard shader, while mine don’t take into account anything related to the ambient light, skybox or BRDF.

Here’s a link to a WebGL export of the above scene, in a zip file : https://www.dropbox.com/s/0cthjhq9y77fhp5/heart_layered.zip?dl=0





(English) Realtime layered media rendering



The theory

Human & animal skin, wax, carpaint, jelly, marble, bubble soap films, rain puddles on the ground : difficult things to render in realtime 3D.

Skin are made of several layers (dermis, epidermis…), carpaint is made of clearcoat, on top of flakes and metallic paint. Soap creates thin films ; water layer is very thin compared to the ground it’s sitting on. Wax and jelly are non-homogenous (somewhat anisotropic) media…

You can of course model it with geometry but you are still going to have problems related to the rendering of the interplay of light with the material.

SRealtime 3D shaders are concerned with the relationship of light hitting a specific pixel and leaving it. It’s hard to render the specific quality of light attenuation inside the various layers of a material.

Christopher Oat, when working at ATI Research (before their acquisition by AMD) made some publications on the rendering of layered media (« Rendering Semi-Transparent, Layered Media » – ShaderX 3: Advanced Rendering with DirectX and OpenGL, Wolfgang Engel, Ed., Charles River Media, 2004) or (« Rendering Gooey Materials with Multiple Layers » – ACM SIGGRAPH Course notes, course 26, Advanced Real-Time Rendering in 3D Graphics and Games, pp. 65-79, 2006).

01

Figure 1 – Light interaction with layered media (from Oat, Rendering Semitransparent Layered Media)

The media is modeled as two layers ontop of one another. When light hits the outer layer, it interacts with the geometry (and the normal map).

When light enters the outer layer, it travels along the media and is scattered and therefore attenuated.

Oat suggests using a Poisson Disc blur filter to sample the inner layer. This filter effectively blur the underlying layer (the amount is depending on the thickness of the layer).

This blurred layer is composed with the outer one by using an opacity map (a more physically based approach would use the IOR of the outer layer, involving Fresnel’s law).

Since the light vector is traveling inside the outer layer, the model should exhibit some parallax effect depending on outer layer thickness.

By working in tangent space, the light vector is reflect along the surface, and the inner layer is sampled accordling with the parallax.

However that model isn’t used by the usual game engine big players (Unreal, Unity and CryEngine). (At least, after extensive research we didn’t find any proof of it). Here’s some examples of what kind of carpaint you can create with Unreal (

https://forums.unrealengine.com/showthread.php?4107-Interesting-post-from-AnswerHub-on-how-to-setup-a-Layer-Car-Paint-shader

https://answers.unrealengine.com/questions/30148/translucent-material-function-layered-car-paint-sh.html).

When creating carpaint, you can try some multi BRDF blending via a map or a Fresnel factor (wich is already an improvement regarding simple texture based rendering (diffuse+normal+spec)) :

The realtime 3D shader

Some part of the shader have been ported to Unity, to demonstrate what is possible when trying to render layered material with that engine.

You can find here some screenshots, directly from the editor (warning, programmer’s art ahead!)

Figure 2 - Texture used for the demo, from left to right : Diffuse (outer map), Normal (outer map), Opacity Mask (between outer and inner map), Diffuse (inner map)

Figure 2 – Texture used for the demo, from left to right : Diffuse (outer map), Normal (outer map), Opacity Mask (between outer and inner map), Diffuse (inner map)

The texture used for the demo helps to bring some highlights on the various interesting effects.

Figure 3 - Unity Standard Shader vs. Layered Material shader

Figure 3 – Unity Standard Shader vs. Layered Material shader

You can see on Figure 3 the configuration of our scene : the plane on the left is rendered with the Standard Unity Shader (GGX BRDF).

The right plane is more ‘classic’ : diffuse (albedo) + normal map. However we can see the underlying layer through the ‘holes’ of the opacity map.

Figure 4 - From top to bottom, increasing first layer thickness

Figure 4 – From top to bottom, increasing first layer thickness

When the thickness of the outer layer increases, you can see on Figure 4 the increasing bluriness of the inner layer.

Figure 5 - Disminishing transparency with parallax

Figure 5 – Disminishing transparency with parallax

The fresnel effect states that the transparency of a media is related to the incident angle of the light when entering the media, coupled with the IOR.

At the time of the writing of the original shader (Oat’s work), the evaluation of a Fresnel formula was too costly to do it in realtime, while dedicating GPU ressources for every graphical aspect of the game concurrently. It was then done by correlating the dot product of the normal with the incident vector.

You can see on the Figure 5 screenshot the transparency of the media diminishing with the parallax effect.

On the screenshots, I disabled the specular envmap reflection, to have a better look at the parallax/blurring phenomenon. If you activate it, you’ll have that (in the original paper, the specular contribution is brutally added to the diffuse component) :

06

If you try your hand at Oat papers, remember that the vectors are expressed in Tangent Space, not Object Space !

In the next few iterations of the shaders, we will see some simple improvements that can be added to this shader (remember, everything was made at that time before the introduction of BRDF in realtime rendering…)





Ouverture du site de PROD, l’agence intégrée PSA Peugeot Citroën



Depuis 2008, les collaborateurs d’ON-X 3D apportent leur savoir-faire à PSA Peugeot Citroën en intégrant les équipes du service PROD. Cette agence au sein de PSA Peugeot Citroën a su grandir en nombre et compétence et propose aujourd’hui de nombreuses réalisations de qualité, allant des visuels pour les « car configurateurs » internet aux animations publicitaires, en passant par des conceptions pour de l’évènementiel.

Jusque là discrète, voici que PROD se révèle via un site fraîchement ouvert, laissant à voir un aperçu de ses superbes réalisations.

Rendez-vous ici pour les découvrir.

C’est avec grand plaisir que par ce blog nous relayons la vitrine de ce service dans laquelle nous voyons le reflet de nos équipes, enrichies par l’aventure PROD chez PSA Peugeot Citroën.

PROD website





Transition Numérique et formation : le nouvel enjeu de 2015



Bilan et observations au Laval Virtual 2015

Retour sur  LAVAL VIRTUAL, le lieu incontournable de l’excellence en matière de développement du virtuel, qui concentre chercheurs, ingénieurs, entreprises innovantes, et acteurs du développement numérique des prochaines décennies.

Le potentiel de cette force créatrice de concepts, et de vocations pour le monde  du virtuel, est issue des efforts pugnaces de LAVAL VIRTUAL, aidé de l’ENSAM, et des collectivités locales et régionales depuis plus de 15 années,

2015 voit l’arrivée massive de nouveaux supports dans l’écosystème de la réalité virtuelle et augmentée. Le mobile, les objets connectés portent désormais de nouvelles applications jusqu’ici réservées aux PC, aux « Caves », ou bien aux installations virtuelles « sur-mesure ». Peux connus du grand public, les domaines de la réalité augmentée et réalité virtuelle sont désormais à la portée de toutes les populations et les milieux professionnels.

Ouverture à de nouvelles entreprises et de nouveaux marchés

LAVAL VIRTUAL 2015, est à ce titre un vrai succès. Les rencontres et les observations que j’ai pu faire m’ont conforté dans l’idée que la RA et la RV intéressent aujourd’hui des secteurs aussi variés que la communication, l’énergie, le transport, les télécoms, quelque soit la taille de l’entreprise ou du marché. Le salon a aussi drainé de plus en plus de visiteurs éclectiques ; des spécialistes, des curieux, et des professionnels. Ces élans de curiosité et d’intérêt restent pondérés par le fait que la technologie est perçue comme inaccessible et incomprise par un large public profane.Les systèmes en Réalité augmentée et virtuelle sont parfois considérées, soit comme des produits « gadgets » à durée limitée, soit comme des installations technologiques coûteuses (pour ce qui est des « caves »). Même si le grand public a pris connaissance, par le biais du buzz marketing technophile, des « Googleglass », ou des « Oculus Rift », la grande majorité n’a jamais eu l’occasion de les utiliser ou d’en exploiter le potentiel. Difficile aussi de voir du premier coup, à travers ces périphériques, la valeur ajoutée et le retour sur investissement chers à nos entreprises ou nos clients.

Le Créneau de la Formation Numérique

Depuis quelques années les entreprises ont pris la mesure des enjeux que représentent leur transition vers le numérique. L’introduction des technologies répond clairement à 3 préoccupations :

  • La capitalisation du savoir.
  • La transformation des méthodes de travail.
  • La prise en compte de la culture numérique dans la les changements de générations.

L’étude du rapport Lemoine donne des pistes quand à la mise en oeuvre de ce changement, et révèle 2 leviers fondamentaux, par lesquels l’entreprise peut durablement introduire le numérique, et l’innovation, dans l’ensemble de ses domaines d’expertise :La formation et la Maitrise d’ouvrage.

L’exemple d’Orange est emblématique d’une transition réussie.

L’Ecole des Métiers Technique d’Orange a engagé la refonte de la formation des techniciens en intégrant les outils de la réalité virtuelle et de la réalité augmentée dans le cadre d’un programme de transformation numérique à partir de 2014. La pédagogie s’est appropriée ces nouvelles technologies, les équipements sont représentés en 3D temps réel, les applications de support de cours  sont développées en réalité virtuelle ou en réalité augmentée, les procédures d’intervention sont scénarisées, les tablettes et smartphones permettent de diffuser ces formations et peuvent également être utilisées comme support a l’exploitation.

A l’échelle nationale, le retour d’expérience de ces formations d’un nouveau type, dispensées dans de nombreux centres régionaux de l’EMT, est excellent. Aussi bien du coté des formateurs que des techniciens formés, le développement d’outils numériques en réalité augmentée,  sur des supports universels (tablettes, smartphones) et peu couteux, ont un impact sur l’efficience de la formation.

Ont observe petit à petit, un certain nombre de changements importants :

  • Une diminution significative de l’appréhension en intervention, chez les techniciens formés.
  • Un stockage des connaissances sur des bases de données, qui pérennisent le savoir au delà de la formation.
  • un outil d’immersion réaliste qui permet aux experts de transmettre leurs savoir-faire par le biais de la simulations 3D.

Outre le coup raisonnable d’un tel développement, la formation est le vecteur de la technologie et participe au renforcement de la culture du numérique dans l’entreprise.

C’est donc la preuve que les technologies innovantes ont leur place dans le développement et l’investissement des entreprises, quelque soient leurs tailles et leurs stratégies.





Raymarching dans Unity



Bien que nous puissions avoir des rendus d’images photoréalistes, voir physicoréalistes à partir de scènes 3D très détaillées, les calculs sont fait hors ligne. C’est calculs s’appuient sur des méthodes de raytracing ou l’un de ses proches parents.

Les progrès rapides du matériel professionnel et grand public nous permet d’avoir accès à des rendus similaires en temps réel (ou presque) sur les ordinateurs de bureau.

Les mobiles n’ont pour l’heure pas encore cette puissance pour nous ofrrir ce genre de rendus.

Il est n’est en effet pas possible aujourd’hui de faire du raytracing sur des tablettes ou des smartphones. Cependant quelques astuces du domaine existent (notamment popularisées par la scène du demomaking), comme le raymarching par exemple.

Raymarching scene made by Iñigo Quilez (there's only functions in there, no geometry !)

Scène raymarchée, production d’Iñigo Quilez (uniquement des fonctions mathématiques ici, aucune géométrie !)

Quand on fait un calcul de scène 3D par raymarching, le rayon ne progresse pas en itérations fixes, mais par itérations variables, s’appuyant sur la distance à la surface la plus proche à chaque pas.

08_displacement_05

Tout est calculé dans le fragment shader, il n’y a aucune géométrie à l’exception des deux triangles nécessaires pour afficher le rendu sur la surface d’un quad.

Cette technique a été popularisée par Inigo Quilez dont une présentation est disponible ici : Rendering Worlds with Two Triangles

Dans cette video, on peut voir une scène « classique » d’Unity affichant l’atrium de Sponza. Cette scène comporte un simple quad affichant les différents shaders en raymarching. Il n’y a strictement aucune autre géométrie dans la partie raymarching de la scène !

01

Puisque le quad est intégré à la scène 3D, il a sa propre profondeur au sein de cette scène. Il est possible de faire le rendu de cette scène selon différentes passes, mêlant rendu de contenu 3D avec shaders en raymarching. À ce stade, il s’agit bien d’un moteur de rendu 3D hybride.

Pour le moment, seuls des objets pouvant être définis par des fonctions mathématiques (signed distance fields) peuvent être représentés dans une scène en raymarching.

03

Dans la vidéo, tandis que le crâne de cristal est dans la scène de Sponza, l’environnement est échantillonné puis utilisé pour avoir les bonnes réflexions et réfractions au sein de la passe de raymarching.

Quelques pixels noirs sont perceptibles dans cette passe (quand le verre tourne par exemple) : cela signifie qu’il n’y a pas encore assez de pas durant la passe de raymarching pour donner au pixel la bonne couleur. Ceci implique que les shaders soient convenablement paramétrés pour s’accorder aux caractéristiques propres à l’objet rendu.

04

Quand cette scène est affichée sur un iPad Air de première génération, le framerate ne va pas en-dessous de 15FPS et se trouve au-dessus de 25FPS la majorité du temps (en fait le framerate chute quand le zoom sur les objets en raymarching est trop fort)

La plupart de ces shaders ont été adaptés à partir de ceux disponibles sur http://www.shadertoy.com, les auteurs conservent leurs droits sur leur travaux, il ne s’agit ici que d’une démo interne.

Lien vers la vidéo : https://vimeo.com/131112582





Retrouvez ON-X3D au SIDO 2015



Venez nous retrouver sur le stand SQLI, avec qui nous avons développé une application pour Orange, au SIDO de Lyon le 7 et 8 avril 2015.

PhotoStand01 PhotoStand02




Retrouvez ON-X3D à LAVAL VIRTUAL 2015



bandeau01

Cette année On-X propose un programme ambitieux au salon International de la réalité virtuelle, Réalité augmentée et Innovation technologique : LAVAL VIRTUAL 2015.

Outre un Stand consacré aux nombreuses applications qu’ On-X développe pour ses clients, notre entreprise fait désormais partie d’un Consortium regroupant l’Ecole des métiers techniques d’ORANGE, LAVAL VIRTUAL, et L’ENSAM pour fonder un organisme de formation unique en son genre : le LAVAL VIRTUAL UNIVERSITY.

L’objectif de LVU est d’accompagner les acteurs clés que sont les formateurs et les chefs de projet MOA des entreprises à réaliser de manière concrète la transition numérique et la conduite du changement vers les technologies innovantes.
L’expérience et les succès d’On-x dans ce domaine apporteront un savoir faire et une expertise que nous partagerons avec les apprenants pour les guider dans leur volonté d’améliorer leurs ROI et de répondre aux attentes de leurs clients.

Alors venez nous rejoindre à LAVAL VIRTUAL 2015 pour découvrir ces nouveaux chantiers de LAVAL VIRTUAL UNIVERSITY et en apprendre plus sur ON-X3D !

Plan_LV2015





DOMOTIQUE



homekit

Objectif

L’objectif du présent document est de formaliser des idées autour de la domotique. Ces idées reposent sur l’interconnexion des objets et l’agrégation des informations pour offrir aux utilisateurs un moyen simple de contrôler leur environnement quelle que soit leur localisation (dans la maison et/ou à l’extérieur).

Solution

Les objets connectés permettent d’obtenir un volume importants de données et de commander précisément des éléments. La problématique soulevée par ces objets est de consolider et présenter les données de manière ergonomique et efficace. Beaucoup de solutions permettent de contrôler à proximité (dans la même pièce ou sur le même réseau) des objets (Phillips Hue, etc.) ou à distance via une Box (Somfy Box,Zibase, etc.) mais ces solutions restreignent les fonctionnalités et sont peu ergonomiques. Les Box permettent principalement de contrôler individuellement les objets (lumière, température, volet, etc.).

projetseb

La mise à disposition de HomeKit et les partenaires d’Apple permettent d’envisager de travailler en profondeur sur les systèmes de domotique tout en limitant les développements spécifiques.

L’idée que je souhaite présenter est de permettre aux utilisateurs de mettre en œuvre facilement des scénarios permettant de contrôler leur environnement. Ces scénarios pourront être créés par l’utilisateur et/ou proposés par un système auto-apprenant prenant en compte les objets connectés présents dans l’environnement et les habitudes des utilisateurs.

Pour rendre ce système possible, je me base sur Apple TV comme centre névralgique de la maison relié à iCloud comme centre d’analyse du comportement et service de proposition de scénarios. L’Apple TV permettra d’agréger et de commander tous les objets connectés. Ce contrôle s’effectue via une application unique « Home » présente sur l’Apple TV et mettant en œuvre le framewok HomeKit. L’application « Home » de l’Apple TV synchronisera les données sur iCloud qui servira aussi d’interface avec les iPhone et iPad pour interagir sur le système. Ainsi, les utilisateurs pourront contrôler les objets connectés de la maison via leur iPhone et iPad quelle que soit leur localisation. Au-delà du simple contrôle des objets, le but est de proposer aux utilisateurs des scénarios et de pouvoir créer/programmer des scénarios en fonction de l’ensoleillement, de la température, de la luminosité, de l’heure, etc.

Exemple de User Stories:

  • En tant qu’utilisateur je souhaite pouvoir programmer mon réveil:
    • L’augmentation progressif de l’éclairage
    • Sélectionner la radio/TV sObjectifL’objectif du présent document est de formaliser des idées autour de la domotique. Ces idées reposent sur l’interconnexion des objets et l’agrégation des informations pour offrir aux utilisateurs un moyen simple de contrôler leur environnement quelle que soit leur localisation (dans la maison et/ou à l’extérieur).SolutionLes objets connectés permettent d’obtenir un volume importants de données et de commander précisément des éléments. La problématique soulevée par ces objets est de consolider et présenter les données de manière ergonomique et efficace. Beaucoup de solutions permettent de contrôler à proximité (dans la même pièce ou sur le même réseau) des objets (Phillips Hue, etc.) ou à distance via une Box (Somfy Box,
      Zibase, etc.) mais ces solutions restreignent les fonctionnalités et sont peu ergonomiques. Les Box permettent principalement de contrôler individuellement les objets (lumière, température, volet, etc.).La mise à disposition de HomeKit et les partenaires d’Apple permettent d’envisager de travailler en profondeur sur les systèmes de domotique tout en limitant les développements spécifiques.

      L’idée que je souhaite présenter est de permettre aux utilisateurs de mettre en œuvre facilement des scénarios permettant de contrôler leur environnement. Ces scénarios pourront être créés par l’utilisateur et/ou proposés par un système auto-apprenant prenant en compte les objets connectés présents dans l’environnement et les habitudes des utilisateurs.

      Pour rendre ce système possible, je me base sur Apple TV comme centre névralgique de la maison relié à iCloud comme centre d’analyse du comportement et service de proposition de scénarios. L’Apple TV permettra d’agréger et de commander tous les objets connectés. Ce contrôle s’effectue via une application unique « Home » présente sur l’Apple TV et mettant en œuvre le framewok HomeKit. L’application « Home » de l’Apple TV synchronisera les données sur iCloud qui servira aussi d’interface avec les iPhone et iPad pour interagir sur le système. Ainsi, les utilisateurs pourront contrôler les objets connectés de la maison via leur iPhone et iPad quelle que soit leur localisation. Au-delà du simple contrôle des objets, le but est de proposer aux utilisateurs des scénarios et de pouvoir créer/programmer des scénarios en fonction de l’ensoleillement, de la température, de la luminosité, de l’heure, etc.

Exemple de User Stories:

  • En tant qu’utilisateur je souhaite pouvoir programmer mon réveil:
    • L’augmentation progressif de l’éclairage
    • Sélectionner la radio/TV sur mon émission favorite
    • L’augmentation progressive de son de la radio/TV
    • L’activation de la douche à une température donnée à une heure dite
    • La mise en route de la machine à café
    • L’ouverture des volets
  • En tant qu’utilisateur je souhaite pouvoir programmer mon coucher :
    • La diminution de l’éclairage
    • La fermeture des volets
    • Le verrouillage des portes
  • En tant qu’utilisateur je souhaite pouvoir programmer mon arrivée dans ma résidence secondaire. Mise en route progressive des systèmes (chauffage, eau chaude, ventilation, robots de nettoyage, etc.)
  • En tant qu’utilisateur je souhaite pouvoir programmer la fermeture de ma maison.

En fonction des déplacement de l’utilisateur, du climat, etc. le système pourra proposer à l’utilisateur de déclencher certains scénarios et d’en créer.

Ces exemples simples préfigurent des scénarios plus complexes qui permettent de rendre transparents les objets connectés et de donner aux utilisateurs le pouvoir de contrôler facilement et finement leur environnement et leur maison.

Pour conclure, nous ne sommes qu’au commencement des objets connectés et de la domotique. Il reste encore beaucoup de travail à réaliser pour simplifier et rendre accessible à tous les utilisateurs ces systèmes. D’autres outils comme la réalité augmentée et la réalité virtuelle offre aussi des perspectives pour modeler et simplifier notre environnement.

 Sébastien Roques