@vsllabs/webgl-js
v1.0.5
Published
VSL-Labs Webgl implementation for translating text into 3D sign language
Downloads
42
Readme
@vsllabs/webgl-js
Installation:
To install the package, run:
Using npm:
$ npm install @vsllabs/webgl-jsUsing yarn:
$ yarn add @vsllabs/webgl-jsTable of Contents
Usage Example:
Below is an example of how to use the webgl-js:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webgl-js</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body {
width: 100%;
height: 100%;
}
/* style parent container */
#main-container {
width: 500px;
height: 700px;
}
</style>
</head>
<body>
<div id="main-container"></div>
<button type="button" id="translate_btn">Translate</button>
</body>
<script type="module" src="./index.js"></script>
</html>index.js
import { initialize, translateTextToASL } from "@vsllabs/webgl-js";
// container ID is the parent element you want to render the webgl within.
// in our example the ID is "main-container"
initialize("API KEY", "Container ID");
const translate_btn = document.getElementById("translate_btn");
translate_btn.onclick = () => {
translateTextToASL("Hello, how are you today?");
};Documentation
The webgl-js npm provides the necessary setup and functionality for integrating the VSL WebGL component. Other various properties and functions for rendering, controlling, and interacting with the WebGL component can also be imported.
Required Parameters
- API_KEY: Your unique API key for accessing the VSL WebGL services.
- Container ID: The HTML parent element ID to render the webgl within.
Imports
The following values and functions are also imported by webgl-js:
| Value | Explanation | | :------------ | :--------------------------------------------- | | initialize | The initialization function. Can be styled via the parent container.Example: initialize("API KEY", "Container ID"); | | 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 webgl: Call the initialize function with the required parameters to initialize the WebGL component.
- If succeeded, The webgl component will show withing the parent element of the provided ID
- 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.