Skip to content

Commit

Permalink
Update BloomDemo.js
Browse files Browse the repository at this point in the history
  • Loading branch information
@vanruesc
vanruesc committed Jun 16, 2022
1 parent 683acca commit 97e610c
Showing 1 changed file with 44 additions and 153 deletions.
197 changes: 44 additions & 153 deletions demo/src/demos/BloomDemo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,38 +76,20 @@ export class BloomDemo extends PostProcessingDemo {
/**
* A bloom effect.
*
* @type {BloomEffect}
* @private
*/

this.effectA = null;

/**
* A selective bloom effect.
*
* @type {SelectiveBloomEffect}
* @private
*/

this.effectB = null;
this.effect = null;

/**
* A pass that contains the normal bloom effect.
* A pass.
*
* @type {Pass}
* @private
*/

this.passA = null;

/**
* A pass that contains the selective bloom effect.
*
* @type {Pass}
* @private
*/

this.passB = null;
this.pass = null;

/**
* An object.
Expand Down Expand Up @@ -135,20 +117,7 @@ export class BloomDemo extends PostProcessingDemo {

raycaster.setFromCamera(ndc, this.camera);
const intersects = raycaster.intersectObjects(this.object.children, true);

this.selectedObject = null;

if(intersects.length > 0) {

const object = intersects[0].object;

if(object !== undefined) {

this.selectedObject = object;

}

}
this.selectedObject = (intersects.length > 0) ? intersects[0].object : null;

}

Expand All @@ -160,20 +129,12 @@ export class BloomDemo extends PostProcessingDemo {

handleSelection() {

const selection = this.effectB.selection;
const selection = this.effect.selection;
const selectedObject = this.selectedObject;

if(selectedObject !== null) {

if(selection.has(selectedObject)) {

selection.delete(selectedObject);

} else {

selection.add(selectedObject);

}
selection.toggle(selectedObject);

}

Expand Down Expand Up @@ -303,50 +264,22 @@ export class BloomDemo extends PostProcessingDemo {

smaaEffect.edgeDetectionMaterial.setEdgeDetectionThreshold(0.01);

const bloomOptions = {
blendFunction: BlendFunction.SCREEN,
kernelSize: KernelSize.MEDIUM,
luminanceThreshold: 0.4,
luminanceSmoothing: 0.1,
height: 480
};

/* If you don't need to limit bloom to a subset of objects, consider using
the basic BloomEffect for better performance. */
const bloomEffect = new BloomEffect(bloomOptions);

const selectiveBloomEffect = new SelectiveBloomEffect(
scene,
camera,
bloomOptions
);

selectiveBloomEffect.inverted = true;

this.effectA = bloomEffect;
this.effectB = selectiveBloomEffect;

const effectPassA = new EffectPass(
camera,
smaaEffect,
bloomEffect
);

const effectPassB = new EffectPass(
camera,
smaaEffect,
selectiveBloomEffect
);
const effect = new SelectiveBloomEffect(scene, camera, {
blendFunction: BlendFunction.ADD,
mipmapBlur: true,
luminanceThreshold: 0.7,
luminanceSmoothing: 0.3,
intensity: 3.0
});

this.passA = effectPassA;
this.passB = effectPassB;
effect.inverted = true;
const effectPass = new EffectPass(camera, smaaEffect, effect);
composer.addPass(effectPass);

effectPassA.renderToScreen = true;
effectPassB.renderToScreen = true;
effectPassB.setEnabled(false);
this.effect = effect;
this.pass = effectPass;

composer.addPass(effectPassA);
composer.addPass(effectPassB);
renderer.domElement.addEventListener("pointerdown", this);

}

Expand Down Expand Up @@ -376,134 +309,92 @@ export class BloomDemo extends PostProcessingDemo {

const renderer = this.composer.getRenderer();

const passA = this.passA;
const passB = this.passB;
const effectA = this.effectA;
const effectB = this.effectB;
const blendModeA = effectA.blendMode;
const blendModeB = effectB.blendMode;
const pass = this.pass;
const effect = this.effect;
const blendMode = effect.blendMode;

const params = {
"resolution": effectA.resolution.height,
"kernel size": effectA.blurPass.getKernelSize(),
"blur scale": effectA.blurPass.getScale(),
"intensity": effectA.getIntensity(),
"intensity": effect.intensity,
"radius": effect.mipmapBlurPass.radius,
"luminance": {
"filter": effectA.luminancePass.isEnabled(),
"threshold": effectA.luminanceMaterial.threshold,
"smoothing": effectA.luminanceMaterial.smoothing
"filter": effect.luminancePass.enabled,
"threshold": effect.luminanceMaterial.threshold,
"smoothing": effect.luminanceMaterial.smoothing
},
"selection": {
"enabled": passB.isEnabled(),
"inverted": effectB.inverted,
"ignore bg": effectB.ignoreBackground
"inverted": effect.inverted,
"ignore bg": effect.ignoreBackground
},
"opacity": blendModeA.opacity.value,
"blend mode": blendModeA.blendFunction
"opacity": blendMode.opacity.value,
"blend mode": blendMode.blendFunction
};

menu.add(params, "resolution", [240, 360, 480, 720, 1080]).onChange((value) => {
menu.add(params, "intensity", 0.0, 10.0, 0.01).onChange((value) => {

effectA.resolution.height = effectB.resolution.height = Number(value);
effect.intensity = Number(value);

});

menu.add(params, "kernel size", KernelSize).onChange((value) => {
menu.add(params, "radius", 0.0, 1.0, 0.001).onChange((value) => {

effectA.blurPass.setKernelSize(Number(value));
effectB.blurPass.setKernelSize(Number(value));

});

menu.add(params, "blur scale", 0.0, 1.0, 0.01).onChange((value) => {

effectA.blurPass.setScale(Number(value));
effectB.blurPass.setScale(Number(value));

});

menu.add(params, "intensity", 0.0, 3.0, 0.01).onChange((value) => {

effectA.setIntensity(Number(value));
effectB.setIntensity(Number(value));
effect.mipmapBlurPass.radius = Number(value);

});

let folder = menu.addFolder("Luminance");

folder.add(params.luminance, "filter").onChange((value) => {

effectA.luminancePass.setEnabled(value);
effectB.luminancePass.setEnabled(value);
effect.luminancePass.enabled = value;

});

folder.add(params.luminance, "threshold", 0.0, 1.0, 0.001)
.onChange((value) => {

effectA.luminanceMaterial.threshold = Number(value);
effectB.luminanceMaterial.threshold = Number(value);
effect.luminanceMaterial.threshold = Number(value);

});

folder.add(params.luminance, "smoothing", 0.0, 1.0, 0.001)
.onChange((value) => {

effectA.luminanceMaterial.smoothing = Number(value);
effectB.luminanceMaterial.smoothing = Number(value);
effect.luminanceMaterial.smoothing = Number(value);

});

folder.open();
folder = menu.addFolder("Selection");

folder.add(params.selection, "enabled").onChange((value) => {

passB.setEnabled(value);
passA.setEnabled(!passB.isEnabled());

if(passB.isEnabled()) {

renderer.domElement.addEventListener("pointerdown", this);

} else {

renderer.domElement.removeEventListener("pointerdown", this);

}

});

folder.add(params.selection, "inverted").onChange((value) => {

effectB.inverted = value;
effect.inverted = value;

});

folder.add(params.selection, "ignore bg").onChange((value) => {

effectB.ignoreBackground = value;
effect.ignoreBackground = value;

});

folder.open();

menu.add(params, "opacity", 0.0, 1.0, 0.01).onChange((value) => {

blendModeA.opacity.value = blendModeB.opacity.value = value;
blendMode.opacity.value = value;

});

menu.add(params, "blend mode", BlendFunction).onChange((value) => {

blendModeA.setBlendFunction(Number(value));
blendModeB.setBlendFunction(Number(value));
blendMode.setBlendFunction(Number(value));

});

menu.add(passA, "dithering").onChange((value) => {
menu.add(pass, "dithering").onChange((value) => {

passB.dithering = value;
pass.dithering = value;

});

Expand Down

0 comments on commit 97e610c

Please sign in to comment.