improved screendoor transparency with multi-sample

src/mol-gl/renderable/schema.ts

@@ -159,6 +159,7 @@ export const GlobalUniformSchema = {
     uPixelRatio: UniformSpec('f'),
     uViewportHeight: UniformSpec('f'),
     uViewport: UniformSpec('v4'),
+    uViewOffset: UniformSpec('v2'),
 
     uCameraPosition: UniformSpec('v3'),
     uNear: UniformSpec('f'),

src/mol-gl/renderer.ts

@@ -9,7 +9,7 @@ import { Camera } from '../mol-canvas3d/camera';
 
 import Scene from './scene';
 import { WebGLContext } from './webgl/context';
-import { Mat4, Vec3, Vec4 } from '../mol-math/linear-algebra';
+import { Mat4, Vec3, Vec4, Vec2 } from '../mol-math/linear-algebra';
 import { Renderable } from './renderable';
 import { Color } from '../mol-util/color';
 import { ValueCell } from '../mol-util';
@@ -73,6 +73,8 @@ namespace Renderer {
         const modelViewProjection = Mat4.mul(Mat4.identity(), modelView, camera.projection)
         const invModelViewProjection = Mat4.invert(Mat4.identity(), modelViewProjection)
 
+        const viewOffset = camera.viewOffset.enabled ? Vec2.create(camera.viewOffset.offsetX * 16, camera.viewOffset.offsetY * 16) : Vec2()
+
         const globalUniforms: GlobalUniformValues = {
             uModel: ValueCell.create(Mat4.identity()),
             uView: ValueCell.create(camera.view),
@@ -88,6 +90,7 @@ namespace Renderer {
             uPixelRatio: ValueCell.create(ctx.pixelRatio),
             uViewportHeight: ValueCell.create(viewport.height),
             uViewport: ValueCell.create(Viewport.toVec4(Vec4(), viewport)),
+            uViewOffset: ValueCell.create(viewOffset),
 
             uLightIntensity: ValueCell.create(p.lightIntensity),
             uAmbientIntensity: ValueCell.create(p.ambientIntensity),
@@ -165,6 +168,7 @@ namespace Renderer {
             ValueCell.update(globalUniforms.uInvModelViewProjection, Mat4.invert(invModelViewProjection, modelViewProjection))
 
             ValueCell.update(globalUniforms.uIsOrtho, camera.state.mode === 'orthographic' ? 1 : 0)
+            ValueCell.update(globalUniforms.uViewOffset, camera.viewOffset.enabled ? Vec2.set(viewOffset, camera.viewOffset.offsetX * 16, camera.viewOffset.offsetY * 16) : Vec2.set(viewOffset, 0, 0))
 
             ValueCell.update(globalUniforms.uCameraPosition, camera.state.position)
             ValueCell.update(globalUniforms.uFar, camera.state.far)

src/mol-gl/shader/chunks/assign-material-color.glsl.ts

@@ -23,6 +23,9 @@ export default `
     float ta = 1.0 - vTransparency;
     float at = 0.0;
 
+    // shift by view-offset during multi-sample rendering to allow for blending
+    vec2 coord = gl_FragCoord.xy + uViewOffset * 0.25;
+
     #if defined(dTransparencyVariant_single)
         const mat4 thresholdMatrix = mat4(
             1.0 / 17.0,  9.0 / 17.0,  3.0 / 17.0, 11.0 / 17.0,
@@ -30,9 +33,9 @@ export default `
             4.0 / 17.0, 12.0 / 17.0,  2.0 / 17.0, 10.0 / 17.0,
             16.0 / 17.0,  8.0 / 17.0, 14.0 / 17.0,  6.0 / 17.0
         );
-        at = thresholdMatrix[int(intMod(gl_FragCoord.x, 4.0))][int(intMod(gl_FragCoord.y, 4.0))];
+        at = thresholdMatrix[int(intMod(coord.x, 4.0))][int(intMod(coord.y, 4.0))];
     #elif defined(dTransparencyVariant_multi)
-        at = fract(dot(vec3(gl_FragCoord.xy, vGroup + 0.5), vec3(2.0, 7.0, 23.0) / 17.0f));
+        at = fract(dot(vec3(coord, vGroup + 0.5), vec3(2.0, 7.0, 23.0) / 17.0f));
     #endif
 
     if (ta < 0.99 && (ta < 0.01 || ta < at)) discard;

src/mol-gl/shader/chunks/common-frag-params.glsl.ts

@@ -9,6 +9,8 @@ varying float vMarker;
 
 varying vec3 vViewPosition;
 
+uniform vec2 uViewOffset;
+
 uniform float uFogNear;
 uniform float uFogFar;
 uniform vec3 uFogColor;