Ir al contenido principal

How to integrate TensorflowJs and Unity by Creating a simple guessing game

This is a Tensorflow.js tutorial for integrating a javascript library with Unity, above is the vid and below you will find some of the steps followed.
  1. 1.

    Pre-reqs

  2. 2.

    Create the game using the Unity editor

  3. 3.

    Integrate unity with a javascript library like tensorflow.js - Calling a javascript library from unity

    • Create a class in unity with the methods that you already have in javascript
      • > Real "GetPrediction" method for using in webgl 
          
[DllImport("__Internal")]
public static extern int GetPrediction(int valueToPredict);
      • > Debug "GetPrediction" method for using inside the editor 
          
#if UNITY_EDITOR
    public static int GetPrediction(int valueToPredict) {
        Debug.Log("Called GetPrediction");

        return 1;
    }
#else
    //Real Method here
#endif
    • Create a jslib file inside Assets/Plugins/WebGL with the "GetPrediction" method to be called 
        
mergeInto(LibraryManager.library, {
  //...
  GetPrediction: function (valueToPredict) {
    //Your logic here
    return window.PublicInterface.getPrediction(valueToPredict);
  }
});
  4. 4.

    Integrate unity with a javascript library like tensorflow.js - Calling a unity C# method from javascript

    • Create a jslib file inside Assets/Plugins/WebGL with the "SendMessage" call referencing the name for the game object inside the scene and the method to be called 
        
mergeInto(LibraryManager.library, {
  //...

  //SendMessage('Game object name on scene', 'Method inside one of the components');
  SendMessage('PublicInterface', 'TrainingDone');

  //...
});
    • Create a class in unity with the methods that you already have in javascript
      • > "TrainingDone" C# method for calling from javascript 
          
public class UnityInterfaceController : MonoBehaviour {
    public void TrainingDone() {
        //More code
    }
}
    • Have a game object on the scene with the UnityInterfaceController monobehavior component attached to it
  5. 5.

    Create a node.js application to handle the integration with tensorflow.js

    • Change to the directory where the npm project is 
        
cd ./Assets/WebGLTemplates/TensorflowJsProjects/1.SimpleSequence
    • Install all the dependencies 
        
npm install
    • Start the compilation process 
        
npm run dev
    • Modify any .ts file and find the generated .js file inside ./Builds/WebGL/js/
  6. 6.

    Resources

Etiquetas:

Entradas populares de este blog

Creating a Docker container for a NodeJs application: Express + Mongo + Docker Compose

This is a Docker tutorial for creating a NodeJs container using expressjs and mongoose, above is the vid and below you will find the steps followed.
StepsPre-reqsHave node.js installedAnd docker installed (make sure you have docker-compose as well)Create an simple node app using expressjs and mongooseModify your container and create a docker-compose fileBuild and Run your new container Create your simple node appInitialize the node appnpm initInstall the dependencies for our appnpm install --save express mongoose Create the database.jsCreate the index.js Create a dockerfileInclude container with node preinstalled: FROM nodeCreate default/working directory: WORKDIR /usr/src/appCopy package.json to workdir and install dependencies (which we will need in this case😊): COPY package.json .RUN npm install Copy the rest of the app (just the index.js file in this case)COPY . .Expose the port required for reaching our expressjs appEXPOSE 3000Add a command to run when this container is star…
Leer más

Creating a Mongo replicaset using docker: Mongo replicaset + Nodejs + Docker Compose

This is a Docker tutorial for creating a Mongo replica set using docker compose and also a couple more containers to experiment with the replica set, above is the vid and below you will find some of the steps followed.
StepsPre-reqsHave node.js installedAnd docker installed (make sure you have docker-compose as well)Create a container for defining configurations for a mongo instanceCreate a container for setting up the replica setCreate a simple node app using expressjs and mongoose (A modified version from the previous video)Create a docker-compose file with the mongo and setup containers and two additional containers for experimenting with the replica setBuild, Run and experiment with your new containers Create a dockerfile for the first mongo container (not really needed but you could configure more stuff if needed)Include container with mongo preinstalled: FROM mongoCreate default/working directory: WORKDIR /usr/src/configsCopy mongo's configurations file into the container
C…
Leer más

Creating a tensorflow.js + vue.js simple application in javascript

This is a Tensorflow.js tutorial for creating a simple application using Vue.js, above is the vid and below you will find some of the steps followed. Steps Pre-reqs Have node.js installed Create the Vue.js application using nuxt.js Add support for tensorflow.js in vue.js and add a simple model Add the simple tensorflow.js model using vue.js into github pages Create the Vue.js application using nuxt.js Install vue.js cli npm install -g vue-cli Create a base Vue.js app using the starter kit from Nuxt vue init nuxt-community/starter-template simple-vue-tensorflow Start the dev server npm run dev Create empty component components/TensorflowExample.vue Add the component into the page pages/index.vue …
Leer más