|
@@ -0,0 +1,229 @@
|
|
|
|
+var __extends = this.__extends || function (d, b) {
|
|
|
|
+ for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
|
|
|
|
+ function __() { this.constructor = d; }
|
|
|
|
+ __.prototype = b.prototype;
|
|
|
|
+ d.prototype = new __();
|
|
|
|
+};
|
|
|
|
+var BABYLON;
|
|
|
|
+(function (BABYLON) {
|
|
|
|
+ var LensRenderingPipeline = (function (_super) {
|
|
|
|
+ __extends(LensRenderingPipeline, _super);
|
|
|
|
+ /**
|
|
|
|
+ * @constructor
|
|
|
|
+ * @param {string} name - The rendering pipeline name
|
|
|
|
+ * @param {object} parameters - An object containing all parameters (see below)
|
|
|
|
+ * @param {BABYLON.Scene} scene - The scene linked to this pipeline
|
|
|
|
+ * @param {number} ratio - The size of the postprocesses (0.5 means that your postprocess will have a width = canvas.width 0.5 and a height = canvas.height 0.5)
|
|
|
|
+ * @param {BABYLON.Camera[]} cameras - The array of cameras that the rendering pipeline will be attached to
|
|
|
|
+
|
|
|
|
+ Effect parameters are as follow:
|
|
|
|
+ {
|
|
|
|
+ chromatic_aberration: number; // from 0 to x (1 for realism)
|
|
|
|
+ edge_blur: number; // from 0 to x (1 for realism)
|
|
|
|
+ distortion: number; // from 0 to x (1 for realism)
|
|
|
|
+ grain_amount: number; // from 0 to 1
|
|
|
|
+ grain_texture: BABYLON.Texture; // texture to use for grain effect; if unset, use random B&W noise
|
|
|
|
+ dof_focus_depth: number; // depth-of-field: focus depth; unset to disable
|
|
|
|
+ dof_aperture: number; // depth-of-field: focus blur bias (default: 1)
|
|
|
|
+ dof_pentagon: boolean; // depth-of-field: makes a pentagon-like "bokeh" effect
|
|
|
|
+ dof_gain: boolean; // depth-of-field: depthOfField gain (default: 1)
|
|
|
|
+ dof_threshold: boolean; // depth-of-field: depthOfField threshold (default: 1)
|
|
|
|
+ blur_noise: boolean; // add a little bit of noise to the blur (default: true)
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ Note: if an effect parameter is unset, effect is disabled
|
|
|
|
+ */
|
|
|
|
+ function LensRenderingPipeline(name, parameters, scene, ratio, cameras) {
|
|
|
|
+ var _this = this;
|
|
|
|
+ if (ratio === void 0) { ratio = 1.0; }
|
|
|
|
+ _super.call(this, scene.getEngine(), name);
|
|
|
|
+ // Lens effects can be of the following:
|
|
|
|
+ // - chromatic aberration (slight shift of RGB colors)
|
|
|
|
+ // - blur on the edge of the lens
|
|
|
|
+ // - lens distortion
|
|
|
|
+ // - depth-of-field 'bokeh' effect (shapes appearing in blured areas, stronger highlights)
|
|
|
|
+ // - grain/dust-on-lens effect
|
|
|
|
+ // Two additional texture samplers are needed:
|
|
|
|
+ // - depth map (for depth-of-field)
|
|
|
|
+ // - grain texture
|
|
|
|
+ /**
|
|
|
|
+ * The chromatic aberration PostProcess id in the pipeline
|
|
|
|
+ * @type {string}
|
|
|
|
+ */
|
|
|
|
+ this.LensChromaticAberrationEffect = "LensChromaticAberrationEffect";
|
|
|
|
+ /**
|
|
|
|
+ * The depth-of-field PostProcess id in the pipeline
|
|
|
|
+ * @type {string}
|
|
|
|
+ */
|
|
|
|
+ this.LensDepthOfFieldEffect = "LensDepthOfFieldEffect";
|
|
|
|
+ this._scene = scene;
|
|
|
|
+ // Fetch texture samplers
|
|
|
|
+ this._depthTexture = scene.enableDepthRenderer().getDepthMap(); // Force depth renderer "on"
|
|
|
|
+ if (parameters.grain_texture) {
|
|
|
|
+ this._grainTexture = parameters.grain_texture;
|
|
|
|
+ }
|
|
|
|
+ else {
|
|
|
|
+ this._createGrainTexture();
|
|
|
|
+ }
|
|
|
|
+ // save parameters
|
|
|
|
+ this._edgeBlur = parameters.edge_blur ? parameters.edge_blur : 0;
|
|
|
|
+ this._grainAmount = parameters.grain_amount ? parameters.grain_amount : 0;
|
|
|
|
+ this._chromaticAberration = parameters.chromatic_aberration ? parameters.chromatic_aberration : 0;
|
|
|
|
+ this._distortion = parameters.distortion ? parameters.distortion : 0;
|
|
|
|
+ this._highlightsGain = parameters.dof_gain ? parameters.dof_gain : 1;
|
|
|
|
+ this._highlightsThreshold = parameters.dof_threshold ? parameters.dof_threshold : 1;
|
|
|
|
+ this._dofDepth = parameters.dof_focus_depth !== undefined ? parameters.dof_focus_depth : -1;
|
|
|
|
+ this._dofAperture = parameters.dof_aperture ? parameters.dof_aperture : 1;
|
|
|
|
+ this._dofPentagon = parameters.dof_pentagon !== undefined ? parameters.dof_pentagon : true;
|
|
|
|
+ this._blurNoise = parameters.blur_noise !== undefined ? parameters.blur_noise : true;
|
|
|
|
+ // Create effects
|
|
|
|
+ this._createChromaticAberrationPostProcess(ratio);
|
|
|
|
+ this._createDepthOfFieldPostProcess(ratio);
|
|
|
|
+ // Set up pipeline
|
|
|
|
+ this.addEffect(new BABYLON.PostProcessRenderEffect(scene.getEngine(), this.LensChromaticAberrationEffect, function () {
|
|
|
|
+ return _this._chromaticAberrationPostProcess;
|
|
|
|
+ }, true));
|
|
|
|
+ this.addEffect(new BABYLON.PostProcessRenderEffect(scene.getEngine(), this.LensDepthOfFieldEffect, function () {
|
|
|
|
+ return _this._depthOfFieldPostProcess;
|
|
|
|
+ }, true));
|
|
|
|
+ // Finish
|
|
|
|
+ scene.postProcessRenderPipelineManager.addPipeline(this);
|
|
|
|
+ if (cameras) {
|
|
|
|
+ scene.postProcessRenderPipelineManager.attachCamerasToRenderPipeline(name, cameras);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ // public methods
|
|
|
|
+ LensRenderingPipeline.prototype.setEdgeBlur = function (amount) {
|
|
|
|
+ this._edgeBlur = amount;
|
|
|
|
+ };
|
|
|
|
+ LensRenderingPipeline.prototype.disableEdgeBlur = function () {
|
|
|
|
+ this._edgeBlur = 0;
|
|
|
|
+ };
|
|
|
|
+ LensRenderingPipeline.prototype.setGrainAmount = function (amount) {
|
|
|
|
+ this._grainAmount = amount;
|
|
|
|
+ };
|
|
|
|
+ LensRenderingPipeline.prototype.disableGrain = function () {
|
|
|
|
+ this._grainAmount = 0;
|
|
|
|
+ };
|
|
|
|
+ LensRenderingPipeline.prototype.setChromaticAberration = function (amount) {
|
|
|
|
+ this._chromaticAberration = amount;
|
|
|
|
+ };
|
|
|
|
+ LensRenderingPipeline.prototype.disableChromaticAberration = function () {
|
|
|
|
+ this._chromaticAberration = 0;
|
|
|
|
+ };
|
|
|
|
+ LensRenderingPipeline.prototype.setEdgeDistortion = function (amount) {
|
|
|
|
+ this._distortion = amount;
|
|
|
|
+ };
|
|
|
|
+ LensRenderingPipeline.prototype.disableEdgeDistortion = function () {
|
|
|
|
+ this._distortion = 0;
|
|
|
|
+ };
|
|
|
|
+ LensRenderingPipeline.prototype.setHighlightsGain = function (amount) {
|
|
|
|
+ this._highlightsGain = amount;
|
|
|
|
+ };
|
|
|
|
+ LensRenderingPipeline.prototype.setHighlightsThreshold = function (amount) {
|
|
|
|
+ this._highlightsThreshold = amount;
|
|
|
|
+ };
|
|
|
|
+ LensRenderingPipeline.prototype.setFocusDepth = function (amount) {
|
|
|
|
+ this._dofDepth = amount;
|
|
|
|
+ };
|
|
|
|
+ LensRenderingPipeline.prototype.disableDepthOfField = function () {
|
|
|
|
+ this._dofDepth = -1;
|
|
|
|
+ };
|
|
|
|
+ LensRenderingPipeline.prototype.setAperture = function (amount) {
|
|
|
|
+ this._dofAperture = amount;
|
|
|
|
+ };
|
|
|
|
+ LensRenderingPipeline.prototype.enablePentagonBokeh = function () {
|
|
|
|
+ this._dofPentagon = true;
|
|
|
|
+ };
|
|
|
|
+ LensRenderingPipeline.prototype.disablePentagonBokeh = function () {
|
|
|
|
+ this._dofPentagon = false;
|
|
|
|
+ };
|
|
|
|
+ LensRenderingPipeline.prototype.enableNoiseBlur = function () {
|
|
|
|
+ this._blurNoise = true;
|
|
|
|
+ };
|
|
|
|
+ LensRenderingPipeline.prototype.disableNoiseBlur = function () {
|
|
|
|
+ this._blurNoise = false;
|
|
|
|
+ };
|
|
|
|
+ /**
|
|
|
|
+ * Removes the internal pipeline assets and detaches the pipeline from the scene cameras
|
|
|
|
+ */
|
|
|
|
+ LensRenderingPipeline.prototype.dispose = function (disableDepthRender) {
|
|
|
|
+ if (disableDepthRender === void 0) { disableDepthRender = false; }
|
|
|
|
+ this._scene.postProcessRenderPipelineManager.detachCamerasFromRenderPipeline(this._name, this._scene.cameras);
|
|
|
|
+ // this._originalColorPostProcess = undefined;
|
|
|
|
+ this._chromaticAberrationPostProcess = undefined;
|
|
|
|
+ this._depthOfFieldPostProcess = undefined;
|
|
|
|
+ this._grainTexture.dispose();
|
|
|
|
+ if (disableDepthRender)
|
|
|
|
+ this._scene.disableDepthRenderer();
|
|
|
|
+ };
|
|
|
|
+ // colors shifting and distortion
|
|
|
|
+ LensRenderingPipeline.prototype._createChromaticAberrationPostProcess = function (ratio) {
|
|
|
|
+ var _this = this;
|
|
|
|
+ this._chromaticAberrationPostProcess = new BABYLON.PostProcess("LensChromaticAberration", "./chromaticAberration", ["chromatic_aberration", "screen_width", "screen_height"], [], ratio, null, BABYLON.Texture.TRILINEAR_SAMPLINGMODE, this._scene.getEngine(), false);
|
|
|
|
+ this._chromaticAberrationPostProcess.onApply = function (effect) {
|
|
|
|
+ effect.setFloat('chromatic_aberration', _this._chromaticAberration);
|
|
|
|
+ effect.setFloat('screen_width', _this._scene.getEngine().getRenderWidth());
|
|
|
|
+ effect.setFloat('screen_height', _this._scene.getEngine().getRenderHeight());
|
|
|
|
+ };
|
|
|
|
+ };
|
|
|
|
+ // colors shifting and distortion
|
|
|
|
+ LensRenderingPipeline.prototype._createDepthOfFieldPostProcess = function (ratio) {
|
|
|
|
+ var _this = this;
|
|
|
|
+ this._depthOfFieldPostProcess = new BABYLON.PostProcess("LensDepthOfField", "./depthOfField", [
|
|
|
|
+ "gain",
|
|
|
|
+ "threshold",
|
|
|
|
+ "focus_depth",
|
|
|
|
+ "aperture",
|
|
|
|
+ "pentagon",
|
|
|
|
+ "maxZ",
|
|
|
|
+ "edge_blur",
|
|
|
|
+ "chromatic_aberration",
|
|
|
|
+ "distortion",
|
|
|
|
+ "blur_noise",
|
|
|
|
+ "grain_amount",
|
|
|
|
+ "screen_width",
|
|
|
|
+ "screen_height"
|
|
|
|
+ ], ["depthSampler", "grainSampler"], ratio, null, BABYLON.Texture.TRILINEAR_SAMPLINGMODE, this._scene.getEngine(), false);
|
|
|
|
+ this._depthOfFieldPostProcess.onApply = function (effect) {
|
|
|
|
+ effect.setBool('pentagon', _this._dofPentagon);
|
|
|
|
+ effect.setBool('blur_noise', _this._blurNoise);
|
|
|
|
+ effect.setFloat('maxZ', _this._scene.activeCamera.maxZ);
|
|
|
|
+ effect.setFloat('grain_amount', _this._grainAmount);
|
|
|
|
+ effect.setTexture("depthSampler", _this._depthTexture);
|
|
|
|
+ effect.setTexture("grainSampler", _this._grainTexture);
|
|
|
|
+ effect.setFloat('screen_width', _this._scene.getEngine().getRenderWidth());
|
|
|
|
+ effect.setFloat('screen_height', _this._scene.getEngine().getRenderHeight());
|
|
|
|
+ effect.setFloat('distortion', _this._distortion);
|
|
|
|
+ effect.setFloat('focus_depth', _this._dofDepth);
|
|
|
|
+ effect.setFloat('aperture', _this._dofAperture);
|
|
|
|
+ effect.setFloat('gain', _this._highlightsGain);
|
|
|
|
+ effect.setFloat('threshold', _this._highlightsThreshold);
|
|
|
|
+ effect.setFloat('edge_blur', _this._edgeBlur);
|
|
|
|
+ };
|
|
|
|
+ };
|
|
|
|
+ // creates a black and white random noise texture, 512x512
|
|
|
|
+ LensRenderingPipeline.prototype._createGrainTexture = function () {
|
|
|
|
+ var size = 512;
|
|
|
|
+ this._grainTexture = new BABYLON.DynamicTexture("LensNoiseTexture", size, this._scene, false, BABYLON.Texture.BILINEAR_SAMPLINGMODE);
|
|
|
|
+ this._grainTexture.wrapU = BABYLON.Texture.WRAP_ADDRESSMODE;
|
|
|
|
+ this._grainTexture.wrapV = BABYLON.Texture.WRAP_ADDRESSMODE;
|
|
|
|
+ var context = this._grainTexture.getContext();
|
|
|
|
+ var rand = function (min, max) {
|
|
|
|
+ return Math.random() * (max - min) + min;
|
|
|
|
+ };
|
|
|
|
+ var value;
|
|
|
|
+ for (var x = 0; x < size; x++) {
|
|
|
|
+ for (var y = 0; y < size; y++) {
|
|
|
|
+ value = Math.floor(rand(0.42, 0.58) * 255);
|
|
|
|
+ context.fillStyle = 'rgb(' + value + ', ' + value + ', ' + value + ')';
|
|
|
|
+ context.fillRect(x, y, 1, 1);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ this._grainTexture.update(false);
|
|
|
|
+ };
|
|
|
|
+ return LensRenderingPipeline;
|
|
|
|
+ })(BABYLON.PostProcessRenderPipeline);
|
|
|
|
+ BABYLON.LensRenderingPipeline = LensRenderingPipeline;
|
|
|
|
+})(BABYLON || (BABYLON = {}));
|
|
|
|
+//# sourceMappingURL=babylon.lensRenderingPipeline.js.map
|