molstar 3.2.0 → 3.4.0

package/lib/commonjs/mol-canvas3d/helper/handle-helper.js

@@ -17,14 +17,14 @@ var cylinder_1 = require("../../mol-geo/geometry/mesh/builder/cylinder");
 var mol_util_1 = require("../../mol-util");
 var geometry_1 = require("../../mol-math/geometry");
 var param_definition_1 = require("../../mol-util/param-definition");
-var immer_1 = (0, tslib_1.__importDefault)(require("immer"));
+var immer_1 = tslib_1.__importDefault(require("immer"));
 var shape_1 = require("../../mol-model/shape");
 var loci_1 = require("../../mol-model/loci");
 var marker_action_1 = require("../../mol-util/marker-action");
 var visual_1 = require("../../mol-repr/visual");
 var int_1 = require("../../mol-data/int");
 var render_item_1 = require("../../mol-gl/webgl/render-item");
-var HandleParams = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, mesh_1.Mesh.Params), { alpha: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, mesh_1.Mesh.Params.alpha), { defaultValue: 1 }), ignoreLight: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, mesh_1.Mesh.Params.ignoreLight), { defaultValue: true }), colorX: param_definition_1.ParamDefinition.Color(names_1.ColorNames.red, { isEssential: true }), colorY: param_definition_1.ParamDefinition.Color(names_1.ColorNames.green, { isEssential: true }), colorZ: param_definition_1.ParamDefinition.Color(names_1.ColorNames.blue, { isEssential: true }), scale: param_definition_1.ParamDefinition.Numeric(0.33, { min: 0.1, max: 2, step: 0.1 }, { isEssential: true }) });
+var HandleParams = tslib_1.__assign(tslib_1.__assign({}, mesh_1.Mesh.Params), { alpha: tslib_1.__assign(tslib_1.__assign({}, mesh_1.Mesh.Params.alpha), { defaultValue: 1 }), ignoreLight: tslib_1.__assign(tslib_1.__assign({}, mesh_1.Mesh.Params.ignoreLight), { defaultValue: true }), colorX: param_definition_1.ParamDefinition.Color(names_1.ColorNames.red, { isEssential: true }), colorY: param_definition_1.ParamDefinition.Color(names_1.ColorNames.green, { isEssential: true }), colorZ: param_definition_1.ParamDefinition.Color(names_1.ColorNames.blue, { isEssential: true }), scale: param_definition_1.ParamDefinition.Numeric(0.33, { min: 0.1, max: 2, step: 0.1 }, { isEssential: true }) });
 exports.HandleHelperParams = {
     handle: param_definition_1.ParamDefinition.MappedStatic('off', {
         on: param_definition_1.ParamDefinition.Group(HandleParams),
@@ -33,8 +33,8 @@ exports.HandleHelperParams = {
 };
 var HandleHelper = /** @class */ (function () {
     function HandleHelper(webgl, props) {
-        var _this = this;
         if (props === void 0) { props = {}; }
+        var _this = this;
         this.webgl = webgl;
         this.props = {
             handle: { name: 'off', params: {} }
@@ -74,11 +74,11 @@ var HandleHelper = /** @class */ (function () {
                 p.handle.name = props.handle.name;
                 if (props.handle.name === 'on') {
                     _this.scene.clear();
-                    var params = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, props.handle.params), { scale: props.handle.params.scale * _this.webgl.pixelRatio });
+                    var params = tslib_1.__assign(tslib_1.__assign({}, props.handle.params), { scale: props.handle.params.scale * _this.webgl.pixelRatio });
                     _this.renderObject = createHandleRenderObject(params);
                     _this.scene.add(_this.renderObject);
                     _this.scene.commit();
-                    p.handle.params = (0, tslib_1.__assign)({}, props.handle.params);
+                    p.handle.params = tslib_1.__assign({}, props.handle.params);
                 }
             }
         });
@@ -181,4 +181,3 @@ function createHandleRenderObject(props) {
     var shape = getHandleShape(props);
     return shape_1.Shape.createRenderObject(shape, props);
 }
-//# sourceMappingURL=handle-helper.js.map

package/lib/commonjs/mol-canvas3d/helper/helper.js

@@ -22,7 +22,7 @@ exports.DefaultHelperProps = param_definition_1.ParamDefinition.getDefaultValues
 var Helper = /** @class */ (function () {
     function Helper(webgl, scene, props) {
         if (props === void 0) { props = {}; }
-        var p = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, exports.DefaultHelperProps), props);
+        var p = tslib_1.__assign(tslib_1.__assign({}, exports.DefaultHelperProps), props);
         this.debug = new bounding_sphere_helper_1.BoundingSphereHelper(webgl, scene, p.debug);
         this.camera = new camera_helper_1.CameraHelper(webgl, p.camera.helper);
         this.handle = new handle_helper_1.HandleHelper(webgl, p.handle);
@@ -30,4 +30,3 @@ var Helper = /** @class */ (function () {
     return Helper;
 }());
 exports.Helper = Helper;
-//# sourceMappingURL=helper.js.map

package/lib/commonjs/mol-canvas3d/helper/interaction-events.js

@@ -23,8 +23,8 @@ exports.Canvas3dInteractionHelperParams = {
 };
 var Canvas3dInteractionHelper = /** @class */ (function () {
     function Canvas3dInteractionHelper(canvasIdentify, lociGetter, input, camera, props) {
-        var _this = this;
         if (props === void 0) { props = {}; }
+        var _this = this;
         this.canvasIdentify = canvasIdentify;
         this.lociGetter = lociGetter;
         this.input = input;
@@ -49,7 +49,7 @@ var Canvas3dInteractionHelper = /** @class */ (function () {
         this.buttons = input_observer_1.ButtonsType.create(0);
         this.button = input_observer_1.ButtonsType.create(0);
         this.modifiers = input_observer_1.ModifiersKeys.None;
-        this.props = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, param_definition_1.ParamDefinition.getDefaultValues(exports.Canvas3dInteractionHelperParams)), props);
+        this.props = tslib_1.__assign(tslib_1.__assign({}, param_definition_1.ParamDefinition.getDefaultValues(exports.Canvas3dInteractionHelperParams)), props);
         input.drag.subscribe(function (_a) {
             var x = _a.x, y = _a.y, buttons = _a.buttons, button = _a.button, modifiers = _a.modifiers;
             _this.isInteracting = true;
@@ -195,4 +195,3 @@ var Canvas3dInteractionHelper = /** @class */ (function () {
     return Canvas3dInteractionHelper;
 }());
 exports.Canvas3dInteractionHelper = Canvas3dInteractionHelper;
-//# sourceMappingURL=interaction-events.js.map

package/lib/commonjs/mol-canvas3d/passes/draw.js

@@ -23,11 +23,11 @@ var wboit_1 = require("./wboit");
 var postprocessing_1 = require("./postprocessing");
 var marking_1 = require("./marking");
 var util_2 = require("../../mol-gl/compute/util");
-var DepthMergeSchema = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, util_1.QuadSchema), { tDepthPrimitives: (0, schema_1.TextureSpec)('texture', 'depth', 'ushort', 'nearest'), tDepthVolumes: (0, schema_1.TextureSpec)('texture', 'depth', 'ushort', 'nearest'), uTexSize: (0, schema_1.UniformSpec)('v2'), dPackedDepth: (0, schema_1.DefineSpec)('boolean') });
+var DepthMergeSchema = tslib_1.__assign(tslib_1.__assign({}, util_1.QuadSchema), { tDepthPrimitives: (0, schema_1.TextureSpec)('texture', 'depth', 'ushort', 'nearest'), tDepthVolumes: (0, schema_1.TextureSpec)('texture', 'depth', 'ushort', 'nearest'), uTexSize: (0, schema_1.UniformSpec)('v2'), dPackedDepth: (0, schema_1.DefineSpec)('boolean') });
 var DepthMergeShaderCode = (0, shader_code_1.ShaderCode)('depth-merge', quad_vert_1.quad_vert, depth_merge_frag_1.depthMerge_frag);
 function getDepthMergeRenderable(ctx, depthTexturePrimitives, depthTextureVolumes, packedDepth) {
-    var values = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, util_1.QuadValues), { tDepthPrimitives: mol_util_1.ValueCell.create(depthTexturePrimitives), tDepthVolumes: mol_util_1.ValueCell.create(depthTextureVolumes), uTexSize: mol_util_1.ValueCell.create(linear_algebra_1.Vec2.create(depthTexturePrimitives.getWidth(), depthTexturePrimitives.getHeight())), dPackedDepth: mol_util_1.ValueCell.create(packedDepth) });
-    var schema = (0, tslib_1.__assign)({}, DepthMergeSchema);
+    var values = tslib_1.__assign(tslib_1.__assign({}, util_1.QuadValues), { tDepthPrimitives: mol_util_1.ValueCell.create(depthTexturePrimitives), tDepthVolumes: mol_util_1.ValueCell.create(depthTextureVolumes), uTexSize: mol_util_1.ValueCell.create(linear_algebra_1.Vec2.create(depthTexturePrimitives.getWidth(), depthTexturePrimitives.getHeight())), dPackedDepth: mol_util_1.ValueCell.create(packedDepth) });
+    var schema = tslib_1.__assign({}, DepthMergeSchema);
     var renderItem = (0, render_item_1.createComputeRenderItem)(ctx, 'triangles', DepthMergeShaderCode, schema, values);
     return (0, renderable_1.createComputeRenderable)(renderItem, values);
 }
@@ -225,17 +225,20 @@ var DrawPass = /** @class */ (function () {
             this.drawTarget.bind();
         }
         if (markingEnabled) {
-            var markingDepthTest = props.marking.ghostEdgeStrength < 1;
-            if (markingDepthTest) {
-                this.marking.depthTarget.bind();
+            var markerAverage = scene.getMarkerAverage();
+            if (markerAverage > 0) {
+                var markingDepthTest = props.marking.ghostEdgeStrength < 1;
+                if (markingDepthTest && markerAverage !== 1) {
+                    this.marking.depthTarget.bind();
+                    renderer.clear(false, true);
+                    renderer.renderMarkingDepth(scene.primitives, camera, null);
+                }
+                this.marking.maskTarget.bind();
                 renderer.clear(false, true);
-                renderer.renderMarkingDepth(scene.primitives, camera, null);
+                renderer.renderMarkingMask(scene.primitives, camera, markingDepthTest ? this.marking.depthTarget.texture : null);
+                this.marking.update(props.marking);
+                this.marking.render(camera.viewport, postprocessingEnabled ? this.postprocessing.target : this.colorTarget);
             }
-            this.marking.maskTarget.bind();
-            renderer.clear(false, true);
-            renderer.renderMarkingMask(scene.primitives, camera, markingDepthTest ? this.marking.depthTarget.texture : null);
-            this.marking.update(props.marking);
-            this.marking.render(camera.viewport, postprocessingEnabled ? this.postprocessing.target : this.colorTarget);
         }
         if (helper.debug.isEnabled) {
             helper.debug.syncVisibility();
@@ -289,4 +292,3 @@ var DrawPass = /** @class */ (function () {
     return DrawPass;
 }());
 exports.DrawPass = DrawPass;
-//# sourceMappingURL=draw.js.map

package/lib/commonjs/mol-canvas3d/passes/fxaa.js

@@ -81,14 +81,13 @@ var FxaaPass = /** @class */ (function () {
 }());
 exports.FxaaPass = FxaaPass;
 //
-var FxaaSchema = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, util_1.QuadSchema), { tColor: (0, schema_1.TextureSpec)('texture', 'rgba', 'ubyte', 'linear'), uTexSizeInv: (0, schema_1.UniformSpec)('v2'), dEdgeThresholdMin: (0, schema_1.DefineSpec)('number'), dEdgeThresholdMax: (0, schema_1.DefineSpec)('number'), dIterations: (0, schema_1.DefineSpec)('number'), dSubpixelQuality: (0, schema_1.DefineSpec)('number') });
+var FxaaSchema = tslib_1.__assign(tslib_1.__assign({}, util_1.QuadSchema), { tColor: (0, schema_1.TextureSpec)('texture', 'rgba', 'ubyte', 'linear'), uTexSizeInv: (0, schema_1.UniformSpec)('v2'), dEdgeThresholdMin: (0, schema_1.DefineSpec)('number'), dEdgeThresholdMax: (0, schema_1.DefineSpec)('number'), dIterations: (0, schema_1.DefineSpec)('number'), dSubpixelQuality: (0, schema_1.DefineSpec)('number') });
 var FxaaShaderCode = (0, shader_code_1.ShaderCode)('fxaa', quad_vert_1.quad_vert, fxaa_frag_1.fxaa_frag);
 function getFxaaRenderable(ctx, colorTexture) {
     var width = colorTexture.getWidth();
     var height = colorTexture.getHeight();
-    var values = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, util_1.QuadValues), { tColor: mol_util_1.ValueCell.create(colorTexture), uTexSizeInv: mol_util_1.ValueCell.create(linear_algebra_1.Vec2.create(1 / width, 1 / height)), dEdgeThresholdMin: mol_util_1.ValueCell.create(0.0312), dEdgeThresholdMax: mol_util_1.ValueCell.create(0.125), dIterations: mol_util_1.ValueCell.create(12), dSubpixelQuality: mol_util_1.ValueCell.create(0.3) });
-    var schema = (0, tslib_1.__assign)({}, FxaaSchema);
+    var values = tslib_1.__assign(tslib_1.__assign({}, util_1.QuadValues), { tColor: mol_util_1.ValueCell.create(colorTexture), uTexSizeInv: mol_util_1.ValueCell.create(linear_algebra_1.Vec2.create(1 / width, 1 / height)), dEdgeThresholdMin: mol_util_1.ValueCell.create(0.0312), dEdgeThresholdMax: mol_util_1.ValueCell.create(0.125), dIterations: mol_util_1.ValueCell.create(12), dSubpixelQuality: mol_util_1.ValueCell.create(0.3) });
+    var schema = tslib_1.__assign({}, FxaaSchema);
     var renderItem = (0, render_item_1.createComputeRenderItem)(ctx, 'triangles', FxaaShaderCode, schema, values);
     return (0, renderable_1.createComputeRenderable)(renderItem, values);
 }
-//# sourceMappingURL=fxaa.js.map

package/lib/commonjs/mol-canvas3d/passes/image.d.ts

@@ -23,6 +23,7 @@ export declare const ImageParams: {
             radius: any;
             bias: any;
             blurKernelSize: any;
+            resolutionScale: any;
         }>, "on">;
         outline: PD.NamedParams<PD.Normalize<unknown>, "off"> | PD.NamedParams<PD.Normalize<{
             scale: any;

package/lib/commonjs/mol-canvas3d/passes/image.js

@@ -32,7 +32,7 @@ var ImagePass = /** @class */ (function () {
         this._width = 0;
         this._height = 0;
         this._camera = new camera_1.Camera();
-        this.props = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, param_definition_1.ParamDefinition.getDefaultValues(exports.ImageParams)), props);
+        this.props = tslib_1.__assign(tslib_1.__assign({}, param_definition_1.ParamDefinition.getDefaultValues(exports.ImageParams)), props);
         this.drawPass = new draw_1.DrawPass(webgl, 128, 128, enableWboit);
         this.multiSamplePass = new multi_sample_1.MultiSamplePass(webgl, this.drawPass);
         this.multiSampleHelper = new multi_sample_1.MultiSampleHelper(this.multiSamplePass);
@@ -107,4 +107,3 @@ var ImagePass = /** @class */ (function () {
     return ImagePass;
 }());
 exports.ImagePass = ImagePass;
-//# sourceMappingURL=image.js.map

package/lib/commonjs/mol-canvas3d/passes/marking.js

@@ -107,25 +107,24 @@ var MarkingPass = /** @class */ (function () {
 }());
 exports.MarkingPass = MarkingPass;
 //
-var EdgeSchema = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, util_1.QuadSchema), { tMaskTexture: (0, schema_1.TextureSpec)('texture', 'rgba', 'ubyte', 'linear'), uTexSizeInv: (0, schema_1.UniformSpec)('v2'), dEdgeScale: (0, schema_1.DefineSpec)('number') });
+var EdgeSchema = tslib_1.__assign(tslib_1.__assign({}, util_1.QuadSchema), { tMaskTexture: (0, schema_1.TextureSpec)('texture', 'rgba', 'ubyte', 'linear'), uTexSizeInv: (0, schema_1.UniformSpec)('v2'), dEdgeScale: (0, schema_1.DefineSpec)('number') });
 var EdgeShaderCode = (0, shader_code_1.ShaderCode)('edge', quad_vert_1.quad_vert, edge_frag_1.edge_frag);
 function getEdgeRenderable(ctx, maskTexture) {
     var width = maskTexture.getWidth();
     var height = maskTexture.getHeight();
-    var values = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, util_1.QuadValues), { tMaskTexture: mol_util_1.ValueCell.create(maskTexture), uTexSizeInv: mol_util_1.ValueCell.create(linear_algebra_1.Vec2.create(1 / width, 1 / height)), dEdgeScale: mol_util_1.ValueCell.create(1) });
-    var schema = (0, tslib_1.__assign)({}, EdgeSchema);
+    var values = tslib_1.__assign(tslib_1.__assign({}, util_1.QuadValues), { tMaskTexture: mol_util_1.ValueCell.create(maskTexture), uTexSizeInv: mol_util_1.ValueCell.create(linear_algebra_1.Vec2.create(1 / width, 1 / height)), dEdgeScale: mol_util_1.ValueCell.create(1) });
+    var schema = tslib_1.__assign({}, EdgeSchema);
     var renderItem = (0, render_item_1.createComputeRenderItem)(ctx, 'triangles', EdgeShaderCode, schema, values);
     return (0, renderable_1.createComputeRenderable)(renderItem, values);
 }
 //
-var OverlaySchema = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, util_1.QuadSchema), { tEdgeTexture: (0, schema_1.TextureSpec)('texture', 'rgba', 'ubyte', 'linear'), uTexSizeInv: (0, schema_1.UniformSpec)('v2'), uHighlightEdgeColor: (0, schema_1.UniformSpec)('v3'), uSelectEdgeColor: (0, schema_1.UniformSpec)('v3'), uGhostEdgeStrength: (0, schema_1.UniformSpec)('f'), uInnerEdgeFactor: (0, schema_1.UniformSpec)('f') });
+var OverlaySchema = tslib_1.__assign(tslib_1.__assign({}, util_1.QuadSchema), { tEdgeTexture: (0, schema_1.TextureSpec)('texture', 'rgba', 'ubyte', 'linear'), uTexSizeInv: (0, schema_1.UniformSpec)('v2'), uHighlightEdgeColor: (0, schema_1.UniformSpec)('v3'), uSelectEdgeColor: (0, schema_1.UniformSpec)('v3'), uGhostEdgeStrength: (0, schema_1.UniformSpec)('f'), uInnerEdgeFactor: (0, schema_1.UniformSpec)('f') });
 var OverlayShaderCode = (0, shader_code_1.ShaderCode)('overlay', quad_vert_1.quad_vert, overlay_frag_1.overlay_frag);
 function getOverlayRenderable(ctx, edgeTexture) {
     var width = edgeTexture.getWidth();
     var height = edgeTexture.getHeight();
-    var values = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, util_1.QuadValues), { tEdgeTexture: mol_util_1.ValueCell.create(edgeTexture), uTexSizeInv: mol_util_1.ValueCell.create(linear_algebra_1.Vec2.create(1 / width, 1 / height)), uHighlightEdgeColor: mol_util_1.ValueCell.create((0, linear_algebra_1.Vec3)()), uSelectEdgeColor: mol_util_1.ValueCell.create((0, linear_algebra_1.Vec3)()), uGhostEdgeStrength: mol_util_1.ValueCell.create(0), uInnerEdgeFactor: mol_util_1.ValueCell.create(0) });
-    var schema = (0, tslib_1.__assign)({}, OverlaySchema);
+    var values = tslib_1.__assign(tslib_1.__assign({}, util_1.QuadValues), { tEdgeTexture: mol_util_1.ValueCell.create(edgeTexture), uTexSizeInv: mol_util_1.ValueCell.create(linear_algebra_1.Vec2.create(1 / width, 1 / height)), uHighlightEdgeColor: mol_util_1.ValueCell.create((0, linear_algebra_1.Vec3)()), uSelectEdgeColor: mol_util_1.ValueCell.create((0, linear_algebra_1.Vec3)()), uGhostEdgeStrength: mol_util_1.ValueCell.create(0), uInnerEdgeFactor: mol_util_1.ValueCell.create(0) });
+    var schema = tslib_1.__assign({}, OverlaySchema);
     var renderItem = (0, render_item_1.createComputeRenderItem)(ctx, 'triangles', OverlayShaderCode, schema, values);
     return (0, renderable_1.createComputeRenderable)(renderItem, values);
 }
-//# sourceMappingURL=marking.js.map

package/lib/commonjs/mol-canvas3d/passes/multi-sample.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2019-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2019-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */

package/lib/commonjs/mol-canvas3d/passes/multi-sample.js

@@ -1,6 +1,6 @@
 "use strict";
 /**
- * Copyright (c) 2019-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2019-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
@@ -18,11 +18,11 @@ var param_definition_1 = require("../../mol-util/param-definition");
 var camera_1 = require("../../mol-canvas3d/camera");
 var quad_vert_1 = require("../../mol-gl/shader/quad.vert");
 var compose_frag_1 = require("../../mol-gl/shader/compose.frag");
-var ComposeSchema = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, util_1.QuadSchema), { tColor: (0, schema_1.TextureSpec)('texture', 'rgba', 'ubyte', 'nearest'), uTexSize: (0, schema_1.UniformSpec)('v2'), uWeight: (0, schema_1.UniformSpec)('f') });
+var ComposeSchema = tslib_1.__assign(tslib_1.__assign({}, util_1.QuadSchema), { tColor: (0, schema_1.TextureSpec)('texture', 'rgba', 'ubyte', 'nearest'), uTexSize: (0, schema_1.UniformSpec)('v2'), uWeight: (0, schema_1.UniformSpec)('f') });
 var ComposeShaderCode = (0, shader_code_1.ShaderCode)('compose', quad_vert_1.quad_vert, compose_frag_1.compose_frag);
 function getComposeRenderable(ctx, colorTexture) {
-    var values = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, util_1.QuadValues), { tColor: mol_util_1.ValueCell.create(colorTexture), uTexSize: mol_util_1.ValueCell.create(linear_algebra_1.Vec2.create(colorTexture.getWidth(), colorTexture.getHeight())), uWeight: mol_util_1.ValueCell.create(1.0) });
-    var schema = (0, tslib_1.__assign)({}, ComposeSchema);
+    var values = tslib_1.__assign(tslib_1.__assign({}, util_1.QuadValues), { tColor: mol_util_1.ValueCell.create(colorTexture), uTexSize: mol_util_1.ValueCell.create(linear_algebra_1.Vec2.create(colorTexture.getWidth(), colorTexture.getHeight())), uWeight: mol_util_1.ValueCell.create(1.0) });
+    var schema = tslib_1.__assign({}, ComposeSchema);
     var renderItem = (0, render_item_1.createComputeRenderItem)(ctx, 'triangles', ComposeShaderCode, schema, values);
     return (0, renderable_1.createComputeRenderable)(renderItem, values);
 }
@@ -104,6 +104,12 @@ var MultiSamplePass = /** @class */ (function () {
             var sampleWeight = baseSampleWeight + roundingRange * uniformCenteredDistribution;
             mol_util_1.ValueCell.update(compose.values.uWeight, sampleWeight);
             // render scene
+            if (i === 0) {
+                drawPass.postprocessing.setOcclusionOffset(0, 0);
+            }
+            else {
+                drawPass.postprocessing.setOcclusionOffset(offset[0] / width, offset[1] / height);
+            }
             drawPass.render(ctx, props, false);
             // compose rendered scene with compose target
             composeTarget.bind();
@@ -120,6 +126,7 @@ var MultiSamplePass = /** @class */ (function () {
             }
             compose.render();
         }
+        drawPass.postprocessing.setOcclusionOffset(0, 0);
         mol_util_1.ValueCell.update(compose.values.uWeight, 1.0);
         mol_util_1.ValueCell.update(compose.values.tColor, composeTarget.texture);
         compose.update();
@@ -172,6 +179,12 @@ var MultiSamplePass = /** @class */ (function () {
                 camera_1.Camera.setViewOffset(camera.viewOffset, width, height, offset[0], offset[1], width, height);
                 camera.update();
                 // render scene
+                if (sampleIndex === 0) {
+                    drawPass.postprocessing.setOcclusionOffset(0, 0);
+                }
+                else {
+                    drawPass.postprocessing.setOcclusionOffset(offset[0] / width, offset[1] / height);
+                }
                 drawPass.render(ctx, props, false);
                 // compose rendered scene with compose target
                 composeTarget.bind();
@@ -192,6 +205,7 @@ var MultiSamplePass = /** @class */ (function () {
                     break;
             }
         }
+        drawPass.postprocessing.setOcclusionOffset(0, 0);
         this.bindOutputTarget(toDrawingBuffer);
         gl.viewport(x, y, width, height);
         gl.scissor(x, y, width, height);
@@ -225,23 +239,23 @@ var JitterVectors = [
         [0, 0]
     ],
     [
-        [4, 4], [-4, -4]
+        [0, 0], [-4, -4]
     ],
     [
-        [-2, -6], [6, -2], [-6, 2], [2, 6]
+        [0, 0], [6, -2], [-6, 2], [2, 6]
     ],
     [
-        [1, -3], [-1, 3], [5, 1], [-3, -5],
+        [0, 0], [-1, 3], [5, 1], [-3, -5],
         [-5, 5], [-7, -1], [3, 7], [7, -7]
     ],
     [
-        [1, 1], [-1, -3], [-3, 2], [4, -1],
+        [0, 0], [-1, -3], [-3, 2], [4, -1],
         [-5, -2], [2, 5], [5, 3], [3, -5],
         [-2, 6], [0, -7], [-4, -6], [-6, 4],
         [-8, 0], [7, -4], [6, 7], [-7, -8]
     ],
     [
-        [-4, -7], [-7, -5], [-3, -5], [-5, -4],
+        [0, 0], [-7, -5], [-3, -5], [-5, -4],
         [-1, -4], [-2, -2], [-6, -1], [-4, 0],
         [-7, 1], [-1, 2], [-6, 3], [-3, 3],
         [-7, 6], [-3, 6], [-5, 7], [-1, 7],
@@ -276,4 +290,3 @@ var MultiSampleHelper = /** @class */ (function () {
     return MultiSampleHelper;
 }());
 exports.MultiSampleHelper = MultiSampleHelper;
-//# sourceMappingURL=multi-sample.js.map

package/lib/commonjs/mol-canvas3d/passes/passes.js

@@ -27,4 +27,3 @@ var Passes = /** @class */ (function () {
     return Passes;
 }());
 exports.Passes = Passes;
-//# sourceMappingURL=passes.js.map

package/lib/commonjs/mol-canvas3d/passes/pick.js

@@ -215,4 +215,3 @@ var PickHelper = /** @class */ (function () {
     return PickHelper;
 }());
 exports.PickHelper = PickHelper;
-//# sourceMappingURL=pick.js.map

package/lib/commonjs/mol-canvas3d/passes/postprocessing.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2019-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2019-2022 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>
@@ -16,6 +16,7 @@ export declare const PostprocessingParams: {
         radius: number;
         bias: number;
         blurKernelSize: number;
+        resolutionScale: number;
     }>, "on">>;
     outline: PD.Mapped<PD.NamedParams<PD.Normalize<unknown>, "off"> | PD.NamedParams<PD.Normalize<{
         scale: number;
@@ -35,6 +36,7 @@ export declare const PostprocessingParams: {
 export declare type PostprocessingProps = PD.Values<typeof PostprocessingParams>;
 export declare class PostprocessingPass {
     private webgl;
+    private drawPass;
     static isEnabled(props: PostprocessingProps): boolean;
     readonly target: RenderTarget;
     private readonly outlinesTarget;
@@ -43,6 +45,8 @@ export declare class PostprocessingPass {
     private readonly ssaoFramebuffer;
     private readonly ssaoBlurFirstPassFramebuffer;
     private readonly ssaoBlurSecondPassFramebuffer;
+    private readonly downsampledDepthTarget;
+    private readonly downsampleDepthRenderable;
     private readonly ssaoDepthTexture;
     private readonly ssaoDepthBlurProxyTexture;
     private readonly ssaoRenderable;
@@ -50,12 +54,15 @@ export declare class PostprocessingPass {
     private readonly ssaoBlurSecondPassRenderable;
     private nSamples;
     private blurKernelSize;
+    private downsampleFactor;
     private readonly renderable;
     private ssaoScale;
     private calcSsaoScale;
     constructor(webgl: WebGLContext, drawPass: DrawPass);
     setSize(width: number, height: number): void;
     private updateState;
+    private occlusionOffset;
+    setOcclusionOffset(x: number, y: number): void;
     render(camera: ICamera, toDrawingBuffer: boolean, transparentBackground: boolean, backgroundColor: Color, props: PostprocessingProps): void;
 }
 export declare class AntialiasingPass {

package/lib/commonjs/mol-canvas3d/passes/postprocessing.js

@@ -1,6 +1,6 @@
 "use strict";
 /**
- * Copyright (c) 2019-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2019-2022 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>
@@ -24,26 +24,26 @@ 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') });
+var OutlinesSchema = tslib_1.__assign(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 values = tslib_1.__assign(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 = 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') });
+var SsaoSchema = tslib_1.__assign(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(32), 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 values = tslib_1.__assign(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(32), 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 = 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') });
+var SsaoBlurSchema = tslib_1.__assign(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(15), 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 values = tslib_1.__assign(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(15), 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 = 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);
@@ -68,10 +68,10 @@ function getSamples(vectorSamples, nSamples) {
     }
     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'), uOutlineColor: (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') });
+var PostprocessingSchema = tslib_1.__assign(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'), uOutlineColor: (0, schema_1.UniformSpec)('v3'), uTransparentBackground: (0, schema_1.UniformSpec)('b'), uMaxPossibleViewZDiff: (0, schema_1.UniformSpec)('f'), dOcclusionEnable: (0, schema_1.DefineSpec)('boolean'), uOcclusionOffset: (0, schema_1.UniformSpec)('v2'), 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)), uOutlineColor: mol_util_1.ValueCell.create(linear_algebra_1.Vec3.create(0, 0, 0)), uTransparentBackground: mol_util_1.ValueCell.create(false), uMaxPossibleViewZDiff: mol_util_1.ValueCell.create(0.5), dOcclusionEnable: mol_util_1.ValueCell.create(true), 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 values = tslib_1.__assign(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)), uOutlineColor: mol_util_1.ValueCell.create(linear_algebra_1.Vec3.create(0, 0, 0)), uTransparentBackground: mol_util_1.ValueCell.create(false), uMaxPossibleViewZDiff: mol_util_1.ValueCell.create(0.5), dOcclusionEnable: mol_util_1.ValueCell.create(true), uOcclusionOffset: mol_util_1.ValueCell.create(linear_algebra_1.Vec2.create(0, 0)), dOutlineEnable: mol_util_1.ValueCell.create(false), dOutlineScale: mol_util_1.ValueCell.create(1), uOutlineThreshold: mol_util_1.ValueCell.create(0.33) });
+    var schema = 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);
@@ -80,9 +80,10 @@ 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.' }),
+            radius: param_definition_1.ParamDefinition.Numeric(5, { min: 0, max: 10, step: 0.1 }, { description: 'Final occlusion 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 }),
+            resolutionScale: param_definition_1.ParamDefinition.Numeric(1, { min: 0.1, max: 1, step: 0.05 }, { description: 'Adjust resolution of occlusion calculation' }),
         }),
         off: param_definition_1.ParamDefinition.Group({})
     }, { cycle: true, description: 'Darken occluded crevices with the ambient occlusion effect' }),
@@ -103,12 +104,15 @@ exports.PostprocessingParams = {
 var PostprocessingPass = /** @class */ (function () {
     function PostprocessingPass(webgl, drawPass) {
         this.webgl = webgl;
-        this.ssaoScale = this.calcSsaoScale();
+        this.drawPass = drawPass;
+        this.occlusionOffset = [0, 0];
         var colorTarget = drawPass.colorTarget, depthTexture = drawPass.depthTexture;
         var width = colorTarget.getWidth();
         var height = colorTarget.getHeight();
         this.nSamples = 1;
         this.blurKernelSize = 1;
+        this.downsampleFactor = 1;
+        this.ssaoScale = this.calcSsaoScale();
         // needs to be linear for anti-aliasing pass
         this.target = webgl.createRenderTarget(width, height, false, 'uint8', 'linear');
         this.outlinesTarget = webgl.createRenderTarget(width, height, false);
@@ -128,14 +132,16 @@ var PostprocessingPass = /** @class */ (function () {
         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.downsampledDepthTarget = webgl.createRenderTarget(sw, sh, false, 'uint8', 'linear');
+        this.downsampleDepthRenderable = (0, util_1.createCopyRenderable)(webgl, depthTexture);
+        this.ssaoDepthTexture = webgl.resources.texture('image-uint8', 'rgba', 'ubyte', 'linear');
         this.ssaoDepthTexture.define(sw, sh);
         this.ssaoDepthTexture.attachFramebuffer(this.ssaoFramebuffer, 'color0');
-        this.ssaoDepthBlurProxyTexture = webgl.resources.texture('image-uint8', 'rgba', 'ubyte', 'nearest');
+        this.ssaoDepthBlurProxyTexture = webgl.resources.texture('image-uint8', 'rgba', 'ubyte', 'linear');
         this.ssaoDepthBlurProxyTexture.define(sw, sh);
         this.ssaoDepthBlurProxyTexture.attachFramebuffer(this.ssaoBlurFirstPassFramebuffer, 'color0');
         this.ssaoDepthTexture.attachFramebuffer(this.ssaoBlurSecondPassFramebuffer, 'color0');
-        this.ssaoRenderable = getSsaoRenderable(webgl, depthTexture);
+        this.ssaoRenderable = getSsaoRenderable(webgl, this.downsampleFactor === 1 ? depthTexture : this.downsampledDepthTarget.texture);
         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);
@@ -145,7 +151,7 @@ var PostprocessingPass = /** @class */ (function () {
     };
     PostprocessingPass.prototype.calcSsaoScale = function () {
         // downscale ssao for high pixel-ratios
-        return Math.min(1, 1 / this.webgl.pixelRatio);
+        return Math.min(1, 1 / this.webgl.pixelRatio) * this.downsampleFactor;
     };
     PostprocessingPass.prototype.setSize = function (width, height) {
         var _a = this.renderable.values.uTexSize.ref.value, w = _a[0], h = _a[1];
@@ -156,10 +162,12 @@ var PostprocessingPass = /** @class */ (function () {
             var sh = Math.floor(height * this.ssaoScale);
             this.target.setSize(width, height);
             this.outlinesTarget.setSize(width, height);
+            this.downsampledDepthTarget.setSize(sw, sh);
             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.downsampleDepthRenderable.values.uTexSize, linear_algebra_1.Vec2.set(this.downsampleDepthRenderable.values.uTexSize.ref.value, sw, sh));
             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));
@@ -211,6 +219,26 @@ var PostprocessingPass = /** @class */ (function () {
                 mol_util_1.ValueCell.updateIfChanged(this.ssaoBlurFirstPassRenderable.values.dOcclusionKernelSize, this.blurKernelSize);
                 mol_util_1.ValueCell.updateIfChanged(this.ssaoBlurSecondPassRenderable.values.dOcclusionKernelSize, this.blurKernelSize);
             }
+            if (this.downsampleFactor !== props.occlusion.params.resolutionScale) {
+                needsUpdateSsao = true;
+                this.downsampleFactor = props.occlusion.params.resolutionScale;
+                this.ssaoScale = this.calcSsaoScale();
+                var sw = Math.floor(w * this.ssaoScale);
+                var sh = Math.floor(h * this.ssaoScale);
+                this.downsampledDepthTarget.setSize(sw, sh);
+                this.ssaoDepthTexture.define(sw, sh);
+                this.ssaoDepthBlurProxyTexture.define(sw, sh);
+                if (this.ssaoScale === 1) {
+                    mol_util_1.ValueCell.update(this.ssaoRenderable.values.tDepth, this.drawPass.depthTexture);
+                }
+                else {
+                    mol_util_1.ValueCell.update(this.ssaoRenderable.values.tDepth, this.downsampledDepthTarget.texture);
+                }
+                mol_util_1.ValueCell.update(this.downsampleDepthRenderable.values.uTexSize, linear_algebra_1.Vec2.set(this.downsampleDepthRenderable.values.uTexSize.ref.value, sw, sh));
+                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));
+            }
         }
         if (props.outline.name === 'on') {
             var threshold = props.outline.params.threshold;
@@ -268,28 +296,30 @@ var PostprocessingPass = /** @class */ (function () {
         gl.viewport(x, y, width, height);
         gl.scissor(x, y, width, height);
     };
+    PostprocessingPass.prototype.setOcclusionOffset = function (x, y) {
+        this.occlusionOffset[0] = x;
+        this.occlusionOffset[1] = y;
+        mol_util_1.ValueCell.update(this.renderable.values.uOcclusionOffset, linear_algebra_1.Vec2.set(this.renderable.values.uOcclusionOffset.ref.value, x, y));
+    };
     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);
+        // don't render occlusion if offset is given,
+        // which will reuse the existing occlusion
+        if (props.occlusion.name === 'on' && this.occlusionOffset[0] === 0 && this.occlusionOffset[1] === 0) {
+            if (this.ssaoScale < 1) {
+                this.downsampledDepthTarget.bind();
+                this.downsampleDepthRenderable.render();
+            }
             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();
@@ -297,7 +327,7 @@ var PostprocessingPass = /** @class */ (function () {
         else {
             this.target.bind();
         }
-        var _b = this.webgl, gl = _b.gl, state = _b.state;
+        var _a = this.webgl, gl = _a.gl, state = _a.state;
         state.clearColor(0, 0, 0, 1);
         gl.clear(gl.COLOR_BUFFER_BIT);
         this.renderable.render();
@@ -362,4 +392,3 @@ var AntialiasingPass = /** @class */ (function () {
     return AntialiasingPass;
 }());
 exports.AntialiasingPass = AntialiasingPass;
-//# sourceMappingURL=postprocessing.js.map