From 92b55c6a30f9a1aa9e9ecaa1595eb6270d83e937 Mon Sep 17 00:00:00 2001 From: Peter Couture Date: Wed, 3 Apr 2024 16:50:47 +0200 Subject: [PATCH] feat: added female characters --- .env-remote | 42 ++++++++++++++++++++++++++++++++++++ .env-sample | 7 ++++-- README.md | 2 +- src/models/ModelInnequin.tsx | 11 +++++++--- src/rooms/RoomAvatars.tsx | 37 +++++++++++++++++++++---------- src/types/types.ts | 3 ++- src/utils/config.ts | 9 ++++++-- 7 files changed, 91 insertions(+), 20 deletions(-) create mode 100644 .env-remote diff --git a/.env-remote b/.env-remote new file mode 100644 index 0000000..be42218 --- /dev/null +++ b/.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 diff --git a/.env-sample b/.env-sample index 80a668f..98b9f40 100644 --- a/.env-sample +++ b/.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. diff --git a/README.md b/README.md index f30b37f..dc8923d 100644 --- a/README.md +++ b/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
diff --git a/src/models/ModelInnequin.tsx b/src/models/ModelInnequin.tsx index af31be1..fb0d478 100644 --- a/src/models/ModelInnequin.tsx +++ b/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, diff --git a/src/rooms/RoomAvatars.tsx b/src/rooms/RoomAvatars.tsx index 9fd924b..c9eb5ee 100644 --- a/src/rooms/RoomAvatars.tsx +++ b/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) { + - diff --git a/src/types/types.ts b/src/types/types.ts index 92dad87..02b2ebb 100644 --- a/src/types/types.ts +++ b/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; }; diff --git a/src/utils/config.ts b/src/utils/config.ts index 6e24ff9..8c849a3 100644 --- a/src/utils/config.ts +++ b/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: {