@needle-tools/engine
Version:
Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development with great integrations into editors like Unity or Blender - and can be deployed onto any device! It is flexible, extensible and networking and XR are built-in.
75 lines • 3.77 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { MODULES } from "../../../engine/engine_modules.js";
import { serializable } from "../../../engine/engine_serialization.js";
import { PostProcessingEffect } from "../PostProcessingEffect.js";
import { VolumeParameter } from "../VolumeParameter.js";
import { registerCustomEffectType } from "../VolumeProfile.js";
/**
* [TiltShiftEffect](https://engine.needle.tools/docs/api/TiltShiftEffect) Tilt Shift effect simulates a miniature scene by applying a selective focus blur to the rendered image.
* This effect creates a shallow depth of field, making real-world scenes appear as if they are small-scale models.
* It is often used in photography and cinematography to draw attention to specific areas of the scene while blurring out the rest.
* @summary Tilt Shift Post-Processing Effect
* @category Effects
* @group Components
*/
export class TiltShiftEffect extends PostProcessingEffect {
get typeName() {
return "TiltShiftEffect";
}
offset = new VolumeParameter(0);
rotation = new VolumeParameter(0);
focusArea = new VolumeParameter(0.4);
feather = new VolumeParameter(0.3);
// Medium is 2 https://github.com/pmndrs/postprocessing/blob/main/src/enums/KernelSize.js
kernelSize = new VolumeParameter(2);
resolutionScale = new VolumeParameter(1 / window.devicePixelRatio);
init() {
this.offset.defaultValue = 0;
this.rotation.defaultValue = 0;
this.focusArea.defaultValue = 0.4;
this.feather.defaultValue = 0.3;
this.kernelSize.defaultValue = MODULES.POSTPROCESSING.MODULE.KernelSize.MEDIUM;
this.resolutionScale.defaultValue = 1 / window.devicePixelRatio;
}
onCreateEffect() {
const effect = new MODULES.POSTPROCESSING.MODULE.TiltShiftEffect({
kernelSize: MODULES.POSTPROCESSING.MODULE.KernelSize.VERY_LARGE,
offset: this.offset.value,
rotation: this.rotation.value,
focusArea: this.focusArea.value,
feather: this.feather.value,
});
this.offset.onValueChanged = v => effect.offset = v;
this.rotation.onValueChanged = v => effect.rotation = v;
this.focusArea.onValueChanged = v => effect.focusArea = v;
this.feather.onValueChanged = v => effect.feather = v;
this.kernelSize.onValueChanged = v => effect.blurPass.kernelSize = v;
this.resolutionScale.onValueChanged = v => effect.resolution.scale = v / window.devicePixelRatio;
return effect;
}
}
__decorate([
serializable(VolumeParameter)
], TiltShiftEffect.prototype, "offset", void 0);
__decorate([
serializable(VolumeParameter)
], TiltShiftEffect.prototype, "rotation", void 0);
__decorate([
serializable(VolumeParameter)
], TiltShiftEffect.prototype, "focusArea", void 0);
__decorate([
serializable(VolumeParameter)
], TiltShiftEffect.prototype, "feather", void 0);
__decorate([
serializable(VolumeParameter)
], TiltShiftEffect.prototype, "kernelSize", void 0);
__decorate([
serializable(VolumeParameter)
], TiltShiftEffect.prototype, "resolutionScale", void 0);
registerCustomEffectType("TiltShiftEffect", TiltShiftEffect);
//# sourceMappingURL=TiltShiftEffect.js.map