@vsllabs/webgl-react NPM

@vsllabs/webgl-react

Installation:

To install the package, run:

Using npm:

$ npm install @vsllabs/webgl-react

Using yarn:

$ yarn add @vsllabs/webgl-react

Usage Example:

Below is an example of how to use the useVslWebGL hook within a React component:

import { useState } from 'react'
import { useVslWebGL } from '@vsllabs/webgl-react';

const app = () => {
    // example text input state
    const [inputText, setInputText] = useState('')

    // invoke the useVslWebGL hook with your personal API_KEY and build URLs
    const { VSLWebGl, unityProvider, translateTextToASL, isUnityLoaded, isTranslating, replay } = useVslWebGL({
        API_KEY: 'Your API Key here',
        // *We will provide these URLs for you
        loaderUrl: 'Unity build Url'
        dataUrl: 'Unity build Url'
        frameworkUrl: 'Unity build Url'
        codeUrl: 'Unity build Url'
     })

    return (
        <div style={{ width: '400px', height: '700px', position: 'relative', margin: 'auto' }}>

            {!isUnityLoaded && (
                <div style={{ position: 'absolute', width: '100%', height: '100%', top: 0, left: 0, background: '#999' }}>
                {/* Loading spinner example here */}
                </div>
            )}

            {/* The WebGL component for rendering, can be styled as needed */}
            <VSLWebGl id="unityWebGl" style={{ width: '100%', height: '100%' }} unityProvider={unityProvider} />

            {/* Example input for the text state */}
            <input type="text" value={inputText} onChange={ev => setInputText(ev.target.value)} />

            {/* Translate button, triggers translation when Unity is loaded and input is provided */}
            <button type="button" onClick={() => translateTextToASL(inputText)}>
                {isTranslating ? 'Loading...' : 'Translate'}
            </button>

            {/* Replay button, replays the last translation */}
            <button type="button" onClick={replay}>
                Replay
            </button>
        </div>
    )
}

Documentation

The useVslWebGL hook provides the necessary setup and functionality for integrating the VSL WebGL component within a React application. It returns an object with various properties and functions for rendering, controlling, and interacting with the WebGL component.

Required Parameters

API_KEY: Your unique API key for accessing the VSL WebGL services.
loaderUrl, dataUrl, frameworkUrl, codeUrl: URLs provided by VSL for accessing the Unity WebGL build. Each URL is necessary for loading the Unity environment properly.

Returned Values

The following values and functions are returned by useVslWebGL:

Value	Explanation
VSLWebGl	A JSX component for rendering the Unity WebGL. Can be styled and controlled within a parent component or container.Example: <VSLWebGl style={{ ... }} unityProvider={unityProvider} />
unityProvider	Required prop for the *VSLWebGl* component, provides the Unity instance.Pass this to the *unityProvider* prop of VSLWebGl to initialize the Unity environment.
translateTextToASL	Function to trigger text translation within the Unity WebGL.Arguments: Accepts a single argument (the text to translate).Example: translateTextToASL("Hello, world!")
isUnityLoaded	Indicates whether the Unity WebGL component has fully loaded. Useful for checking readiness to show loaders and before triggering translation.Example: Disabling the translate button until Unity is ready.
isTranslating	Represents the loading state during the translation process. Helpful for displaying loading indicators.Example: {isTranslating ? 'Translating...' : 'Translate'}
replay	Function to replay the last translated text within the Unity WebGL.Arguments: No arguments required.
changeBgColor	Changes the background color of the WebGL component.Arguments: Accepts a single argument, a string representing a hex color value (e.g., #FFFFFF for white).Example: changeBgColor('#FF5733') to set the background color to a shade of orange.
setAnimationSpeed	Controls the speed of animations within the WebGL environment.Arguments: Accepts a single string argument, which can be one of four options: "0" (for pause), "0.5", "1" (default), or "1.5".Example: setAnimationSpeed("1.5") to set the animation speed to 1.5x.
toggleCameraRotation	Toggles the rotation of the camera in the WebGL environment.Arguments: Accepts a single boolean argument to enable (true) or disable (false > default) camera rotation.Example: toggleCameraRotation(true) to enable camera rotation.
error	If any errors occur during loading or translation, this string provides an error message explaining the issue.Example: Display error in your UI if it’s not an empty string.Note: Errors are also logged in the console

Example Workflow

Initialize the Hook: Call useVslWebGL with the required parameters to initialize the WebGL component.
Render the Component: Use in your component, styled to fit your layout.
Translate Text: Use the translateTextToASL function to translate input text when Unity is loaded (isUnityLoaded).
Replay Last Translation: Use the replay function to repeat the last translation as needed.
Handle Errors: Check the error value to catch and display any issues that occur during loading or translation.