Issues with Unity WebGL React Integration

Unity Questions
,
1

I am currently having issues with my WebGL build working. I followed this tutorial: Building for WebGL | Documentation

Then I had the issue with Assets\Convai\Scripts\Editor\Character\ConvaiCharacterImporter.cs(179,45): error CS0117: ‘DirectoryUtility’ does not contain a definition for ‘GetRelativeProjectPath’ which I corrected with this: ‘DirectoryUtility’ does not contain a definition for ‘GetRelativeProjectPath’ - #21 by Samuel_Adi_Saut_Pury

Yet I found a bunch of deprecated code:

image
image2001×349 147 KB

Before updating the deprecated method, I made a build and this is all I see:

image
image1920×956 43.2 KB

My mic is not picking up any input, nor am I able to type. I would like to know what I am doing wrong

Unity version 6
WebGL version 2.1.0

2

Hello @TrainingLab_Dev,

Welcome to the Convai Developer Forum!

If possible, please share your browser logs while running the WebGL build. This will help us better understand the issue. You can access browser logs by pressing F12 and navigating to the Console tab:

Google Chrome: Press F12 → Click on the Console tab

Mozilla Firefox: Press F12 → Select the Console tab

Microsoft Edge: Press F12 → Go to the Console tab

Safari (Mac): Enable the Developer Menu in settings → Press Option + Command + C

Regarding the DirectoryUtility issue, this is due to a recent Ready Player Me update. Deprecated code issues are expected, especially with Unity 6, as many changes have been introduced. The SDK will be updated in future releases to improve compatibility.

Let us know if you need further assistance!

3

These are the logs I am shown, I am running this on a react app:


"memorysetup-profiler-bucket-allocator-block-size=4194304" [TL_WebGL.framework.js:2436:14](http://localhost:3000/Build/TL_WebGL.framework.js)

"memorysetup-profiler-bucket-allocator-block-count=1" [TL_WebGL.framework.js:2436:14](http://localhost:3000/Build/TL_WebGL.framework.js)

"memorysetup-profiler-allocator-block-size=16777216" [TL_WebGL.framework.js:2436:14](http://localhost:3000/Build/TL_WebGL.framework.js)

"memorysetup-profiler-editor-allocator-block-size=1048576" [TL_WebGL.framework.js:2436:14](http://localhost:3000/Build/TL_WebGL.framework.js)

"memorysetup-temp-allocator-size-main=4194304" [TL_WebGL.framework.js:2436:14](http://localhost:3000/Build/TL_WebGL.framework.js)

"memorysetup-job-temp-allocator-block-size=2097152" [TL_WebGL.framework.js:2436:14](http://localhost:3000/Build/TL_WebGL.framework.js)

"memorysetup-job-temp-allocator-block-size-background=1048576" [TL_WebGL.framework.js:2436:14](http://localhost:3000/Build/TL_WebGL.framework.js)

"memorysetup-job-temp-allocator-reduction-small-platforms=262144" [TL_WebGL.framework.js:2436:14](http://localhost:3000/Build/TL_WebGL.framework.js)

Found NO interfaces on host . [TL_WebGL.framework.js:2436:14](http://localhost:3000/Build/TL_WebGL.framework.js)

[Physics::Module] Initialized fallback backend. [TL_WebGL.framework.js:2436:14](http://localhost:3000/Build/TL_WebGL.framework.js)

[Physics::Module] Id: 0xdecafbad [TL_WebGL.framework.js:2436:14](http://localhost:3000/Build/TL_WebGL.framework.js)

Loading player data from data.unity3d [TL_WebGL.framework.js:2436:14](http://localhost:3000/Build/TL_WebGL.framework.js)

Initialize engine version: 6000.0.26f1 (ccb7c73d2c02) [TL_WebGL.framework.js:2436:14](http://localhost:3000/Build/TL_WebGL.framework.js)

[Subsystems] Discovering subsystems at path UnitySubsystems [TL_WebGL.framework.js:2436:14](http://localhost:3000/Build/TL_WebGL.framework.js)

Creating WebGL 2.0 context. [TL_WebGL.loader.js:77:15](http://localhost:3000/Build/TL_WebGL.loader.js)

Renderer: ANGLE (NVIDIA, NVIDIA GeForce GTX 980 Direct3D11 vs_5_0 ps_5_0), or similar [TL_WebGL.framework.js:2436:14](http://localhost:3000/Build/TL_WebGL.framework.js)

Vendor: Mozilla [TL_WebGL.framework.js:2436:14](http://localhost:3000/Build/TL_WebGL.framework.js)

Version: OpenGL ES 3.0 (WebGL 2.0) [TL_WebGL.framework.js:2436:14](http://localhost:3000/Build/TL_WebGL.framework.js)

GLES: 3 [TL_WebGL.framework.js:2436:14](http://localhost:3000/Build/TL_WebGL.framework.js)

EXT_color_buffer_float EXT_float_blend EXT_texture_compression_bptc EXT_texture_compression_rgtc EXT_texture_filter_anisotropic OES_draw_buffers_indexed OES_texture_float_linear OVR_multiview2 WEBGL_compressed_texture_s3tc WEBGL_compressed_texture_s3tc_srgb WEBGL_debug_renderer_info WEBGL_debug_shaders WEBGL_lose_context WEBGL_provoking_vertex GL_EXT_color_buffer_float GL_EXT_float_blend GL_EXT_texture_compression_bptc GL_EXT_texture_compression_rgtc GL_EXT_texture_filter_anisotropic GL_OES_draw_buffers_indexed GL_OES_texture_float_linear GL_OVR_multiview2 GL_WEBGL_compressed_texture_s3tc GL_WEBGL_compressed_texture_s3tc_srgb GL_WEBGL_debug_renderer_info GL_WEBGL_debug_shaders GL_WEBGL_lose_context GL_WEBGL_provoking_vertex [TL_WebGL.framework.js:2436:14](http://localhost:3000/Build/TL_WebGL.framework.js)

OPENGL LOG: Creating OpenGL ES 3.0 graphics device ; Context level <OpenGL ES 3.0> ; Context handle 1 [TL_WebGL.framework.js:2436:14](http://localhost:3000/Build/TL_WebGL.framework.js)

[Physics::Module] Selected backend. [TL_WebGL.framework.js:2436:14](http://localhost:3000/Build/TL_WebGL.framework.js)

[Physics::Module] Name: PhysX [TL_WebGL.framework.js:2436:14](http://localhost:3000/Build/TL_WebGL.framework.js)

[Physics::Module] Id: 0xf2b8ea05 [TL_WebGL.framework.js:2436:14](http://localhost:3000/Build/TL_WebGL.framework.js)

[Physics::Module] SDK Version: 4.1.2 [TL_WebGL.framework.js:2436:14](http://localhost:3000/Build/TL_WebGL.framework.js)

[Physics::Module] Integration Version: 1.0.0 [TL_WebGL.framework.js:2436:14](http://localhost:3000/Build/TL_WebGL.framework.js)

[Physics::Module] Threading Mode: Single-Threaded [TL_WebGL.framework.js:2436:14](http://localhost:3000/Build/TL_WebGL.framework.js)

Input Manager initialize... [TL_WebGL.framework.js:2436:14](http://localhost:3000/Build/TL_WebGL.framework.js)

Input System initialize... [TL_WebGL.framework.js:2436:14](http://localhost:3000/Build/TL_WebGL.framework.js)

New input system (experimental) initialized [TL_WebGL.framework.js:2436:14](http://localhost:3000/Build/TL_WebGL.framework.js)

Shader 'Reallusion/Amplify/RL_SkinShader_Variants_3D' uses 33 texture parameters, more than the 32 supported by the current graphics device. [TL_WebGL.framework.js:2431:14](http://localhost:3000/Build/TL_WebGL.framework.js)

Shader 'Reallusion/Amplify/RL_SkinShader_Variants_3D' uses 34 texture parameters, more than the 32 supported by the current graphics device. [TL_WebGL.framework.js:2431:14](http://localhost:3000/Build/TL_WebGL.framework.js)

UnloadTime: 0.000000 ms [TL_WebGL.framework.js:2436:14](http://localhost:3000/Build/TL_WebGL.framework.js)

Failed to create agent because there is no valid NavMesh 3 [TL_WebGL.framework.js:2431:14](http://localhost:3000/Build/TL_WebGL.framework.js)

The LiberationSans SDF Font Asset was not found. There is no Font Asset assigned to Kart Label. [TL_WebGL.framework.js:2431:14](http://localhost:3000/Build/TL_WebGL.framework.js)

The LiberationSans SDF Font Asset was not found. There is no Font Asset assigned to Label. 4 [TL_WebGL.framework.js:2431:14](http://localhost:3000/Build/TL_WebGL.framework.js)

The LiberationSans SDF Font Asset was not found. There is no Font Asset assigned to ChatBox. [TL_WebGL.framework.js:2431:14](http://localhost:3000/Build/TL_WebGL.framework.js)

The LiberationSans SDF Font Asset was not found. There is no Font Asset assigned to Placeholder. [TL_WebGL.framework.js:2431:14](http://localhost:3000/Build/TL_WebGL.framework.js)

The LiberationSans SDF Font Asset was not found. There is no Font Asset assigned to Text. 2 [TL_WebGL.framework.js:2431:14](http://localhost:3000/Build/TL_WebGL.framework.js)

The LiberationSans SDF Font Asset was not found. There is no Font Asset assigned to QuestionText. [TL_WebGL.framework.js:2431:14](http://localhost:3000/Build/TL_WebGL.framework.js)

The LiberationSans SDF Font Asset was not found. There is no Font Asset assigned to AnswerText. [TL_WebGL.framework.js:2431:14](http://localhost:3000/Build/TL_WebGL.framework.js)

The LiberationSans SDF Font Asset was not found. There is no Font Asset assigned to Text. [TL_WebGL.framework.js:2431:14](http://localhost:3000/Build/TL_WebGL.framework.js)

The LiberationSans SDF Font Asset was not found. There is no Font Asset assigned to Chat Text. [TL_WebGL.framework.js:2431:14](http://localhost:3000/Build/TL_WebGL.framework.js)

The LiberationSans SDF Font Asset was not found. There is no Font Asset assigned to Text. [TL_WebGL.framework.js:2431:14](http://localhost:3000/Build/TL_WebGL.framework.js)

The LiberationSans SDF Font Asset was not found. There is no Font Asset assigned to Title. [TL_WebGL.framework.js:2431:14](http://localhost:3000/Build/TL_WebGL.framework.js)

The LiberationSans SDF Font Asset was not found. There is no Font Asset assigned to Message. [TL_WebGL.framework.js:2431:14](http://localhost:3000/Build/TL_WebGL.framework.js)

The LiberationSans SDF Font Asset was not found. There is no Font Asset assigned to Title. [TL_WebGL.framework.js:2431:14](http://localhost:3000/Build/TL_WebGL.framework.js)

The LiberationSans SDF Font Asset was not found. There is no Font Asset assigned to Message. [TL_WebGL.framework.js:2431:14](http://localhost:3000/Build/TL_WebGL.framework.js)

The LiberationSans SDF Font Asset was not found. There is no Font Asset assigned to Title. [TL_WebGL.framework.js:2431:14](http://localhost:3000/Build/TL_WebGL.framework.js)

The LiberationSans SDF Font Asset was not found. There is no Font Asset assigned to Message. [TL_WebGL.framework.js:2431:14](http://localhost:3000/Build/TL_WebGL.framework.js)

WebGL warning: drawArraysInstanced: Drawing to a destination rect smaller than the viewport rect. (This warning will only be given once)

Request for pointer lock was denied because the browser failed to lock the pointer. 2 [localhost:3000](http://localhost:3000/)

<color=grey>[Info][Character]: Network Reachability: Reachable via Local Area Network</color> [TL_WebGL.framework.js:2436:14](http://localhost:3000/Build/TL_WebGL.framework.js)

<color=yellow>[Warning][Character]: No target object set for head tracking. Setting default target as main camera</color> 4 [TL_WebGL.framework.js:2431:14](http://localhost:3000/Build/TL_WebGL.framework.js)

Please assign a Font Asset to this ChatBox gameobject. [TL_WebGL.framework.js:2431:14](http://localhost:3000/Build/TL_WebGL.framework.js)

Please assign a Font Asset to this Placeholder gameobject. [TL_WebGL.framework.js:2431:14](http://localhost:3000/Build/TL_WebGL.framework.js)

Please assign a Font Asset to this Text gameobject. 2 [TL_WebGL.framework.js:2431:14](http://localhost:3000/Build/TL_WebGL.framework.js)

Please assign a Font Asset to this Kart Label gameobject. [TL_WebGL.framework.js:2431:14](http://localhost:3000/Build/TL_WebGL.framework.js)

Please assign a Font Asset to this Label gameobject. 4 [TL_WebGL.framework.js:2431:14](http://localhost:3000/Build/TL_WebGL.framework.js)

-------- Shader Reallusion/Amplify/RL_SkinShader_Variants_3D -------- GLSL link error: FRAGMENT shader texture image units count exceeds MAX_TEXTURE_IMAGE_UNITS(16) [TL_WebGL.framework.js:2431:14](http://localhost:3000/Build/TL_WebGL.framework.js)

Note: Creation of internal variant of shader 'Reallusion/Amplify/RL_SkinShader_Variants_3D' failed. [TL_WebGL.framework.js:2436:14](http://localhost:3000/Build/TL_WebGL.framework.js)

WebGL warning: drawElementsInstanced: Depth texture comparison requests (e.g. `LINEAR`) Filtering, but behavior is implementation-defined, and so on some systems will sometimes behave as `NEAREST`. (warns once)

WebGL warning: linkProgram: Failed to link, leaving the following log: FRAGMENT shader texture image units count exceeds MAX_TEXTURE_IMAGE_UNITS(16)

Microphone permission granted! [TL_WebGL.framework.js:15281:27](http://localhost:3000/Build/TL_WebGL.framework.js)

<color=cyan>[Debug][Character]: Player is near Convai NPC Trainer Chris</color> [TL_WebGL.framework.js:2436:14](http://localhost:3000/Build/TL_WebGL.framework.js)

Active NPC changed to Convai NPC Trainer Chris [TL_WebGL.framework.js:2436:14](http://localhost:3000/Build/TL_WebGL.framework.js)

Character ID: 44901144-8aa5-11ef-ac59-42010a7be011 [TL_WebGL.framework.js:2436:14](http://localhost:3000/Build/TL_WebGL.framework.js)

getUserMedia supported. [ConvaiWebGLSDK.js:1:387204](http://localhost:3000/TemplateData/ConvaiWebGLSDK.js)

Response Text: Welcome to today’s training session. Your goal is to practice delivering constructive feedback to your colleague, Sara, in a professional and helpful manner. You’ll need to guide the conversation to ensure the feedback is clear, and promotes growth. [TL_WebGL.framework.js:15442:31](http://localhost:3000/Build/TL_WebGL.framework.js)

Session ID: cfbc18e19968e69dc554d60c6a829554 [TL_WebGL.framework.js:15443:31](http://localhost:3000/Build/TL_WebGL.framework.js)

<color=grey>[Info][Character]: Character Trainer Chris is talking: True</color> [TL_WebGL.framework.js:2436:14](http://localhost:3000/Build/TL_WebGL.framework.js)

Action Response: <empty string> [TL_WebGL.framework.js:15419:27](http://localhost:3000/Build/TL_WebGL.framework.js)

<color=cyan>[Debug][Character]: Player is near Convai NPC Amelia</color> [TL_WebGL.framework.js:2436:14](http://localhost:3000/Build/TL_WebGL.framework.js)

Active NPC changed to Convai NPC Amelia [TL_WebGL.framework.js:2436:14](http://localhost:3000/Build/TL_WebGL.framework.js)

Character ID: d1aeb28c-3b92-11ee-8189-42010a40000b [TL_WebGL.framework.js:2436:14](http://localhost:3000/Build/TL_WebGL.framework.js)

getUserMedia supported. [ConvaiWebGLSDK.js:1:387204](http://localhost:3000/TemplateData/ConvaiWebGLSDK.js)

BT Response: b6ffa1a4-8aa5-11ef-ab21-42010a7be011 [TL_WebGL.framework.js:15413:27](http://localhost:3000/Build/TL_WebGL.framework.js)

Interaction ID: 96df7f7a-fa3a-11ef-9f69-42010a7be01a [TL_WebGL.framework.js:15478:27](http://localhost:3000/Build/TL_WebGL.framework.js)

<color=cyan>[Debug][Character]: Player left Convai NPC Amelia</color> [TL_WebGL.framework.js:2436:14](http://localhost:3000/Build/TL_WebGL.framework.js)

<color=cyan>[Debug][Character]: Player is near Convai NPC Steve</color> [TL_WebGL.framework.js:2436:14](http://localhost:3000/Build/TL_WebGL.framework.js)

Active NPC changed to Convai NPC Steve [TL_WebGL.framework.js:2436:14](http://localhost:3000/Build/TL_WebGL.framework.js)

Character ID: e74c546e-5ecd-11ef-9f4b-42010a7be011 [TL_WebGL.framework.js:2436:14](http://localhost:3000/Build/TL_WebGL.framework.js)

getUserMedia supported. [ConvaiWebGLSDK.js:1:387204](http://localhost:3000/TemplateData/ConvaiWebGLSDK.js)

Response Text: I think you forgot to type something. [TL_WebGL.framework.js:15442:31](http://localhost:3000/Build/TL_WebGL.framework.js)

Session ID: 18a1f1659114fb04931f846d63c3a9f5 [TL_WebGL.framework.js:15443:31](http://localhost:3000/Build/TL_WebGL.framework.js)

<color=grey>[Info][Character]: Character Steve is talking: True</color> [TL_WebGL.framework.js:2436:14](http://localhost:3000/Build/TL_WebGL.framework.js)

<color=grey>[Info][Character]: Character Trainer Chris is talking: False</color> [TL_WebGL.framework.js:2436:14](http://localhost:3000/Build/TL_WebGL.framework.js)

Response Text: What's on your mind? [TL_WebGL.framework.js:15442:31](http://localhost:3000/Build/TL_WebGL.framework.js)

Session ID: 18a1f1659114fb04931f846d63c3a9f5 [TL_WebGL.framework.js:15443:31](http://localhost:3000/Build/TL_WebGL.framework.js)

Action Response: <empty string> [TL_WebGL.framework.js:15419:27](http://localhost:3000/Build/TL_WebGL.framework.js)

Interaction ID: 9e4addae-fa3a-11ef-be99-42010a7be01a [TL_WebGL.framework.js:15478:27](http://localhost:3000/Build/TL_WebGL.framework.js)

<color=grey>[Info][Character]: Character Steve is talking: False</color> [TL_WebGL.framework.js:2436:14](http://localhost:3000/Build/TL_WebGL.framework.js)

Response Text: Hey there! [TL_WebGL.framework.js:15442:31](http://localhost:3000/Build/TL_WebGL.framework.js)

Session ID: 18a1f1659114fb04931f846d63c3a9f5 [TL_WebGL.framework.js:15443:31](http://localhost:3000/Build/TL_WebGL.framework.js)

<color=grey>[Info][Character]: Character Steve is talking: True</color> [TL_WebGL.framework.js:2436:14](http://localhost:3000/Build/TL_WebGL.framework.js)

<color=grey>[Info][Character]: Character Steve is talking: False</color> [TL_WebGL.framework.js:2436:14](http://localhost:3000/Build/TL_WebGL.framework.js)

<color=grey>[Info][Character]: Character Steve is talking: True</color> [TL_WebGL.framework.js:2436:14](http://localhost:3000/Build/TL_WebGL.framework.js)

Response Text: I'm doing great, thanks for asking. [TL_WebGL.framework.js:15442:31](http://localhost:3000/Build/TL_WebGL.framework.js)

Session ID: 18a1f1659114fb04931f846d63c3a9f5 [TL_WebGL.framework.js:15443:31](http://localhost:3000/Build/TL_WebGL.framework.js)

Response Text: How about you? [TL_WebGL.framework.js:15442:31](http://localhost:3000/Build/TL_WebGL.framework.js)

Session ID: 18a1f1659114fb04931f846d63c3a9f5 [TL_WebGL.framework.js:15443:31](http://localhost:3000/Build/TL_WebGL.framework.js)

Action Response: <empty string> [TL_WebGL.framework.js:15419:27](http://localhost:3000/Build/TL_WebGL.framework.js)

Interaction ID: a5e098ba-fa3a-11ef-bf02-42010a7be01a [TL_WebGL.framework.js:15478:27](http://localhost:3000/Build/TL_WebGL.framework.js)

<color=grey>[Info][Character]: Character Steve is talking: False</color>```
5

Ok, I see the warnings are that you have not installed TextMeshPro.

Play the scene once in Unity and you will get a prompt window. Install TMP Essentials.

6

That’s the issue, no error is coming up but I am unable to talk with the npc, and the chat log is not working.

What I do see as the potential issue is:
The LiberationSans SDF Font Asset was not found. There is no Font Asset assigned to ChatBox. [TL_WebGL.framework.js:2431:14](http://localhost:3000/Build/TL_WebGL.framework.js)

image
image408×731 41 KB

I have installed TMP Essentials

image
image192×135 6.01 KB

7

I get this when I attempt to run in Unity (I am aware that WebGL cannot be run directly in the editor)

image
image1032×285 84.3 KB

8

Sort of fixed it. It works when I do build and run:

I did:

  1. I copied the font to Assets/Resources
  2. Went to Edit > Project Settings > Player > Other Settings
  • Scroll down to Script Compilation > Strip Engine Code.
  • Uncheck Strip Engine Code (prevents Unity from removing unused assets like fonts).

But when I add it to my react code the font is not found:

import React from "react";
import { Unity, useUnityContext } from "react-unity-webgl";

const UnityGame: React.FC = () => {
    const { unityProvider, isLoaded, loadingProgression } = useUnityContext({
        loaderUrl: "/Build/TL_WebGL.loader.js",
        dataUrl: "/Build/TL_WebGL.data",
        frameworkUrl: "/Build/TL_WebGL.framework.js",
        codeUrl: "/Build/TL_WebGL.wasm",
    });

    return (
        <div>
            {!isLoaded && <p>Loading {Math.round(loadingProgression * 100)}%</p>}
            <Unity unityProvider={unityProvider} style={{ width: "100%", height: "600px" }} />
        </div>
    );
};

export default UnityGame;

Screenshot from when I build and run:

image
image1920×953 52.6 KB

9

It looks like this platform requires some specific setup for fonts to work correctly.

I’d recommend creating a new project with simple UI objects containing text to check if the text appears properly. This might help identify whether the issue is related to the project setup or the React integration.

Let us know what you find!