@polygonjs/polygonjs
Version:
node-based WebGL 3D engine https://polygonjs.com
132 lines (131 loc) • 4.54 kB
JavaScript
;
import { ParamConfig } from "../../../utils/params/ParamsConfig";
import { NodeContext } from "../../../../poly/NodeContext";
import { Color } from "three";
import { TypeAssert } from "../../../../poly/Assert";
export var BackgroundMode = /* @__PURE__ */ ((BackgroundMode2) => {
BackgroundMode2["NONE"] = "none";
BackgroundMode2["COLOR"] = "color";
BackgroundMode2["TEXTURE"] = "texture";
return BackgroundMode2;
})(BackgroundMode || {});
export const BACKGROUND_MODES = ["none" /* NONE */, "color" /* COLOR */, "texture" /* TEXTURE */];
const CallbackOptions = {
cook: false,
callback: (node) => {
SceneBackgroundController.update(node);
}
};
export function SceneBackgroundParamConfig(Base) {
return class Mixin extends Base {
constructor() {
super(...arguments);
// background
/** @param set background mode (none, color or texture). Note that in order to have a transparent background, you also need to set the renderer's alpha to true. In order to do so, you may need to create a rop/WebGLRenderer node, set it alpha parameter, and assign the node to your camera. */
this.backgroundMode = ParamConfig.INTEGER(BACKGROUND_MODES.indexOf("color" /* COLOR */), {
menu: {
entries: BACKGROUND_MODES.map((mode, i) => {
return { name: mode, value: i };
})
},
...CallbackOptions,
separatorBefore: true
});
/** @param background color */
this.bgColor = ParamConfig.COLOR([0.01, 0.01, 0.01], {
visibleIf: { backgroundMode: BACKGROUND_MODES.indexOf("color" /* COLOR */) },
...CallbackOptions
// conversion: ColorConversion.SRGB_TO_LINEAR,
});
/** @param background texture */
this.bgTexture = ParamConfig.NODE_PATH("", {
visibleIf: { backgroundMode: BACKGROUND_MODES.indexOf("texture" /* TEXTURE */) },
nodeSelection: {
context: NodeContext.COP
},
// dependentOnFoundNode: false,
...CallbackOptions
});
/** @param background blur */
this.bgBlur = ParamConfig.FLOAT(0, {
visibleIf: { backgroundMode: BACKGROUND_MODES.indexOf("texture" /* TEXTURE */) },
range: [0, 1],
rangeLocked: [true, false],
...CallbackOptions
});
/** @param background intensity */
this.bgIntensity = ParamConfig.FLOAT(1, {
visibleIf: { backgroundMode: BACKGROUND_MODES.indexOf("texture" /* TEXTURE */) },
range: [0, 2],
rangeLocked: [true, false],
...CallbackOptions
});
}
};
}
const CALLBACK_NAME = "SceneBackgroundController";
export class SceneBackgroundController {
constructor(node) {
this.node = node;
this._updateBound = this.update.bind(this);
}
addHooks() {
const p = this.node.p;
const params = [p.backgroundMode, p.bgColor, p.bgTexture];
for (const param of params) {
param.addPostDirtyHook(CALLBACK_NAME, this._updateBound);
}
}
setMode(mode) {
this.node.p.backgroundMode.set(BACKGROUND_MODES.indexOf(mode));
}
backgroundMode() {
return BACKGROUND_MODES[this.node.pv.backgroundMode];
}
async update() {
const backgroundMode = this.backgroundMode();
switch (backgroundMode) {
case "none" /* NONE */: {
return this._setBackgroundNone();
}
case "color" /* COLOR */: {
return await this._setBackgroundColor();
}
case "texture" /* TEXTURE */: {
return await this._setBackgroundTexture();
}
}
TypeAssert.unreachable(backgroundMode);
}
_setBackgroundNone() {
const scene = this.node.object;
scene.background = null;
}
async _setBackgroundColor() {
const scene = this.node.object;
const pv = this.node.pv;
await this.node.p.bgColor.compute();
if (scene.background && scene.background instanceof Color) {
scene.background.copy(pv.bgColor);
} else {
scene.background = pv.bgColor;
}
}
async _setBackgroundTexture() {
const scene = this.node.object;
const pv = this.node.pv;
const node = pv.bgTexture.nodeWithContext(NodeContext.COP);
if (node) {
const container = await node.compute();
scene.background = container.texture();
} else {
this.node.states.error.set("bgTexture node not found");
scene.background = null;
}
scene.backgroundBlurriness = pv.bgBlur;
scene.backgroundIntensity = pv.bgIntensity;
}
static update(node) {
node.sceneBackgroundController.update();
}
}