@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.
105 lines • 4.51 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 { Mathf } from "../../../engine/engine_math.js";
import { MODULES } from "../../../engine/engine_modules.js";
import { serializable } from "../../../engine/engine_serialization.js";
import { getParam } from "../../../engine/engine_utils.js";
import { PostProcessingEffect } from "../PostProcessingEffect.js";
import { VolumeParameter } from "../VolumeParameter.js";
import { registerCustomEffectType } from "../VolumeProfile.js";
export var DepthOfFieldMode;
(function (DepthOfFieldMode) {
DepthOfFieldMode[DepthOfFieldMode["Off"] = 0] = "Off";
DepthOfFieldMode[DepthOfFieldMode["Gaussian"] = 1] = "Gaussian";
DepthOfFieldMode[DepthOfFieldMode["Bokeh"] = 2] = "Bokeh";
})(DepthOfFieldMode || (DepthOfFieldMode = {}));
const debug = getParam("debugpost");
/**
* @category Effects
* @group Components
*/
export class DepthOfField extends PostProcessingEffect {
get typeName() {
return "DepthOfField";
}
mode;
focusDistance = new VolumeParameter(1);
focalLength = new VolumeParameter(.2);
aperture = new VolumeParameter(20);
gaussianMaxRadius = new VolumeParameter();
resolutionScale = new VolumeParameter(1 * 1 / window.devicePixelRatio);
bokehScale = new VolumeParameter();
init() {
this.focalLength.valueProcessor = v => {
const t = v / 300;
const max = 2; // this.context.mainCameraComponent?.farClipPlane ?? 10;
return Mathf.lerp(max, .01, t);
};
const maxBokehScale = 20;
this.aperture.valueProcessor = v => {
const t = 1 - v / 32;
return Mathf.lerp(1, maxBokehScale, t);
};
}
onCreateEffect() {
if (this.mode === DepthOfFieldMode.Off) {
if (debug)
console.warn("DepthOfField: Mode is set to Off");
return undefined;
}
// const factor = 1 / window.devicePixelRatio;
// if (this.resolutionScale === undefined) {
// let defaultValue = 1;
// if(isMobileDevice()) defaultValue = .6;
// this.resolutionScale = new VolumeParameter(defaultValue * factor);
// }
// console.log(this.focusDistance.overrideState, this.focusDistance.value);
// const depth = new DepthEffect({
// inverted: true,
// // blendFunction: BlendFunction.SET,
// });
const dof = new MODULES.POSTPROCESSING.MODULE.DepthOfFieldEffect(this.context.mainCamera, {
worldFocusRange: .2,
focalLength: 1,
bokehScale: 20,
resolutionScale: this.resolutionScale.value,
});
this.focusDistance.onValueChanged = v => {
dof.cocMaterial.worldFocusDistance = v;
};
this.focalLength.onValueChanged = v => dof.cocMaterial.worldFocusRange = v;
this.aperture.onValueChanged = v => dof.bokehScale = v;
if (this.resolutionScale)
this.resolutionScale.onValueChanged = v => dof.resolution.scale = v;
return [dof];
}
unapply() {
}
}
__decorate([
serializable()
], DepthOfField.prototype, "mode", void 0);
__decorate([
serializable(VolumeParameter)
], DepthOfField.prototype, "focusDistance", void 0);
__decorate([
serializable(VolumeParameter)
], DepthOfField.prototype, "focalLength", void 0);
__decorate([
serializable(VolumeParameter)
], DepthOfField.prototype, "aperture", void 0);
__decorate([
serializable(VolumeParameter)
], DepthOfField.prototype, "gaussianMaxRadius", void 0);
__decorate([
serializable(VolumeParameter)
], DepthOfField.prototype, "resolutionScale", void 0);
__decorate([
serializable(VolumeParameter)
], DepthOfField.prototype, "bokehScale", void 0);
registerCustomEffectType("DepthOfField", DepthOfField);
//# sourceMappingURL=DepthOfField.js.map