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 Stable and is being used in production on several websites and applications.
Check the top right corner for the latest SDK and editor version.

Getting Started

Easiest way to embed the model viewer to an existing webpage is to add the following code in the HTML:

<!--Add this script tag in the page head-->
<script src="https://dist.pixotronics.com/webgi/runtime/viewer-0.9.3.js"> </script>
<!--Add the viewer element somewhere inside the body of the page.-->
<webgi-viewer
src="https://dist.pixotronics.com/webgi/assets/gltf/cube_diamond_sample.gltf"
environment="https://dist.pixotronics.com/webgi/assets/hdr/gem_2.hdr"
style="width: 100%; height: 100%; z-index: 1; display: block;"
/>

Read the Quickstart guide to learn more about different ways of setting up the viewer, making changes, and creating a simple editor. To embed the 3D viewer or the sandbox editor directly on your website without any custom development or changes.

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 vite 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 dev

The npm run dev 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.