threepipe/examples/bloom-plugin/script.ts

import {
    _testFinish,
    _testStart,
    IObject3D,
    LoadingScreenPlugin,
    PhysicalMaterial,
    SSAAPlugin,
    ThreeViewer,
} from 'threepipe'
import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'
// @ts-expect-error todo fix
import {BloomPlugin, TemporalAAPlugin} from '@threepipe/webgi-plugins'

async function init() {
    const viewer = new ThreeViewer({
        canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
        debug: true,
        msaa: false,
        rgbm: false,
        zPrepass: false,
        renderScale: 1,
        // rgbm: false,
        maxHDRIntensity: 8,
        dropzone: {
            addOptions: {
                disposeSceneObjects: true,
            },
        },
        plugins: [LoadingScreenPlugin, SSAAPlugin, TemporalAAPlugin],
    })

    const bloom = viewer.addPluginSync(BloomPlugin)
    const ui = viewer.addPluginSync(new TweakpaneUiPlugin(true))

    await viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr', {
        setBackground: true,
    })
    const result = await viewer.load<IObject3D>('https://threejs.org/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf', {
        autoCenter: true,
        autoScale: true,
    })
    const model = result?.getObjectByName('node_damagedHelmet_-6514')

    const ms = viewer.assetManager.materials.getAllMaterials()

    // viewer.assetManager.materials.exportMaterial(ms[0])
    console.log(ms)

    const materail = new PhysicalMaterial({
        'metadata': {
            'version': 4.6,
            'type': 'Material',
            'generator': 'Material.toJSON',
        },
        'uuid': '82d03dfe-a6b8-4d10-94bb-002435fb11af',
        'type': 'MeshStandardMaterial2',
        'name': 'black',
        'color': 13355979,
        'roughness': 0.711963684287597,
        'metalness': 0.5432713428027529,
        'sheen': 0,
        'sheenColor': 0,
        'sheenRoughness': 1,
        'emissive': 0,
        'specularIntensity': 1,
        'specularColor': 16777215,
        'clearcoat': 0,
        'clearcoatRoughness': 0,
        'iridescence': 0,
        'iridescenceIOR': 1.3,
        'iridescenceThicknessRange': [
            100,
            400,
        ],
        'anisotropy': 0,
        'anisotropyRotation': 0,
        'map': '2006c0db-c059-438d-baf4-ee6b89095f22',
        'bumpMap': '2006c0db-c059-438d-baf4-ee6b89095f22',
        'bumpScale': 0.009999999999999981,
        'roughnessMap': '2006c0db-c059-438d-baf4-ee6b89095f22',
        'envMapIntensity': 1,
        'reflectivity': 0.49999999999999983,
        'transmission': 0,
        'thickness': 0,
        'attenuationDistance': 0,
        'attenuationColor': 16777215,
        'side': 2,
        'depthFunc': 3,
        'depthTest': true,
        'depthWrite': true,
        'colorWrite': true,
        'stencilWrite': false,
        'stencilWriteMask': 255,
        'stencilFunc': 519,
        'stencilRef': 0,
        'stencilFuncMask': 255,
        'stencilFail': 7680,
        'stencilZFail': 7680,
        'stencilZPass': 7680,
        'fog': false,
        'userData': {
            'gltfExtensions': {},
            '_9c068557-570d-46f4-9c6d-f106319ed7f1_version': 66,
            '_triplanarMapping': {
                'enable': true,
                'scaleFactor': 2.6021818714306635,
                'blendFactor': 1,
                'offsetFactor': 0,
            },
            'uuid': '82d03dfe-a6b8-4d10-94bb-002435fb11af',
        },
        'textures': [
            {
                'metadata': {
                    'version': 4.6,
                    'type': 'Texture',
                    'generator': 'Texture.toJSON',
                },
                'uuid': '2006c0db-c059-438d-baf4-ee6b89095f22',
                'name': '',
                'image': '45a746eb-0369-414b-bc32-359ea8296101',
                'mapping': 300,
                'channel': 0,
                'repeat': [
                    1,
                    1,
                ],
                'offset': [
                    0,
                    0,
                ],
                'center': [
                    0,
                    0,
                ],
                'rotation': 0,
                'wrap': [
                    1000,
                    1000,
                ],
                'format': 1023,
                'internalFormat': null,
                'type': 1009,
                'colorSpace': 'srgb-linear',
                'encoding': 3000,
                'minFilter': 1008,
                'magFilter': 1006,
                'anisotropy': 1,
                'flipY': false,
                'generateMipmaps': true,
                'premultiplyAlpha': false,
                'unpackAlignment': 4,
                'userData': {
                    'rootPath': '/files/source/carbon_2_91262f99f0.jpg',
                },
            },
        ],
        'images': [],
    })

    // viewer.assetManager.materials.exportMaterial(materail)

    console.log(materail)

    // viewer.assetManager.materials.applyMaterial(materail, 'Material_MR')
    const materials = (model?.materials || []) as PhysicalMaterial[]

    ui.setupPluginUi(bloom)

    for (const material of materials) {
        ui.appendChild(material.uiConfig)
    }

    bloom.pass!.intensity = 3
    bloom.pass!.threshold = 1

    // viewer.scene.background = null
    // bloom.pass!.bloomDebug = true

}

_testStart()
init().then(_testFinish)