feat: added female characters

.env-remote

@@ -0,0 +1,42 @@
+# ENV File for Inworld AI Wed Playground v3.0
+
+# The following two variables require the Inworld Playground workspace to be imported into your Studio account
+# From Inworld Studio Workspaces page click on Import and use this token 2H3FDkRg5sX9 to add it.
+
+# This Inworld Character ID is the default id used if one hasn't been set directly on a character.  
+# It can be found on Inworld Studio as any character in the workspace you want or use the Innequin character.
+VITE_INWORLD_CHARACTER_ID=workspaces/inworld-playground/characters/innequin
+
+# The Inworld Scene ID can be found on Inworld Studio
+VITE_INWORLD_SCENE_ID=workspaces/inworld-playground/scenes/inworld_playground
+
+# The URI to the generate token authentication server. Please see the README.md for more information on setting the
+# server up.
+VITE_INWORLD_GENERATE_TOKEN_URI=http://localhost:4000/
+
+# Innequin base asset file location. It can be a local or external path.
+# Used as the prefix uri for the animation, texture and model file paths are set in config.json.
+# Assets are automatically installed as apart of the yarn postinstall process
+# Manually download asset files here at=https://storage.googleapis.com/innequin-assets/playground/inworld-web-playground-assets-v3.0.zip
+VITE_INNEQUIN_BASE_URI=https://storage.googleapis.com/innequin-assets/playground/v3.0/innequin
+
+# The path to the Innequin male configuration
+VITE_INNEQUIN_MALE_CONFIG_URI=https://storage.googleapis.com/innequin-assets/playground/v3.0/innequin/config_male.json
+
+# The path to the Innequin female configuration
+VITE_INNEQUIN_FEMALE_CONFIG_URI=https://storage.googleapis.com/innequin-assets/playground/v3.0/innequin/config_female.json
+
+# Ready Player Me base asset file location. It can be a local or external path.
+# Used as the prefix uri for the animation, texture and model file paths are set in config.json.
+# Assets are automatically installed as apart of the yarn postinstall process
+# Manually download asset files here at=https://storage.googleapis.com/innequin-assets/playground/inworld-web-playground-assets-v3.0.zip
+VITE_RPM_BASE_URI=https://storage.googleapis.com/innequin-assets/playground/v3.0/rpm
+
+# The path to the Ready Player Me configuration
+VITE_RPM_CONFIG_URI=https://storage.googleapis.com/innequin-assets/playground/v3.0/rpm/config_male.json
+
+# Draco Compression Library URI
+VITE_DRACO_COMPRESSION_URI=https://storage.googleapis.com/innequin-assets/draco-gltf/
+
+# If debug logging is outputted
+VITE_DEBUG=false

.env-sample

@@ -20,8 +20,11 @@ VITE_INWORLD_GENERATE_TOKEN_URI=http://localhost:4000/
 # Manually download asset files here at=https://storage.googleapis.com/innequin-assets/playground/inworld-web-playground-assets-v3.0.zip
 VITE_INNEQUIN_BASE_URI=/assets/v3.0/innequin
 
-# The path to the Innequin configuration
-VITE_INNEQUIN_CONFIG_URI=/assets/v3.0/innequin/config_male.json
+# The path to the Innequin male configuration
+VITE_INNEQUIN_MALE_CONFIG_URI=/assets/v3.0/innequin/config_male.json
+
+# The path to the Innequin female configuration
+VITE_INNEQUIN_FEMALE_CONFIG_URI=/assets/v3.0/innequin/config_female.json
 
 # Ready Player Me base asset file location. It can be a local or external path.
 # Used as the prefix uri for the animation, texture and model file paths are set in config.json.

README.md

@@ -28,7 +28,7 @@ The Inworld Web Playground is a React based project to demonstrate the different
 1. Open your terminal and navigate to the root directory of this project.
 1. Run `yarn install` to install the program dependencies.
 1. Run `yarn run install:assets` to install the 3D assets. If you wish to manually download them you can find them [here](https://storage.googleapis.com/innequin-assets/playground/inworld-web-playground-assets-v1.0.zip).
-1. From the root directory of this project copy the `.env-sample` file to `.env`. Open the new `.env` file and paste the Scene ID previously obtained into the `REACT_APP_INWORLD_SCENE_ID` environment variable as well as a default Character ID into the `REACT_APP_INWORLD_CHARACTER_ID` environment variable. Both of these ID's can be found on Inworld Studio for the workspace imported. For the default character ID we recommend using the `Innequin` base character.
+1. From the root directory of this project copy the `.env-sample` file to `.env`. Open the new `.env` file and paste the Scene ID previously obtained into the `VITE_INWORLD_SCENE_ID` environment variable as well as a default Character ID into the `VITE_INWORLD_CHARACTER_ID` environment variable. Both of these ID's can be found on Inworld Studio for the workspace imported. For the default character ID we recommend using the `Innequin` base character.
 1. (Optional) For running in production install
 
 <br/>

src/models/ModelInnequin.tsx

@@ -1,12 +1,14 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Euler, Vector3 } from 'three';
+
 import { EmotionBehaviorCode } from '@inworld/web-core';
 import {
   Innequin,
   InnequinBodyEmotionToBehavior,
   InnequinConfiguration,
 } from '@inworld/web-threejs';
+import { GENDER_TYPES } from '@inworld/web-threejs/build/src/types/types';
 import { ThreeEvent, useFrame } from '@react-three/fiber';
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { Euler, Vector3 } from 'three';
 
 import {
   OpenConnectionType,
@@ -21,6 +23,7 @@ interface ModelInnequinProps {
   isLoaded: boolean;
   animationCurrent?: string | undefined;
   emotionCurrent?: string | undefined;
+  gender?: GENDER_TYPES | undefined;
   name?: string;
   characterId?: string;
   position?: Vector3;
@@ -64,7 +67,9 @@ function ModelInnequin(props: ModelInnequinProps) {
   useEffect(() => {
     if (props.isLoaded) {
       innequinRef.current = new Innequin({
-        ...Config.INNEQUIN,
+        ...(props.gender && props.gender === GENDER_TYPES.FEMALE
+          ? Config.INNEQUIN_FEMALE
+          : Config.INNEQUIN_MALE),
         skinName: skinNameInitialRef.current,
         onLoad: onLoadInnequin,
         onProgress: onProgressInnequin,

src/rooms/RoomAvatars.tsx

@@ -1,6 +1,8 @@
 import { useEffect } from 'react';
 import { Euler, Vector3 } from 'three';
 
+import { GENDER_TYPES } from '@inworld/web-threejs/build/src/types/types';
+
 import { STATE_OPEN, useInworld } from '../contexts/InworldProvider';
 import ModelInnequin from '../models/ModelInnequin';
 import ModelRPM from '../models/ModelRPM';
@@ -15,10 +17,14 @@ export type RoomAvatarsProps = {
 function RoomAvatars(props: RoomAvatarsProps) {
   const CHARACTER_ID =
     'workspaces/inworld-playground/characters/avatar_bot_-_innequin';
-  const NAME_INNEQUIN = 'InnequinAvatars1';
+  const CHARACTER_FEMALE_ID =
+    'workspaces/inworld-playground/characters/avatar_bot_-_innequin_female';
+  const NAME_INNEQUIN_MALE = 'InnequinAvatarsMale';
+  const NAME_INNEQUIN_FEMALE = 'InnequinAvatarsFemale';
   const NAME_SPHERE = 'SphereAvatars';
   const NAME_RPM = 'RPMAvatars';
-  const SKIN_INNEQUIN = 'SCIFI';
+  const SKIN_INNEQUIN_MALE = 'SCIFI';
+  const SKIN_INNEQUIN_FEMALE = 'DOTS';
   const TRIGGER_WELCOME = 'greet_player';
 
   const { sendTrigger, state } = useInworld();
@@ -34,26 +40,35 @@ function RoomAvatars(props: RoomAvatarsProps) {
       <RoomBase name={props.name}>
         <group name="GroupAvatars">
           <ModelInnequin
-            name={NAME_INNEQUIN}
+            name={NAME_INNEQUIN_FEMALE}
+            gender={GENDER_TYPES.FEMALE}
+            characterId={CHARACTER_FEMALE_ID}
+            skinName={SKIN_INNEQUIN_FEMALE}
+            isLoaded={props.isLoaded}
+            position={new Vector3(-3, 0, -5)}
+            rotation={new Euler(0, Math.PI / 8, 0)}
+          />
+          <ModelRPM
+            name={NAME_RPM}
             characterId={CHARACTER_ID}
-            skinName={SKIN_INNEQUIN}
             isLoaded={props.isLoaded}
-            position={new Vector3(2, 0, -5)}
-            rotation={new Euler(0, -Math.PI / 8, 0)}
+            position={new Vector3(-1.5, 0, -6)}
+            rotation={new Euler(0, 0, 0)}
           />
           <ModelSphere
             name={NAME_SPHERE}
             characterId={CHARACTER_ID}
             isLoaded={props.isLoaded}
-            position={new Vector3(0, 1, -6)}
+            position={new Vector3(1.5, 1, -6)}
             rotation={new Euler(0, 0, 0)}
           />
-          <ModelRPM
-            name={NAME_RPM}
+          <ModelInnequin
+            name={NAME_INNEQUIN_MALE}
             characterId={CHARACTER_ID}
+            skinName={SKIN_INNEQUIN_MALE}
             isLoaded={props.isLoaded}
-            position={new Vector3(-2, 0, -5)}
-            rotation={new Euler(0, Math.PI / 8, 0)}
+            position={new Vector3(3, 0, -5)}
+            rotation={new Euler(0, -Math.PI / 8, 0)}
           />
         </group>
       </RoomBase>

src/types/types.ts

@@ -2,7 +2,8 @@ import { EmotionEvent } from '@inworld/web-core';
 
 export type Configuration = {
   THREEJS: ThreejsConfiguration;
-  INNEQUIN: InnequinAssetsConfiguration;
+  INNEQUIN_MALE: InnequinAssetsConfiguration;
+  INNEQUIN_FEMALE: InnequinAssetsConfiguration;
   RPM: RPMAssetsConfiguration;
   INWORLD: InworldConfiguration;
 };

src/utils/config.ts

@@ -31,9 +31,14 @@ export const Config: Configuration = {
       import.meta.env.VITE_INWORLD_GENERATE_TOKEN_URI ||
       'http://localhost:4000',
   },
-  INNEQUIN: {
+  INNEQUIN_MALE: {
     baseURI: import.meta.env.VITE_INNEQUIN_BASE_URI || '',
-    configURI: import.meta.env.VITE_INNEQUIN_CONFIG_URI || '',
+    configURI: import.meta.env.VITE_INNEQUIN_MALE_CONFIG_URI || '',
+    dracoURI: import.meta.env.VITE_DRACO_COMPRESSION_URI || '',
+  },
+  INNEQUIN_FEMALE: {
+    baseURI: import.meta.env.VITE_INNEQUIN_BASE_URI || '',
+    configURI: import.meta.env.VITE_INNEQUIN_FEMALE_CONFIG_URI || '',
     dracoURI: import.meta.env.VITE_DRACO_COMPRESSION_URI || '',
   },
   RPM: {