webgi SDK v0

We provide the webgi SDK v0(earlier hosted on webgi.xyz/docs) with long term support for existing customers of webgi and ijewel3d.

For new projects:

• Checkout the new library at webgi.dev which provides a better developer experience, more features, and starts for free.
• For Rendering Jewelery, Gem-stones, Fashion, Precious Metal, configurators, AR TryOn - iJewel3D Developer
• The core framework used in the webgi SDK is now free and open source - Threepipe SDK.

Version

• Latest version - v0.17.0 (LTS)
• Previous versions - Changelog

Introduction

• webgi v0 is a three.js framework to create 3d applications, ecommerce viewers, configurators.
• It includes a set of plugins for rendering, lighting, materials, post-processing, and more.
• webgi v0 requires a license to use in any commercial applications.
• We are selling any new webgi v0 license, checkout ijewel3d and webgi.dev for new products depending on your use-case.

Examples

• webgi models showcase - https://showcase.webgi.xyz/
• Pixotronics showcase - https://showcase.pixotronics.com/
• VArts showcase - https://demo.realvwr.com/
• Starter project - https://github.com/pixotronics/webgi-vanilla-starter
• Codepen samples - https://codepen.io/collection/kNgvVW

Support

For support and inquiries, email us at [email protected]

Installation

webgi Viewer setup (HTML)

Easiest way is to use the webgi-viewer web component with a src file (glb/gltf) and optionally an environment map (hdr/png)

<!--Add this script tag in the page head-->
<script src="https://releases.ijewel3d.com/webgi/runtime/viewer-0.17.0.js"> </script>
<!--Add the viewer element somewhere inside the body of the page.-->
<webgi-viewer
        id="viewer-3d"
        src="https://releases.ijewel3d.com/webgi/runtime/bundle-0.17.0.js"
        environment="https://releases.ijewel3d.com/webgi/assets/hdr/gem_2.hdr"
        style="width: 100%; height: 100%; z-index: 1; display: block;"
/>

The viewer can be accessed later in javascript to change the model, add plugins, make changes.

<script>
const element = document.getElementById('viewer-3d');

element.addEventListener('initialized', ()=>{
    const viewer = element.viewer; // `ViewerApp`
    console.log(viewer);
    // Use the viewer
    viewer.load("some_other_model");
    viewer.getPlugin(DepthOfFieldPlugin).enabled = true;

})

</script>

TIP

Include the complete bundle js (instead of the viewer) to access all plugins and utilities.

<script src="https://releases.ijewel3d.com/libs/webgi-v0/bundle-0.17.0.js"> </script>

webgi Viewer setup (JS)

First, include the viewer js file in the HTML (ideally in the head portion)

<script src="https://releases.ijewel3d.com/libs/webgi-v0/viewer-0.17.0.js"> </script>

Note

This file is already optimised and minified, no extra processing is required.

Now, add the canvas and the javascript code in any script tag to initialise the viewer in a canvas and load a model.

<canvas style="width:100%; height: 300px;" id="webgi-canvas"></canvas>
<script>
const viewer = new CoreViewerApp({canvas: document.getElementById('mcanvas')})
viewer.initialize({
    caching: true,
    ground: true,
    bloom: true,
    depthTonemap: true,
    enableDrop: false,
    importPopup: false,
    debug: false
}).then(()=>{
    const model = "https://demo-assets.pixotronics.com/pixo/gltf/earringScene1.glb";
    viewer.load(model);
    console.log(viewer);
}
</script>

Manually add Plugins

or by adding plugins manually and loading a model

<canvas style="width:100%; height: 300px;" id="webgi-canvas"></canvas>
<script>
async function setupViewer(){
    const viewer = new ViewerApp({canvas: document.getElementById('mcanvas')})
    // Add some plugins
    await viewer.addPlugin(AssetManagerPlugin);
    // Add all the important plugins at once: to see the plugins list and default settings, check: https://codepen.io/repalash/pen/JjLxGmy
    await addBasePlugins(viewer);

    // Load a 3d model.
    await viewer.load("https://releases.ijewel3d.com/webgi/assets/gltf/cube_diamond_sample.gltf");

    // Load an environment map
    await viewer.setEnvironmentMap("https://releases.ijewel3d.com/webgi/assets/hdr/gem_2.hdr.png?v=1");

}
</script>

Note

The environment map must be loaded separately if not present in the glb model. Check the editor sample below which loads the environment map.

ES6 module bundles

It's recommended to use module bundles to import and add just the plugins that are required for the applications to keep the size small and get good performance.

NPM module

The SDK can be added to package.json with module bundle and type declarations like this:

{
  "devDependecies": {
    "webgi": "https://releases.ijewel3d.com/webgi/runtime/bundle-0.17.0.tgz",
    "@types/webgi": "https://releases.ijewel3d.com/webgi/runtime/bundle-types-0.17.0.tgz"
  }
}

JS/TS Import

The complete SDK can also be imported as a ES6 module from a single JS file.

<script type="module">
import {ViewerApp} from "https://releases.ijewel3d.com/webgi/runtime/bundle-0.17.0.mjs";
</script>

CodePen Links

• Sample WebGI Editor: https://codepen.io/repalash/pen/mdpyrNa
• Sample WebGI Viewer: https://codepen.io/repalash/pen/qBpEazp
• Sample JS module Import: https://codepen.io/repalash/pen/BaJwVOO
• All samples: https://codepen.io/collection/kNgvVW

Note: You can see the imported JS files in CodePen by going into pen settings -> JS tab -> external files.