Skip to main content

Introduction

WebGi is a framework to create high quality unbranded/custom branded 3D applications easily. It can be used to quickly get into production-ready webGL and 3D web graphics without getting into graphics and shaders. The framework is also fully customisable with an extensive API for experienced programmers to add features and make more cool stuff.

Status

Currently, WebGi SDK is in Public Beta and is constantly under development.

The 3d viewer is production ready and is being used in production with multiple clients.
Check the top right corner for the latest SDK and editor version.

Getting Started

To embed the 3D viewer or the sandbox editor directly on your website without any custom development or changes, read the Quickstart guide.

Or get started by Generating a new project from below,

Or try WebGI immediately on codepen with our ES6 module sample or have a look at the complete codepen collection.

Generate a new project

What you'll need

  • Node.js version 14 or above:
    • When installing Node.js, you are recommended to check all checkboxes related to dependencies.
  • A code editor like VSCode or Jetbrains WebStorm to edit javascript and typescript.
  • Github Account

Generate a new project using the webgi starter template on Github.

Go to https://github.com/pixotronics/webgi-vanilla-starter and click the Use this template button. This will create a new project on github with the starter code required for webgi.

This starter project uses parcel bundler for simple configuration, but webgi can be integrated in your project with any bundler like webpack, rollup etc. Check the Viewer Getting Started section for more.


Now, clone this project to your local machine.
Next, open the project folder in your code editor and cd into the project folder in a terminal.
Run the command in the terminal:

npm install

This will install all the dependencies required for webgi.

Start the project

To build the project and run the development server:

npm run start

The npm run start command builds project locally and serves it through a development server, ready for you to view at http://localhost:1234/index.html.

The webpage should load a 3D model with proper lighting. Let us know if you find any issues.

Next, check out with the Features or the SDK Manual to get started learning about what's possible with webgi.