fix smaa viewport handling

src/mol-canvas3d/passes/smaa.ts

@@ -12,7 +12,7 @@ import { WebGLContext } from '../../mol-gl/webgl/context';
 import { createComputeRenderItem } from '../../mol-gl/webgl/render-item';
 import { RenderTarget } from '../../mol-gl/webgl/render-target';
 import { createTexture, loadImageTexture, Texture } from '../../mol-gl/webgl/texture';
-import { Vec2 } from '../../mol-math/linear-algebra';
+import { Vec2, Vec4 } from '../../mol-math/linear-algebra';
 import { ValueCell } from '../../mol-util';
 import { ParamDefinition as PD } from '../../mol-util/param-definition';
 import { blend_vert } from '../../mol-gl/shader/smaa/blend.vert';
@@ -76,6 +76,10 @@ export class SmaaPass {
 
         state.clearColor(0, 0, 0, 1);
         gl.clear(gl.COLOR_BUFFER_BIT);
+
+        ValueCell.update(this.edgesRenderable.values.uViewport, Viewport.toVec4(this.edgesRenderable.values.uViewport.ref.value, viewport));
+        ValueCell.update(this.weightsRenderable.values.uViewport, Viewport.toVec4(this.weightsRenderable.values.uViewport.ref.value, viewport));
+        ValueCell.update(this.blendRenderable.values.uViewport, Viewport.toVec4(this.blendRenderable.values.uViewport.ref.value, viewport));
     }
 
     setSize(width: number, height: number) {
@@ -141,6 +145,7 @@ const EdgesSchema = {
     ...QuadSchema,
     tColor: TextureSpec('texture', 'rgba', 'ubyte', 'linear'),
     uTexSizeInv: UniformSpec('v2'),
+    uViewport: UniformSpec('v4'),
 
     dEdgeThreshold: DefineSpec('number')
 };
@@ -155,6 +160,7 @@ function getEdgesRenderable(ctx: WebGLContext, colorTexture: Texture): EdgesRend
         ...QuadValues,
         tColor: ValueCell.create(colorTexture),
         uTexSizeInv: ValueCell.create(Vec2.create(1 / width, 1 / height)),
+        uViewport: ValueCell.create(Vec4()),
 
         dEdgeThreshold: ValueCell.create(0.1),
     };
@@ -173,6 +179,7 @@ const WeightsSchema = {
     tArea: TextureSpec('texture', 'rgb', 'ubyte', 'linear'),
     tSearch: TextureSpec('texture', 'rgba', 'ubyte', 'nearest'),
     uTexSizeInv: UniformSpec('v2'),
+    uViewport: UniformSpec('v4'),
 
     dMaxSearchSteps: DefineSpec('number'),
 };
@@ -192,6 +199,7 @@ function getWeightsRenderable(ctx: WebGLContext, edgesTexture: Texture): Weights
         tArea: ValueCell.create(areaTexture),
         tSearch: ValueCell.create(searchTexture),
         uTexSizeInv: ValueCell.create(Vec2.create(1 / width, 1 / height)),
+        uViewport: ValueCell.create(Vec4()),
 
         dMaxSearchSteps: ValueCell.create(8),
     };
@@ -213,6 +221,7 @@ const BlendSchema = {
     tColor: TextureSpec('texture', 'rgba', 'ubyte', 'linear'),
     tWeights: TextureSpec('texture', 'rgba', 'ubyte', 'linear'),
     uTexSizeInv: UniformSpec('v2'),
+    uViewport: UniformSpec('v4'),
 };
 const BlendShaderCode = ShaderCode('smaa-blend', blend_vert, blend_frag);
 type BlendRenderable = ComputeRenderable<Values<typeof BlendSchema>>
@@ -226,6 +235,7 @@ function getBlendRenderable(ctx: WebGLContext, colorTexture: Texture, weightsTex
         tColor: ValueCell.create(colorTexture),
         tWeights: ValueCell.create(weightsTexture),
         uTexSizeInv: ValueCell.create(Vec2.create(1 / width, 1 / height)),
+        uViewport: ValueCell.create(Vec4()),
     };
 
     const schema = { ...BlendSchema };

src/mol-gl/shader/postprocessing.frag.ts

@@ -129,8 +129,6 @@ void main(void) {
         }
     #endif
 
-
-
     gl_FragColor = color;
 }
 `;

src/mol-gl/shader/smaa/blend.vert.ts

@@ -14,6 +14,7 @@ attribute vec2 aPosition;
 uniform vec2 uQuadScale;
 
 uniform vec2 uTexSizeInv;
+uniform vec4 uViewport;
 
 varying vec2 vUv;
 varying vec4 vOffset[2];
@@ -24,7 +25,9 @@ void SMAANeighborhoodBlendingVS(vec2 texCoord) {
 }
 
 void main() {
-    vUv = (aPosition + 1.0) * 0.5;
+    vec2 scale = uViewport.zw * uTexSizeInv;
+    vec2 shift = uViewport.xy * uTexSizeInv;
+    vUv = (aPosition + 1.0) * 0.5 * scale + shift;
     SMAANeighborhoodBlendingVS(vUv);
     vec2 position = aPosition * uQuadScale - vec2(1.0, 1.0) + uQuadScale;
     gl_Position = vec4(position, 0.0, 1.0);

src/mol-gl/shader/smaa/edges.vert.ts

@@ -14,9 +14,10 @@ attribute vec2 aPosition;
 uniform vec2 uQuadScale;
 
 uniform vec2 uTexSizeInv;
+uniform vec4 uViewport;
 
 varying vec2 vUv;
-varying vec4 vOffset[ 3 ];
+varying vec4 vOffset[3];
 
 void SMAAEdgeDetectionVS(vec2 texCoord) {
     vOffset[0] = texCoord.xyxy + uTexSizeInv.xyxy * vec4(-1.0, 0.0, 0.0, 1.0); // WebGL port note: Changed sign in W component
@@ -25,7 +26,9 @@ void SMAAEdgeDetectionVS(vec2 texCoord) {
 }
 
 void main() {
-    vUv = (aPosition + 1.0) * 0.5;
+    vec2 scale = uViewport.zw * uTexSizeInv;
+    vec2 shift = uViewport.xy * uTexSizeInv;
+    vUv = (aPosition + 1.0) * 0.5 * scale + shift;
     SMAAEdgeDetectionVS(vUv);
     vec2 position = aPosition * uQuadScale - vec2(1.0, 1.0) + uQuadScale;
     gl_Position = vec4(position, 0.0, 1.0);

src/mol-gl/shader/smaa/weights.vert.ts

@@ -14,6 +14,7 @@ attribute vec2 aPosition;
 uniform vec2 uQuadScale;
 
 uniform vec2 uTexSizeInv;
+uniform vec4 uViewport;
 
 varying vec2 vUv;
 varying vec4 vOffset[3];
@@ -31,7 +32,9 @@ void SMAABlendingWeightCalculationVS(vec2 texCoord) {
 }
 
 void main() {
-    vUv = (aPosition + 1.0) * 0.5;
+    vec2 scale = uViewport.zw * uTexSizeInv;
+    vec2 shift = uViewport.xy * uTexSizeInv;
+    vUv = (aPosition + 1.0) * 0.5 * scale + shift;
     SMAABlendingWeightCalculationVS(vUv);
     vec2 position = aPosition * uQuadScale - vec2(1.0, 1.0) + uQuadScale;
     gl_Position = vec4(position, 0.0, 1.0);