@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.
58 lines • 2.89 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 { getParam } from "../../../engine/engine_utils.js";
import { PostProcessingEffect } from "../PostProcessingEffect.js";
import { VolumeParameter } from "../VolumeParameter.js";
import { registerCustomEffectType } from "../VolumeProfile.js";
const debug = getParam("debugpost");
/**
* [PixelationEffect](https://engine.needle.tools/docs/api/PixelationEffect) Pixelation effect simulates a pixelated look by enlarging pixels in the rendered scene.
* This effect can be used to achieve a retro or stylized visual aesthetic, reminiscent of early video games or low-resolution graphics.
* @summary Pixelation Post-Processing Effect
* @category Effects
* @group Components
*/
export class PixelationEffect extends PostProcessingEffect {
get typeName() {
return "PixelationEffect";
}
granularity = new VolumeParameter(10);
_effect = null;
_lastDpr = 0;
onCreateEffect() {
const effect = new MODULES.POSTPROCESSING.MODULE.PixelationEffect();
this._effect = effect;
const dpr = this.context.renderer.getPixelRatio();
this._lastDpr = dpr;
effect.granularity = this.granularity.value * dpr;
this.granularity.onValueChanged = v => {
const dpr = this.context.renderer.getPixelRatio();
effect.granularity = v * dpr;
if (debug)
console.debug(`[PixelationEffect] granularity changed: raw=${v}, dpr=${dpr}, effective=${effect.granularity}`);
};
return effect;
}
update() {
if (!this._effect)
return;
const dpr = this.context.renderer.getPixelRatio();
if (dpr !== this._lastDpr) {
this._lastDpr = dpr;
this._effect.granularity = this.granularity.value * dpr;
if (debug)
console.debug(`[PixelationEffect] DPR changed to ${dpr}, updating granularity: raw=${this.granularity.value}, effective=${this._effect.granularity}`);
}
}
}
__decorate([
serializable(VolumeParameter)
], PixelationEffect.prototype, "granularity", void 0);
registerCustomEffectType("PixelationEffect", PixelationEffect);
//# sourceMappingURL=Pixelation.js.map