threepipe
Version:
A 3D viewer framework built on top of three.js in TypeScript with a focus on quality rendering, modularity and extensibility.
122 lines (121 loc) • 4.69 kB
JavaScript
import { _testFinish, BaseGroundPlugin, DirectionalLight2, GBufferPlugin, LoadingScreenPlugin, PickingPlugin, RenderTargetPreviewPlugin, SSAAPlugin, ThreeViewer, Object3DWidgetsPlugin, TransformControlsPlugin, AssetExporterPlugin, } from 'threepipe';
import { TweakpaneUiPlugin } from '@threepipe/plugin-tweakpane';
// @ts-expect-error todo fix
import { BloomPlugin, SSReflectionPlugin, TemporalAAPlugin, VelocityBufferPlugin, SSGIPlugin } from '@threepipe/webgi-plugins';
async function init() {
const viewer = new ThreeViewer({
canvas: document.getElementById('mcanvas'),
msaa: true,
rgbm: true,
zPrepass: false,
renderScale: 'auto',
maxRenderScale: 1.5,
dropzone: {
addOptions: {
disposeSceneObjects: true,
},
},
plugins: [LoadingScreenPlugin, GBufferPlugin, BloomPlugin, SSAAPlugin, TemporalAAPlugin, Object3DWidgetsPlugin, TransformControlsPlugin, AssetExporterPlugin, new VelocityBufferPlugin(undefined, false), SSReflectionPlugin],
// rgbm: false,
});
viewer.renderManager.stableNoise = true;
viewer.getPlugin(SSReflectionPlugin).enabled = false;
const ssgi = viewer.addPluginSync(new SSGIPlugin());
viewer.addPluginSync(new BaseGroundPlugin());
const ui = viewer.addPluginSync(new TweakpaneUiPlugin(true));
await viewer.setEnvironmentMap('https://hdrihaven.r2cache.com/hdr/1k/empty_warehouse_01_1k.hdr', {
setBackground: true,
});
await viewer.load('https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Sponza/glTF/Sponza.gltf', {
autoCenter: false,
autoScale: true,
autoScaleRadius: 30,
});
viewer.scene.modelRoot.traverse((o) => {
if (o.material) {
const mat = o.material;
mat.emissiveIntensity *= 10;
}
});
viewer.scene.envMapIntensity = 0.0;
ui.setupPluginUi(ssgi);
ui.setupPluginUi(SSReflectionPlugin);
ui.setupPluginUi(BaseGroundPlugin);
ui.setupPluginUi(PickingPlugin);
ui.setupPluginUi(BloomPlugin);
ui.setupPluginUi(TemporalAAPlugin);
ui.setupPluginUi(VelocityBufferPlugin);
ui.setupPluginUi(AssetExporterPlugin);
const targetPreview = await viewer.addPlugin(RenderTargetPreviewPlugin);
targetPreview.addTarget(() => ssgi.target, 'ssgi');
// const gb = viewer.getPlugin(GBufferPlugin)
// targetPreview.addTarget(() => gb?.target, 'depth')
const camera = viewer.scene.mainCamera;
camera.position.set(-1, 5, -0.7);
camera.target.set(-4, 4, -0.7);
const controls = camera.controls;
controls.minDistance = 2;
controls.maxDistance = 3;
controls.autoPushTarget = true;
controls.autoPullTarget = true;
const light = new DirectionalLight2();
viewer.scene.addObject(light);
light.position.set(0, 20, 0);
light.lookAt(-25, 0, 0);
light.intensity = 30;
light.castShadow = true;
light.shadow.camera.left = -25;
light.shadow.camera.right = 25;
light.shadow.camera.top = 25;
light.shadow.camera.bottom = -25;
light.shadow.mapSize.set(1024, 1024);
// todo add to DirectionalLight
light.uiConfig.children.push({
type: 'vec2',
label: 'Shadow Map Size',
property: [light?.shadow, 'mapSize'],
onChange: () => {
light.shadow.map?.dispose();
light.shadow.mapPass?.dispose();
light.shadow.map = null;
light.shadow.mapPass = null;
},
}, {
type: 'slider',
bounds: [-0.001, 0.001],
stepSize: 0.00002,
label: 'Shadow Bias',
property: [light?.shadow, 'bias'],
onChange: (e) => light.setDirty(e),
}, {
type: 'slider',
bounds: [-0.1, 0.1],
stepSize: 0.005,
label: 'Shadow Normal Bias',
property: [light?.shadow, 'normalBias'],
onChange: (e) => light.setDirty(e),
}, {
type: 'slider',
bounds: [0, 5],
label: 'Shadow radius',
property: [light?.shadow, 'radius'],
onChange: (e) => light.setDirty(e),
}, {
type: 'slider',
bounds: [0.1, 50],
label: 'Shadow frustum',
// property: [light.shadow, 'radius'],
getValue: () => {
return light.shadow.camera.right * 2;
},
setValue: (v) => {
light.shadow.camera.left = -v / 2;
light.shadow.camera.right = v / 2;
light.shadow.camera.top = v / 2;
light.shadow.camera.bottom = -v / 2;
},
onChange: (e) => light.setDirty(e),
});
ui.appendChild(light.uiConfig);
}
init().then(_testFinish);