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

The following code creates a threepipe viewer for a canvas in the HTML.

WebGi Plugins are added to the viewer to enhance the rendering quality and features.

Scroll down to see the plugins in action

Installation

NPM

bash

npm install threepipe @threepipe/webgi-plugins

HTML

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>

html

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

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()

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 ​

NPM ​

HTML ​

Basic rendering ​

Screen Space Anti-Aliasing ​

Temporal Anti-Aliasing ​

Screen Space Ambient Occlusion ​

Screen Space Reflections ​

HDR Bloom ​

Depth of Field ​

Quickstart

NPM

HTML

Basic rendering

Screen Space Anti-Aliasing

Temporal Anti-Aliasing

Screen Space Ambient Occlusion

Screen Space Reflections

HDR Bloom

Depth of Field