webgi.dev

Realtime Photo-realistic 3D for e-commerce now free

webgi enables 3D rendering directly in the browser with advanced post-processing effects, global illumination, and easy-to-use APIs for building interactive 3D model viewers, configurators, and editors, making it ideal for e-commerce, product showcases, and creative applications.

Quickstart

Let's create a model viewer with webgi plugins. You can see the preview on the right side.

We will start with creating a canvas and a threepipe viewer to render the 3D models. webgi Plugins are added to the viewer to enhance the rendering quality and features.

Scroll down to see the plugins in action

Installation

Threepipe can be used directly in the browser or with npm for projects with a bundler.

Stackblitz

Get started with a ready to use template on stackblitz that you can edit live in your browser

javascript
typescript

HTML

To use in a browser, simply define an import map in the HTML file. Now when you import the modules, the browser will fetch them from the specified URLs.

html

<!-- Import maps polyfill, Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
<script type="importmap">
{
  "imports": {
    "threepipe": "https://unpkg.com/threepipe@latest/dist/index.mjs",
    "@threepipe/webgi-plugins": "https://unpkg.com/@threepipe/webgi-plugins@latest/dist/index.mjs"
  }
}
</script>

NPM

To use with npm, in an existing project, install the packages using npm or yarn.

bash

npm install threepipe @threepipe/webgi-plugins

Or create a new project using vite

bash

npm create threepipe@latest

and pick the vanilla > webgi template with typescript or javascript.

Add a container and a canvas to the HTML file. This canvas will render our 3D models. The container can be placed anywhere on the page and interacted with as needed. The canvas is set to fill the container.

html

<div id="webgi-canvas-container" style="width: 1024px; height: 1024px;">
    <canvas id="webgi-canvas" style="width: 100%; height: 100%;"></canvas>
</div>

Add the following javascript code to create a viewer and load a model in it.

javascript

import {ThreeViewer, timeout, LoadingScreenPlugin, GBufferPlugin, BaseGroundPlugin, SSAAPlugin, PickingPlugin, SSAOPlugin} from 'threepipe';
import {BloomPlugin, SSReflectionPlugin, TemporalAAPlugin, DepthOfFieldPlugin} from '@threepipe/webgi-plugins';

async function init() {
    const viewer = new ThreeViewer({
        canvas: document.getElementById('webgi-canvas'),
        renderScale: 'auto',
        msaa: true,
        plugins: [
            LoadingScreenPlugin, 
            GBufferPlugin, 
            BloomPlugin,
            SSAAPlugin,
            SSAOPlugin,
            SSReflectionPlugin, 
            TemporalAAPlugin,
            DepthOfFieldPlugin,
            BaseGroundPlugin,
        ],
    });
    await viewer.load('https://asset-samples.threepipe.org/demos/classic-watch.glb');
}
init()

Usage

Add the above code either in a script tag in HTML

html

<script type="module">
    // code
</script>

or in a javascript file and import it in the HTML file.

html

<script type="module" src="path/to/your/script.js"></script>

Now, let's check out all the plugins in action and how they look the look and feel of the rendering.

Basic rendering

Toggle All Plugins

The basic rendering of the model without any plugins.

Reflections and Occlusion

Toggle SSR + SSAO

SSReflection Plugin adds screen space reflections to the scene, SSAO Plugin adds ambient occlusion to the scene.

The plugin can be configured with many properties like radius, intensity, bias, etc.

typescript

import {SSReflectionPlugin} from "@threepipe/webgi-plugins"

// ... 

const ssrefl = viewer.getPlugin(SSReflectionPlugin)
ssrefl.enabled = true
ssrefl.pass.intensity = 1
ssrefl.pass.objectRadius = 0.001
ssrefl.pass.tolerance = 0.8

const ssao = viewer.getPlugin(SSAOPlugin)
ssao.enabled = true
ssao.pass.intensity = 0.5
ssao.pass.bias = 0.001
ssao.pass.falloff = 1.25
ssao.pass.numSamples = 8

Anti-Aliasing

Toggle SSAA + TAA

Let's enable the SSAA and TAA plugins to get anti-aliasing to reduce the jagged edges in the rendering.

The SSAA plugin adds super-sampling anti-aliasing when the camera is stopped, and TAA plugin adds temporal anti-aliasing when the camera is moving.

The SSAA plugin can be configured to improve the anti-aliasing at the cost of performance.

The TAA plugin can be configured with feedBack to control the rate of blurring.

typescript

import {SSAAPlugin, TemporalAAPlugin} from "threepipe"

// ... 

const ssaa = viewer.getPlugin(SSAAPlugin)
ssaa.enabled = true
ssaa.rendersPerFrame = 2
ssaa.jitterRenderCamera = true

const taa = viewer.getPlugin(TemporalAAPlugin)
taa.enabled = true
taa.pass.feedBack.set(0.88, 0.97)

HDR Bloom

Toggle Bloom

Bloom Plugin adds object independent screen space HDR bloom to the scene.

The plugin can be configured with many properties like bloomIterations, intensity, threshold, etc.

typescript

import {BloomPlugin} from "@threepipe/webgi-plugins"

// ... 

const bloom = viewer.getPlugin(BloomPlugin)
bloom.enabled = true
bloom.pass.intensity = 0.4
bloom.pass.threshold = 2
bloom.pass.bloomIterations = 4

Depth of Field

Toggle DoF

Depth of Field Plugin adds a depth of field effect to the scene.

The plugin can be configured with many properties like focusDistance, focusRange, etc.

typescript

import {DepthOfFieldPlugin} from "@threepipe/webgi-plugins"

// ...

const dof = viewer.getPlugin(DepthOfFieldPlugin)
dof.enabled = true
dof.enableEdit = true

Play around

Try out different models by picking from the buttons at the bottom, or drag and drop your own 3D models on the canvas to load it in the viewer. SketchFab has some great 3D models to try out.

Move the mouse pointer over the model to see the post-processing split.

What next?

Run webgi locally and start building awesome applications -

bash

npm create threepipe@latest

Pick the vanilla > webgi template with typescript or javascript and run the project -

bash

cd my-threepipe-project
npm install
npm run dev

You should see the same viewer as above with the watch model and all plugins configured.

Prefer simple html and javascript with CDN links?

Copy the following code into any HTML file

Sample HTML

html

<!-- Import maps polyfill, Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
<script type="importmap">
{
  "imports": {
    "threepipe": "https://unpkg.com/threepipe@latest/dist/index.mjs",
    "@threepipe/webgi-plugins": "https://unpkg.com/@threepipe/webgi-plugins@latest/dist/index.mjs"
  }
}
</script>
<div id="webgi-canvas-container" style="width: 1024px; height: 1024px;">
    <canvas id="webgi-canvas" style="width: 100%; height: 100%;"></canvas>
</div>
<style>
html, body, #webgi-canvas-container{
    width: 100vw;
    height: 100vh;
    position: relative;
}
</style>
<script type="module">
import {ThreeViewer, timeout, LoadingScreenPlugin, GBufferPlugin, BaseGroundPlugin, SSAAPlugin, PickingPlugin, SSAOPlugin} from 'threepipe';
import {BloomPlugin, SSReflectionPlugin, TemporalAAPlugin, DepthOfFieldPlugin} from '@threepipe/webgi-plugins';

async function init() {
    const viewer = new ThreeViewer({
        canvas: document.getElementById('webgi-canvas'),
        renderScale: 'auto',
        msaa: true,
        plugins: [
            LoadingScreenPlugin,
            GBufferPlugin,
            BloomPlugin,
            SSAAPlugin,
            SSAOPlugin,
            SSReflectionPlugin,
            TemporalAAPlugin,
            DepthOfFieldPlugin,
            BaseGroundPlugin,
        ],
    });
    await viewer.load('https://asset-samples.threepipe.org/demos/classic-watch.glb');
}
init()
</script>

Or play around with the codepen sample

Now, you can start building your own 3D applications with webgi plugins.

The realistic rendering and global illumination plugins are added to the Threepipe Editor. Use it to configure 3d files and make them ready for e-commerce, configurators, games, etc.

To render high-quality jewelery, diamonds, metals and geomstones, checkout iJewel3D Playground which is packed with all webgi plugins, hand crafted environment maps, materials, textures and presets for luxury e-commerce.

Configuring Plugins

To adjust the settings, drag and drop a 3d file in formats like glTF, OBJ, FBX, etc. in the editor, and configure the webgi plugins settings from the Post-Processing tab on the right side.

When exporting the scene as a glb file, the plugins will be automatically be serialized inside the file. When loading it in the viewer, the plugins will be automatically initialize and applied to the scene.

To keep the 3D Model and the plugin/viewer settings separate, you can export the settings(viewer and plugins) as a vjson file, or individual plugins as json files. These files can be loaded in the viewer using the viewer.load('/path/to/file.json') method.

The viewer settings and the plugins can also be configured in the code(like described above), at runtime using auto-generated configuration UIs or using any compatible threepipe editor.

Quickstart ​

Stackblitz ​

HTML ​

NPM ​

Basic rendering ​

Reflections and Occlusion ​

Anti-Aliasing ​

HDR Bloom ​

Depth of Field ​

Play around ​

What next? ​

Configuring Plugins ​

Quickstart

Stackblitz

HTML

NPM

Basic rendering

Reflections and Occlusion

Anti-Aliasing

HDR Bloom

Depth of Field

Play around

What next?

Configuring Plugins