webgi.dev

Realistic rendering plugins for three.js.
Create high-quality 3D experiences on the web quickly and easily. now free

Let's create a model viewer with webgi plugins. You can see the preview on the right side. Drop any 3d model file on the canvas to load it in the viewer.

Quickstart

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.

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

<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, install the packages using npm or yarn.

bash

npm install threepipe @threepipe/webgi-plugins

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'), 
        plugins: [
            LoadingScreenPlugin, 
            GBufferPlugin, 
            BaseGroundPlugin, 
            BloomPlugin,
            SSAAPlugin,
            SSAOPlugin,
            SSReflectionPlugin, 
            TemporalAAPlugin,
            DepthOfFieldPlugin,
        ],
    });
    await viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr');
    await viewer.load('https://threejs.org/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf', {
        autoCenter: true,
        autoScale: true,
    });
}
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.

Screen Space Anti-Aliasing

Toggle SSAA

Let's enable the SSAA plugin to get some anti-aliasing when the camera stops

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

typescript

import {SSAAPlugin} from "threepipe"

// ... 

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

Temporal Anti-Aliasing

Toggle TAA

We added SSAA plugin to get some anti-aliasing when the camera stops. Temporal AA Plugin adds temporal anti-aliasing when the camera is moving.

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

typescript

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

// ... 

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

Screen Space Ambient Occlusion

Toggle SSAO

SSAO Plugin from threepipe add a light ambient occlusion effect to the scene.

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

typescript

import {SSAOPlugin} from "threepipe"

// ... 

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

Screen Space Reflections

Toggle SSR

SSReflection Plugin adds screen space reflections 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.intensity = 1
ssrefl.objectRadius = 0.001
ssrefl.tolerance = 0.8

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.intensity = 0.4
bloom.threshold = 2
bloom.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

Quickstart ​

HTML ​

NPM ​

Basic rendering ​

Screen Space Anti-Aliasing ​

Temporal Anti-Aliasing ​

Screen Space Ambient Occlusion ​

Screen Space Reflections ​

HDR Bloom ​

Depth of Field ​

Quickstart

HTML

NPM

Basic rendering

Screen Space Anti-Aliasing

Temporal Anti-Aliasing

Screen Space Ambient Occlusion

Screen Space Reflections

HDR Bloom

Depth of Field