@polygonjs/polygonjs/dist/src/engine/nodes/post/Outline.js

node-based WebGL 3D engine https://polygonjs.com

"use strict";
import { SelectionController } from "./utils/SelectionController";
import { BLEND_FUNCTION_MENU_OPTIONS } from "./../../../core/post/BlendFunction";
import { TypedPostNode, PostParamOptions } from "./_Base";
import { NodeParamsConfig, ParamConfig } from "../utils/params/ParamsConfig";
import { BlendFunction, EffectPass, KernelSize, OutlineEffect } from "postprocessing";
import { KERNEL_SIZE_MENU_OPTIONS } from "../../../core/post/KernelSize";
class OutlinePostParamsConfig extends NodeParamsConfig {
  constructor() {
    super(...arguments);
    /** @param object mask of the objects that will have an outline */
    this.objectsMask = ParamConfig.STRING("*outlined*", {
      ...PostParamOptions,
      objectMask: true
    });
    /** @param updates the cached objects found by objectMask  */
    this.refreshObjects = ParamConfig.BUTTON(null, {
      ...PostParamOptions
    });
    /** @param edgeStrenth */
    this.edgeStrength = ParamConfig.FLOAT(3, {
      range: [0, 10],
      rangeLocked: [true, false],
      ...PostParamOptions
    });
    /** @param blur */
    this.blur = ParamConfig.BOOLEAN(0, {
      ...PostParamOptions
    });
    this.kernelSize = ParamConfig.INTEGER(KernelSize.VERY_SMALL, {
      ...PostParamOptions,
      ...KERNEL_SIZE_MENU_OPTIONS,
      visibleIf: { blur: 1 }
    });
    /** @param defines if the edges pulsate */
    this.pulseSpeed = ParamConfig.FLOAT(0, {
      range: [0, 5],
      rangeLocked: [true, false],
      ...PostParamOptions
    });
    /** @param visibleEdgeColor */
    this.visibleEdgeColor = ParamConfig.COLOR([1, 1, 1], {
      ...PostParamOptions
    });
    /** @param shows outline for hidden parts of objects */
    this.xRay = ParamConfig.BOOLEAN(1, {
      ...PostParamOptions
    });
    /** @param hiddenEdgeColor */
    this.hiddenEdgeColor = ParamConfig.COLOR([0.2, 0.1, 0.4], {
      ...PostParamOptions,
      visibleIf: { xRay: 1 }
    });
    /** @param opacity */
    this.opacity = ParamConfig.FLOAT(1, {
      range: [0, 1],
      rangeLocked: [true, false],
      ...PostParamOptions
    });
    /** @param render mode */
    this.blendFunction = ParamConfig.INTEGER(BlendFunction.SCREEN, {
      ...PostParamOptions,
      ...BLEND_FUNCTION_MENU_OPTIONS
    });
  }
}
const ParamsConfig = new OutlinePostParamsConfig();
export class OutlinePostNode extends TypedPostNode {
  constructor() {
    super(...arguments);
    this.paramsConfig = ParamsConfig;
    this._selectionController = new SelectionController();
  }
  static type() {
    return "outline";
  }
  // private _rendererSize = new Vector2();
  createPass(context) {
    const effect = new OutlineEffect(context.scene, context.camera, {
      blendFunction: BlendFunction.SCREEN,
      patternScale: 40,
      visibleEdgeColor: 16777215,
      hiddenEdgeColor: 2230538,
      height: 480,
      blur: false,
      xRay: true
    });
    effect.selection.add(context.scene.children[0]);
    const pass = new EffectPass(context.camera, effect);
    this.updatePass(pass);
    return pass;
  }
  updatePass(pass) {
    const effect = pass.effects[0];
    effect.blendMode.opacity.value = this.pv.opacity;
    effect.blendMode.blendFunction = this.pv.blendFunction;
    effect.edgeStrength = this.pv.edgeStrength;
    effect.blur = this.pv.blur;
    effect.kernelSize = this.pv.kernelSize;
    effect.xRay = this.pv.xRay;
    effect.pulseSpeed = this.pv.pulseSpeed;
    effect.visibleEdgeColor = this.pv.visibleEdgeColor;
    effect.hiddenEdgeColor = this.pv.hiddenEdgeColor;
    this._setSelectedObjects(effect);
  }
  _setSelectedObjects(effect) {
    this._selectionController.updateSelection(this.scene(), this.pv.objectsMask, effect.selection);
  }
}