molstar
Version:
A comprehensive macromolecular library.
363 lines • 26.9 kB
JavaScript
"use strict";
/**
* Copyright (c) 2019-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
*
* @author Alexander Rose <alexander.rose@weirdbyte.de>
* @author Áron Samuel Kovács <aron.kovacs@mail.muni.cz>
*/
Object.defineProperty(exports, "__esModule", { value: true });
exports.AntialiasingPass = exports.PostprocessingPass = exports.PostprocessingParams = void 0;
var tslib_1 = require("tslib");
var util_1 = require("../../mol-gl/compute/util");
var schema_1 = require("../../mol-gl/renderable/schema");
var shader_code_1 = require("../../mol-gl/shader-code");
var mol_util_1 = require("../../mol-util");
var render_item_1 = require("../../mol-gl/webgl/render-item");
var renderable_1 = require("../../mol-gl/renderable");
var linear_algebra_1 = require("../../mol-math/linear-algebra");
var param_definition_1 = require("../../mol-util/param-definition");
var quad_vert_1 = require("../../mol-gl/shader/quad.vert");
var outlines_frag_1 = require("../../mol-gl/shader/outlines.frag");
var ssao_frag_1 = require("../../mol-gl/shader/ssao.frag");
var ssao_blur_frag_1 = require("../../mol-gl/shader/ssao-blur.frag");
var postprocessing_frag_1 = require("../../mol-gl/shader/postprocessing.frag");
var color_1 = require("../../mol-util/color");
var fxaa_1 = require("./fxaa");
var smaa_1 = require("./smaa");
var OutlinesSchema = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, util_1.QuadSchema), { tDepth: (0, schema_1.TextureSpec)('texture', 'rgba', 'ubyte', 'nearest'), uTexSize: (0, schema_1.UniformSpec)('v2'), dOrthographic: (0, schema_1.DefineSpec)('number'), uNear: (0, schema_1.UniformSpec)('f'), uFar: (0, schema_1.UniformSpec)('f'), uMaxPossibleViewZDiff: (0, schema_1.UniformSpec)('f') });
function getOutlinesRenderable(ctx, depthTexture) {
var values = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, util_1.QuadValues), { tDepth: mol_util_1.ValueCell.create(depthTexture), uTexSize: mol_util_1.ValueCell.create(linear_algebra_1.Vec2.create(depthTexture.getWidth(), depthTexture.getHeight())), dOrthographic: mol_util_1.ValueCell.create(0), uNear: mol_util_1.ValueCell.create(1), uFar: mol_util_1.ValueCell.create(10000), uMaxPossibleViewZDiff: mol_util_1.ValueCell.create(0.5) });
var schema = (0, tslib_1.__assign)({}, OutlinesSchema);
var shaderCode = (0, shader_code_1.ShaderCode)('outlines', quad_vert_1.quad_vert, outlines_frag_1.outlines_frag);
var renderItem = (0, render_item_1.createComputeRenderItem)(ctx, 'triangles', shaderCode, schema, values);
return (0, renderable_1.createComputeRenderable)(renderItem, values);
}
var SsaoSchema = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, util_1.QuadSchema), { tDepth: (0, schema_1.TextureSpec)('texture', 'rgba', 'ubyte', 'nearest'), uSamples: (0, schema_1.UniformSpec)('v3[]'), dNSamples: (0, schema_1.DefineSpec)('number'), uProjection: (0, schema_1.UniformSpec)('m4'), uInvProjection: (0, schema_1.UniformSpec)('m4'), uBounds: (0, schema_1.UniformSpec)('v4'), uTexSize: (0, schema_1.UniformSpec)('v2'), uRadius: (0, schema_1.UniformSpec)('f'), uBias: (0, schema_1.UniformSpec)('f') });
function getSsaoRenderable(ctx, depthTexture) {
var values = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, util_1.QuadValues), { tDepth: mol_util_1.ValueCell.create(depthTexture), uSamples: mol_util_1.ValueCell.create([0.0, 0.0, 1.0]), dNSamples: mol_util_1.ValueCell.create(1), uProjection: mol_util_1.ValueCell.create(linear_algebra_1.Mat4.identity()), uInvProjection: mol_util_1.ValueCell.create(linear_algebra_1.Mat4.identity()), uBounds: mol_util_1.ValueCell.create((0, linear_algebra_1.Vec4)()), uTexSize: mol_util_1.ValueCell.create(linear_algebra_1.Vec2.create(ctx.gl.drawingBufferWidth, ctx.gl.drawingBufferHeight)), uRadius: mol_util_1.ValueCell.create(8.0), uBias: mol_util_1.ValueCell.create(0.025) });
var schema = (0, tslib_1.__assign)({}, SsaoSchema);
var shaderCode = (0, shader_code_1.ShaderCode)('ssao', quad_vert_1.quad_vert, ssao_frag_1.ssao_frag);
var renderItem = (0, render_item_1.createComputeRenderItem)(ctx, 'triangles', shaderCode, schema, values);
return (0, renderable_1.createComputeRenderable)(renderItem, values);
}
var SsaoBlurSchema = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, util_1.QuadSchema), { tSsaoDepth: (0, schema_1.TextureSpec)('texture', 'rgba', 'ubyte', 'nearest'), uTexSize: (0, schema_1.UniformSpec)('v2'), uKernel: (0, schema_1.UniformSpec)('f[]'), dOcclusionKernelSize: (0, schema_1.DefineSpec)('number'), uBlurDirectionX: (0, schema_1.UniformSpec)('f'), uBlurDirectionY: (0, schema_1.UniformSpec)('f'), uMaxPossibleViewZDiff: (0, schema_1.UniformSpec)('f'), uNear: (0, schema_1.UniformSpec)('f'), uFar: (0, schema_1.UniformSpec)('f'), uBounds: (0, schema_1.UniformSpec)('v4'), dOrthographic: (0, schema_1.DefineSpec)('number') });
function getSsaoBlurRenderable(ctx, ssaoDepthTexture, direction) {
var values = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, util_1.QuadValues), { tSsaoDepth: mol_util_1.ValueCell.create(ssaoDepthTexture), uTexSize: mol_util_1.ValueCell.create(linear_algebra_1.Vec2.create(ssaoDepthTexture.getWidth(), ssaoDepthTexture.getHeight())), uKernel: mol_util_1.ValueCell.create([0.0]), dOcclusionKernelSize: mol_util_1.ValueCell.create(1), uBlurDirectionX: mol_util_1.ValueCell.create(direction === 'horizontal' ? 1 : 0), uBlurDirectionY: mol_util_1.ValueCell.create(direction === 'vertical' ? 1 : 0), uMaxPossibleViewZDiff: mol_util_1.ValueCell.create(0.5), uNear: mol_util_1.ValueCell.create(0.0), uFar: mol_util_1.ValueCell.create(10000.0), uBounds: mol_util_1.ValueCell.create((0, linear_algebra_1.Vec4)()), dOrthographic: mol_util_1.ValueCell.create(0) });
var schema = (0, tslib_1.__assign)({}, SsaoBlurSchema);
var shaderCode = (0, shader_code_1.ShaderCode)('ssao_blur', quad_vert_1.quad_vert, ssao_blur_frag_1.ssaoBlur_frag);
var renderItem = (0, render_item_1.createComputeRenderItem)(ctx, 'triangles', shaderCode, schema, values);
return (0, renderable_1.createComputeRenderable)(renderItem, values);
}
function getBlurKernel(kernelSize) {
var sigma = kernelSize / 3.0;
var halfKernelSize = Math.floor((kernelSize + 1) / 2);
var kernel = [];
for (var x = 0; x < halfKernelSize; x++) {
kernel.push((1.0 / ((Math.sqrt(2 * Math.PI)) * sigma)) * Math.exp(-x * x / (2 * sigma * sigma)));
}
return kernel;
}
function getSamples(vectorSamples, nSamples) {
var samples = [];
for (var i = 0; i < nSamples; i++) {
var scale = (i * i + 2.0 * i + 1) / (nSamples * nSamples);
scale = 0.1 + scale * (1.0 - 0.1);
samples.push(vectorSamples[i][0] * scale);
samples.push(vectorSamples[i][1] * scale);
samples.push(vectorSamples[i][2] * scale);
}
return samples;
}
var PostprocessingSchema = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, util_1.QuadSchema), { tSsaoDepth: (0, schema_1.TextureSpec)('texture', 'rgba', 'ubyte', 'nearest'), tColor: (0, schema_1.TextureSpec)('texture', 'rgba', 'ubyte', 'nearest'), tDepth: (0, schema_1.TextureSpec)('texture', 'rgba', 'ubyte', 'nearest'), tOutlines: (0, schema_1.TextureSpec)('texture', 'rgba', 'ubyte', 'nearest'), uTexSize: (0, schema_1.UniformSpec)('v2'), dOrthographic: (0, schema_1.DefineSpec)('number'), uNear: (0, schema_1.UniformSpec)('f'), uFar: (0, schema_1.UniformSpec)('f'), uFogNear: (0, schema_1.UniformSpec)('f'), uFogFar: (0, schema_1.UniformSpec)('f'), uFogColor: (0, schema_1.UniformSpec)('v3'), uTransparentBackground: (0, schema_1.UniformSpec)('b'), uMaxPossibleViewZDiff: (0, schema_1.UniformSpec)('f'), dOcclusionEnable: (0, schema_1.DefineSpec)('boolean'), dOutlineEnable: (0, schema_1.DefineSpec)('boolean'), dOutlineScale: (0, schema_1.DefineSpec)('number'), uOutlineThreshold: (0, schema_1.UniformSpec)('f') });
function getPostprocessingRenderable(ctx, colorTexture, depthTexture, outlinesTexture, ssaoDepthTexture) {
var values = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, util_1.QuadValues), { tSsaoDepth: mol_util_1.ValueCell.create(ssaoDepthTexture), tColor: mol_util_1.ValueCell.create(colorTexture), tDepth: mol_util_1.ValueCell.create(depthTexture), tOutlines: mol_util_1.ValueCell.create(outlinesTexture), uTexSize: mol_util_1.ValueCell.create(linear_algebra_1.Vec2.create(colorTexture.getWidth(), colorTexture.getHeight())), dOrthographic: mol_util_1.ValueCell.create(0), uNear: mol_util_1.ValueCell.create(1), uFar: mol_util_1.ValueCell.create(10000), uFogNear: mol_util_1.ValueCell.create(10000), uFogFar: mol_util_1.ValueCell.create(10000), uFogColor: mol_util_1.ValueCell.create(linear_algebra_1.Vec3.create(1, 1, 1)), uTransparentBackground: mol_util_1.ValueCell.create(false), uMaxPossibleViewZDiff: mol_util_1.ValueCell.create(0.5), dOcclusionEnable: mol_util_1.ValueCell.create(false), dOutlineEnable: mol_util_1.ValueCell.create(false), dOutlineScale: mol_util_1.ValueCell.create(1), uOutlineThreshold: mol_util_1.ValueCell.create(0.33) });
var schema = (0, tslib_1.__assign)({}, PostprocessingSchema);
var shaderCode = (0, shader_code_1.ShaderCode)('postprocessing', quad_vert_1.quad_vert, postprocessing_frag_1.postprocessing_frag);
var renderItem = (0, render_item_1.createComputeRenderItem)(ctx, 'triangles', shaderCode, schema, values);
return (0, renderable_1.createComputeRenderable)(renderItem, values);
}
exports.PostprocessingParams = {
occlusion: param_definition_1.ParamDefinition.MappedStatic('on', {
on: param_definition_1.ParamDefinition.Group({
samples: param_definition_1.ParamDefinition.Numeric(32, { min: 1, max: 256, step: 1 }),
radius: param_definition_1.ParamDefinition.Numeric(5, { min: 0, max: 10, step: 0.1 }, { description: 'Final radius is 2^x.' }),
bias: param_definition_1.ParamDefinition.Numeric(0.8, { min: 0, max: 3, step: 0.1 }),
blurKernelSize: param_definition_1.ParamDefinition.Numeric(15, { min: 1, max: 25, step: 2 }),
}),
off: param_definition_1.ParamDefinition.Group({})
}, { cycle: true, description: 'Darken occluded crevices with the ambient occlusion effect' }),
outline: param_definition_1.ParamDefinition.MappedStatic('off', {
on: param_definition_1.ParamDefinition.Group({
scale: param_definition_1.ParamDefinition.Numeric(1, { min: 1, max: 5, step: 1 }),
threshold: param_definition_1.ParamDefinition.Numeric(0.33, { min: 0.01, max: 1, step: 0.01 }),
}),
off: param_definition_1.ParamDefinition.Group({})
}, { cycle: true, description: 'Draw outline around 3D objects' }),
antialiasing: param_definition_1.ParamDefinition.MappedStatic('smaa', {
fxaa: param_definition_1.ParamDefinition.Group(fxaa_1.FxaaParams),
smaa: param_definition_1.ParamDefinition.Group(smaa_1.SmaaParams),
off: param_definition_1.ParamDefinition.Group({})
}, { options: [['fxaa', 'FXAA'], ['smaa', 'SMAA'], ['off', 'Off']], description: 'Smooth pixel edges' }),
};
var PostprocessingPass = /** @class */ (function () {
function PostprocessingPass(webgl, drawPass) {
this.webgl = webgl;
this.ssaoScale = this.calcSsaoScale();
var colorTarget = drawPass.colorTarget, depthTexture = drawPass.depthTexture;
var width = colorTarget.getWidth();
var height = colorTarget.getHeight();
this.nSamples = 1;
this.blurKernelSize = 1;
// needs to be linear for anti-aliasing pass
this.target = webgl.createRenderTarget(width, height, false, 'uint8', 'linear');
this.outlinesTarget = webgl.createRenderTarget(width, height, false);
this.outlinesRenderable = getOutlinesRenderable(webgl, depthTexture);
this.randomHemisphereVector = [];
for (var i = 0; i < 256; i++) {
var v = (0, linear_algebra_1.Vec3)();
v[0] = Math.random() * 2.0 - 1.0;
v[1] = Math.random() * 2.0 - 1.0;
v[2] = Math.random();
linear_algebra_1.Vec3.normalize(v, v);
linear_algebra_1.Vec3.scale(v, v, Math.random());
this.randomHemisphereVector.push(v);
}
this.ssaoFramebuffer = webgl.resources.framebuffer();
this.ssaoBlurFirstPassFramebuffer = webgl.resources.framebuffer();
this.ssaoBlurSecondPassFramebuffer = webgl.resources.framebuffer();
var sw = Math.floor(width * this.ssaoScale);
var sh = Math.floor(height * this.ssaoScale);
this.ssaoDepthTexture = webgl.resources.texture('image-uint8', 'rgba', 'ubyte', 'nearest');
this.ssaoDepthTexture.define(sw, sh);
this.ssaoDepthTexture.attachFramebuffer(this.ssaoFramebuffer, 'color0');
this.ssaoDepthBlurProxyTexture = webgl.resources.texture('image-uint8', 'rgba', 'ubyte', 'nearest');
this.ssaoDepthBlurProxyTexture.define(sw, sh);
this.ssaoDepthBlurProxyTexture.attachFramebuffer(this.ssaoBlurFirstPassFramebuffer, 'color0');
this.ssaoDepthTexture.attachFramebuffer(this.ssaoBlurSecondPassFramebuffer, 'color0');
this.ssaoRenderable = getSsaoRenderable(webgl, depthTexture);
this.ssaoBlurFirstPassRenderable = getSsaoBlurRenderable(webgl, this.ssaoDepthTexture, 'horizontal');
this.ssaoBlurSecondPassRenderable = getSsaoBlurRenderable(webgl, this.ssaoDepthBlurProxyTexture, 'vertical');
this.renderable = getPostprocessingRenderable(webgl, colorTarget.texture, depthTexture, this.outlinesTarget.texture, this.ssaoDepthTexture);
}
PostprocessingPass.isEnabled = function (props) {
return props.occlusion.name === 'on' || props.outline.name === 'on';
};
PostprocessingPass.prototype.calcSsaoScale = function () {
// downscale ssao for high pixel-ratios
return Math.min(1, 1 / this.webgl.pixelRatio);
};
PostprocessingPass.prototype.setSize = function (width, height) {
var _a = this.renderable.values.uTexSize.ref.value, w = _a[0], h = _a[1];
var ssaoScale = this.calcSsaoScale();
if (width !== w || height !== h || this.ssaoScale !== ssaoScale) {
this.ssaoScale = ssaoScale;
var sw = Math.floor(width * this.ssaoScale);
var sh = Math.floor(height * this.ssaoScale);
this.target.setSize(width, height);
this.outlinesTarget.setSize(width, height);
this.ssaoDepthTexture.define(sw, sh);
this.ssaoDepthBlurProxyTexture.define(sw, sh);
mol_util_1.ValueCell.update(this.renderable.values.uTexSize, linear_algebra_1.Vec2.set(this.renderable.values.uTexSize.ref.value, width, height));
mol_util_1.ValueCell.update(this.outlinesRenderable.values.uTexSize, linear_algebra_1.Vec2.set(this.outlinesRenderable.values.uTexSize.ref.value, width, height));
mol_util_1.ValueCell.update(this.ssaoRenderable.values.uTexSize, linear_algebra_1.Vec2.set(this.ssaoRenderable.values.uTexSize.ref.value, sw, sh));
mol_util_1.ValueCell.update(this.ssaoBlurFirstPassRenderable.values.uTexSize, linear_algebra_1.Vec2.set(this.ssaoBlurFirstPassRenderable.values.uTexSize.ref.value, sw, sh));
mol_util_1.ValueCell.update(this.ssaoBlurSecondPassRenderable.values.uTexSize, linear_algebra_1.Vec2.set(this.ssaoBlurSecondPassRenderable.values.uTexSize.ref.value, sw, sh));
}
};
PostprocessingPass.prototype.updateState = function (camera, transparentBackground, backgroundColor, props) {
var needsUpdateMain = false;
var needsUpdateSsao = false;
var needsUpdateSsaoBlur = false;
var orthographic = camera.state.mode === 'orthographic' ? 1 : 0;
var outlinesEnabled = props.outline.name === 'on';
var occlusionEnabled = props.occlusion.name === 'on';
var invProjection = linear_algebra_1.Mat4.identity();
linear_algebra_1.Mat4.invert(invProjection, camera.projection);
if (props.occlusion.name === 'on') {
mol_util_1.ValueCell.update(this.ssaoRenderable.values.uProjection, camera.projection);
mol_util_1.ValueCell.update(this.ssaoRenderable.values.uInvProjection, invProjection);
var _a = this.renderable.values.uTexSize.ref.value, w = _a[0], h = _a[1];
var b = this.ssaoRenderable.values.uBounds;
var v = camera.viewport;
var s = this.ssaoScale;
linear_algebra_1.Vec4.set(b.ref.value, Math.floor(v.x * s) / (w * s), Math.floor(v.y * s) / (h * s), Math.ceil((v.x + v.width) * s) / (w * s), Math.ceil((v.y + v.height) * s) / (h * s));
mol_util_1.ValueCell.update(b, b.ref.value);
mol_util_1.ValueCell.update(this.ssaoBlurFirstPassRenderable.values.uBounds, b.ref.value);
mol_util_1.ValueCell.update(this.ssaoBlurSecondPassRenderable.values.uBounds, b.ref.value);
mol_util_1.ValueCell.updateIfChanged(this.ssaoBlurFirstPassRenderable.values.uNear, camera.near);
mol_util_1.ValueCell.updateIfChanged(this.ssaoBlurSecondPassRenderable.values.uNear, camera.near);
mol_util_1.ValueCell.updateIfChanged(this.ssaoBlurFirstPassRenderable.values.uFar, camera.far);
mol_util_1.ValueCell.updateIfChanged(this.ssaoBlurSecondPassRenderable.values.uFar, camera.far);
if (this.ssaoBlurFirstPassRenderable.values.dOrthographic.ref.value !== orthographic) {
needsUpdateSsaoBlur = true;
}
mol_util_1.ValueCell.updateIfChanged(this.ssaoBlurFirstPassRenderable.values.dOrthographic, orthographic);
mol_util_1.ValueCell.updateIfChanged(this.ssaoBlurSecondPassRenderable.values.dOrthographic, orthographic);
if (this.nSamples !== props.occlusion.params.samples) {
needsUpdateSsao = true;
this.nSamples = props.occlusion.params.samples;
mol_util_1.ValueCell.update(this.ssaoRenderable.values.uSamples, getSamples(this.randomHemisphereVector, this.nSamples));
mol_util_1.ValueCell.updateIfChanged(this.ssaoRenderable.values.dNSamples, this.nSamples);
}
mol_util_1.ValueCell.updateIfChanged(this.ssaoRenderable.values.uRadius, Math.pow(2, props.occlusion.params.radius));
mol_util_1.ValueCell.updateIfChanged(this.ssaoRenderable.values.uBias, props.occlusion.params.bias);
if (this.blurKernelSize !== props.occlusion.params.blurKernelSize) {
needsUpdateSsaoBlur = true;
this.blurKernelSize = props.occlusion.params.blurKernelSize;
var kernel = getBlurKernel(this.blurKernelSize);
mol_util_1.ValueCell.update(this.ssaoBlurFirstPassRenderable.values.uKernel, kernel);
mol_util_1.ValueCell.update(this.ssaoBlurSecondPassRenderable.values.uKernel, kernel);
mol_util_1.ValueCell.updateIfChanged(this.ssaoBlurFirstPassRenderable.values.dOcclusionKernelSize, this.blurKernelSize);
mol_util_1.ValueCell.updateIfChanged(this.ssaoBlurSecondPassRenderable.values.dOcclusionKernelSize, this.blurKernelSize);
}
}
if (props.outline.name === 'on') {
var threshold = props.outline.params.threshold;
// orthographic needs lower threshold
if (camera.state.mode === 'orthographic')
threshold /= 5;
var factor = Math.pow(1000, threshold) / 1000;
// use radiusMax for stable outlines when zooming
var maxPossibleViewZDiff = factor * camera.state.radiusMax;
var outlineScale = props.outline.params.scale - 1;
mol_util_1.ValueCell.updateIfChanged(this.outlinesRenderable.values.uNear, camera.near);
mol_util_1.ValueCell.updateIfChanged(this.outlinesRenderable.values.uFar, camera.far);
mol_util_1.ValueCell.updateIfChanged(this.outlinesRenderable.values.uMaxPossibleViewZDiff, maxPossibleViewZDiff);
mol_util_1.ValueCell.updateIfChanged(this.renderable.values.uMaxPossibleViewZDiff, maxPossibleViewZDiff);
if (this.renderable.values.dOutlineScale.ref.value !== outlineScale) {
needsUpdateMain = true;
}
mol_util_1.ValueCell.updateIfChanged(this.renderable.values.dOutlineScale, outlineScale);
}
mol_util_1.ValueCell.updateIfChanged(this.renderable.values.uFar, camera.far);
mol_util_1.ValueCell.updateIfChanged(this.renderable.values.uNear, camera.near);
mol_util_1.ValueCell.updateIfChanged(this.renderable.values.uFogFar, camera.fogFar);
mol_util_1.ValueCell.updateIfChanged(this.renderable.values.uFogNear, camera.fogNear);
mol_util_1.ValueCell.update(this.renderable.values.uFogColor, color_1.Color.toVec3Normalized(this.renderable.values.uFogColor.ref.value, backgroundColor));
mol_util_1.ValueCell.updateIfChanged(this.renderable.values.uTransparentBackground, transparentBackground);
if (this.renderable.values.dOrthographic.ref.value !== orthographic) {
needsUpdateMain = true;
}
mol_util_1.ValueCell.updateIfChanged(this.renderable.values.dOrthographic, orthographic);
if (this.renderable.values.dOutlineEnable.ref.value !== outlinesEnabled) {
needsUpdateMain = true;
}
mol_util_1.ValueCell.updateIfChanged(this.renderable.values.dOutlineEnable, outlinesEnabled);
if (this.renderable.values.dOcclusionEnable.ref.value !== occlusionEnabled) {
needsUpdateMain = true;
}
mol_util_1.ValueCell.updateIfChanged(this.renderable.values.dOcclusionEnable, occlusionEnabled);
if (needsUpdateSsao) {
this.ssaoRenderable.update();
}
if (needsUpdateSsaoBlur) {
this.ssaoBlurFirstPassRenderable.update();
this.ssaoBlurSecondPassRenderable.update();
}
if (needsUpdateMain) {
this.renderable.update();
}
var _b = this.webgl, gl = _b.gl, state = _b.state;
state.enable(gl.SCISSOR_TEST);
state.disable(gl.BLEND);
state.disable(gl.DEPTH_TEST);
state.depthMask(false);
var _c = camera.viewport, x = _c.x, y = _c.y, width = _c.width, height = _c.height;
gl.viewport(x, y, width, height);
gl.scissor(x, y, width, height);
};
PostprocessingPass.prototype.render = function (camera, toDrawingBuffer, transparentBackground, backgroundColor, props) {
this.updateState(camera, transparentBackground, backgroundColor, props);
if (props.outline.name === 'on') {
this.outlinesTarget.bind();
this.outlinesRenderable.render();
}
if (props.occlusion.name === 'on') {
var _a = camera.viewport, x = _a.x, y = _a.y, width = _a.width, height = _a.height;
var sx = Math.floor(x * this.ssaoScale);
var sy = Math.floor(y * this.ssaoScale);
var sw = Math.ceil(width * this.ssaoScale);
var sh = Math.ceil(height * this.ssaoScale);
this.webgl.gl.viewport(sx, sy, sw, sh);
this.webgl.gl.scissor(sx, sy, sw, sh);
this.ssaoFramebuffer.bind();
this.ssaoRenderable.render();
this.ssaoBlurFirstPassFramebuffer.bind();
this.ssaoBlurFirstPassRenderable.render();
this.ssaoBlurSecondPassFramebuffer.bind();
this.ssaoBlurSecondPassRenderable.render();
this.webgl.gl.viewport(x, y, width, height);
this.webgl.gl.scissor(x, y, width, height);
}
if (toDrawingBuffer) {
this.webgl.unbindFramebuffer();
}
else {
this.target.bind();
}
var _b = this.webgl, gl = _b.gl, state = _b.state;
state.clearColor(0, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
this.renderable.render();
};
return PostprocessingPass;
}());
exports.PostprocessingPass = PostprocessingPass;
var AntialiasingPass = /** @class */ (function () {
function AntialiasingPass(webgl, drawPass) {
this.drawPass = drawPass;
var colorTarget = drawPass.colorTarget;
var width = colorTarget.getWidth();
var height = colorTarget.getHeight();
this.target = webgl.createRenderTarget(width, height, false);
this.fxaa = new fxaa_1.FxaaPass(webgl, this.target.texture);
this.smaa = new smaa_1.SmaaPass(webgl, this.target.texture);
}
AntialiasingPass.isEnabled = function (props) {
return props.antialiasing.name !== 'off';
};
AntialiasingPass.prototype.setSize = function (width, height) {
var w = this.target.texture.getWidth();
var h = this.target.texture.getHeight();
if (width !== w || height !== h) {
this.target.setSize(width, height);
this.fxaa.setSize(width, height);
if (this.smaa.supported)
this.smaa.setSize(width, height);
}
};
AntialiasingPass.prototype._renderFxaa = function (camera, toDrawingBuffer, props) {
if (props.antialiasing.name !== 'fxaa')
return;
var input = PostprocessingPass.isEnabled(props)
? this.drawPass.postprocessing.target.texture
: this.drawPass.colorTarget.texture;
this.fxaa.update(input, props.antialiasing.params);
this.fxaa.render(camera.viewport, toDrawingBuffer ? undefined : this.target);
};
AntialiasingPass.prototype._renderSmaa = function (camera, toDrawingBuffer, props) {
if (props.antialiasing.name !== 'smaa')
return;
var input = PostprocessingPass.isEnabled(props)
? this.drawPass.postprocessing.target.texture
: this.drawPass.colorTarget.texture;
this.smaa.update(input, props.antialiasing.params);
this.smaa.render(camera.viewport, toDrawingBuffer ? undefined : this.target);
};
AntialiasingPass.prototype.render = function (camera, toDrawingBuffer, props) {
if (props.antialiasing.name === 'off')
return;
if (props.antialiasing.name === 'fxaa') {
this._renderFxaa(camera, toDrawingBuffer, props);
}
else if (props.antialiasing.name === 'smaa') {
if (!this.smaa.supported) {
throw new Error('SMAA not supported, missing "HTMLImageElement"');
}
this._renderSmaa(camera, toDrawingBuffer, props);
}
};
return AntialiasingPass;
}());
exports.AntialiasingPass = AntialiasingPass;
//# sourceMappingURL=postprocessing.js.map