Menu

Add an animated emoticon to your website with Jeeliz Weboji

, , , ,

With Jeeliz Weboji library, you can build and embed an animated emoticon in your web app. It is fully based on JavaScript and WebGL. Anyone can create Animoji-like experiences working into the web browser. In a previous tutorial, we learned how to create a custom Weboji from a 3D model using one of the Jeeliz Weboji API tools, the meshConverter. The next step consists in adding our newly created weboji to a website. Let’s start together!

Basic Setup

The tutorial files are available here.

We first create a folder holding our files and name it tutorial. Inside, we create an index.html file and a JavaScript file called main.js. Then we create a folder named models where we store the weboji 3D model created in the previous tutorial. The folder should have this structure:

Create a default index.html file template (you can find one here) and add your main.js file as a source. Then we add a few more sources in order to be able to use the Jeeliz Weboji library.

Building our index.html file

The source code is available in the jeelizWeboji repository. The Jeeliz Weboji library requires a bunch of scripts to work properly. All the paths specified below use the jeelizWeboji folder as root.

First we add the jeelizFaceTransfer script, which access to the camera, detect the face and captures the face expressions:

<!-- FACETRANSFER LIB : DETECT FACIAL EXPRESSIONS : -->
<script src="./dist/jeelizFaceTransfer.js"></script>

Then we need THREE.js – the more recent, the better!

<!-- THREE.JS : -->
<script src="./libs/threejs/v93/three.min.js"></script>

We add a few helpers, in order to avoid writting too much code.

<!-- THREE.JS WEBOJI HELPER : -->
<!-- main helper : -->
<script src="./helpers/threejs/ThreeJeelizHelper.js"></script> 
<!-- required to import the 3D model : -->
<script src="./helpers/threejs/ThreeMorphAnimGeomBuilder.js"></script>
<!-- required to add a material both flexible and with many morphs : -->
<script src="./helpers/threejs/ThreeMorphFlexibleMaterialBuilder.js"></script>

Finally, we insert two canvas HTML elements in the <body> part of our file.

Adding our canvases

One canvas displays the video feedback from the webcam where a detection frame following the face is overlaid. It provides a clear visual feedback to the user. For example if there is a strong backlight, the user immediately understands the face detection issues. We specify the <canvas> element by its id inline property jeefacetransferCanvas to the JeelizFacetransfer library.

<!-- CANVAS WITH THE USER FACE : -->
<canvas class='jeefacetransferCanvas' id='jeefacetransferCanvas'></canvas>

The other one shows our weboji. We specify it by its id property webojiCanvas to the JeelizFacetransfer library.

<!-- CANVAS WITH THE WEBOJI : -->
<canvas class='webojiCanvas' id='webojiCanvas' width='600' height='600'></canvas>

Let’s add a bit of style:

<style type='text/css'>
    body {overflow: auto; overflow-y: auto; background-color: white; margin: 0px;}
    .jeefacetransferCanvas {
        z-index: 20;
        position: absolute; 
        bottom: 0px; left: 0px;
        max-height: 25vh;
    }

    .webojiCanvas {
        z-index: 10;
        position: absolute; 
        max-height: 100%; max-width: 100%; left: 50%; top: 50%;
        width: 100vmin;
        transform: translate(-50%, -50%);
    }
</style>

The index.html file is now set up. The next step consists in writting the JavaScript code in main.js.

The JavaScript part

Luckily for us the helpers do the biggest part of the work! In main.js we write a function named main. It is called whenour weboji needs to be displayed.

function main(){
    THREE.JeelizHelper.init({
      canvasThreeId: 'webojiCanvas',
      canvasId: 'jeefacetransferCanvas',

      assetsParentPath: '../../../assets/3D/',
      NNCpath: '../../../dist/',

      // Here we specify the info relative to our fox mesh
      meshURL: 'models/fox.json',
      matParameters: {
        diffuseMapURL: 'models/diffuse_fox.png'
      },
      position: [0,-80,0],
      scale: 1.2
    });
} //end main()

Wrapping up

Now everything is ready to display our weboji on our web page. We only need to run the main() function. In this example, we execute it when the body.onload event is triggered. Reload the page and tadaaa…! Our cool fox shows up!

Related Posts