Fix Issue #812

There was a subtle yet stupid bug in the antialiasing code that broke background transparency.
3dmol · Nov 6, 2024 · 9016aa7 · 9016aa7
1 parent d538e4b
commit 9016aa7
Show file tree

Hide file tree

Showing 6 changed files with 8 additions and 8 deletions.
diff --git a/src/WebGL/Renderer.ts b/src/WebGL/Renderer.ts
@@ -902,6 +902,7 @@ export class Renderer {
     if (this._bitmap) {
       const bitmap = this._offscreen.transferToImageBitmap();
       this._bitmap.transferFromImageBitmap(bitmap);
+      bitmap.close();
     }
   }
 
@@ -2258,7 +2259,7 @@ export class Renderer {
         }
         if (!material) continue;
 
-        if (useBlending) this.setBlending(true);
+        this.setBlending(useBlending);
 
         this.setDepthTest(material.depthTest);
         this.setDepthWrite(material.depthWrite);

diff --git a/src/WebGL/shaders/lib/screenaa/screenaa.frag b/src/WebGL/shaders/lib/screenaa/screenaa.frag
@@ -18,7 +18,7 @@ vec4 applyFXAA(vec2 fragCoord, highp sampler2D tex)
     vec3 rgbNE = texture2D(tex, fragCoord + vec2(1.0, -1.0) * inverseVP).xyz;
     vec3 rgbSW = texture2D(tex, fragCoord + vec2(-1.0, 1.0) * inverseVP).xyz;
     vec3 rgbSE = texture2D(tex, fragCoord + vec2(1.0, 1.0) * inverseVP).xyz;
-    vec4 rgbM  = texture2D(tex, fragCoord  * inverseVP);
+    vec4 rgbM  = texture2D(tex, fragCoord );
     vec3 luma = vec3(0.299, 0.587, 0.114);
     float lumaNW = dot(rgbNW, luma);
     float lumaNE = dot(rgbNE, luma);
@@ -52,6 +52,7 @@ vec4 applyFXAA(vec2 fragCoord, highp sampler2D tex)
         color = vec4(rgbA, rgbM.w);
     else
         color = vec4(rgbB, rgbM.w);
+
     return color;
 }
 

diff --git a/src/WebGL/shaders/lib/sphereimposter/sphereimposter.frag b/src/WebGL/shaders/lib/sphereimposter/sphereimposter.frag
@@ -44,7 +44,5 @@ void main() {
     gl_FragColor = vec4(color, opacity*opacity );
     float fogFactor = smoothstep( fogNear, fogFar, gl_FragDepthEXT/gl_FragCoord.w );
     gl_FragColor = mix( gl_FragColor, vec4( fogColor, gl_FragColor.w ), fogFactor );
-
-
 }
 
diff --git a/tests/auto/resemble.js b/tests/auto/resemble.js
@@ -24,7 +24,7 @@ URL: https://github.com/Huddle/Resemble.js
 	};
 
 	function colorsDistance(c1, c2){
-		return (Math.abs(c1.r - c2.r) + Math.abs(c1.g - c2.g) + Math.abs(c1.b - c2.b))/3;
+		return (Math.abs(c1.r - c2.r) + Math.abs(c1.g - c2.g) + Math.abs(c1.b - c2.b) + Math.abs(c1.a - c2.a))/4;
 	}
 
 	var errorPixelTransform = {

diff --git a/tests/glcheck/reference-images/tests-glcheck-render-tests-testbackalpha.html.png b/tests/glcheck/reference-images/tests-glcheck-render-tests-testbackalpha.html.png
diff --git a/tests/webpages/multi.html b/tests/webpages/multi.html
@@ -5,11 +5,11 @@
 
 <body>
       <script src="../../build/3Dmol.js"></script>
-      <div class='viewer_3Dmoljs' id="20" style="height: 100%; width: 100%; z-index: 100; float: true; position: absolute;" data-pdb='3erk'
+      <div class='viewer_3Dmoljs' id="20" style="height: 100%; width: 100%; z-index: 100; float: true; position: absolute;" data-pdb='3erk' data-spin="axis:y"
       data-style='cartoon' data-backgroundalpha=".25" data-backgroundcolor='green'></div>     
-      <div class='viewer_3Dmoljs' id="1" style="height: 300px; width: 300px; display: inline-block; position: relative;" data-cid='2519'
+      <div class='viewer_3Dmoljs' id="1" style="height: 300px; width: 300px; display: inline-block; position: relative;" data-cid='2519'  data-spin="axis:y"
             data-style='stick' data-spin='axis:z;speed:100'></div>
-      <div class='viewer_3Dmoljs' id="2" style="height: 300px; width: 300px; display: inline-block; position: relative;" data-cid='2518'
+      <div class='viewer_3Dmoljs' id="2" style="height: 300px; width: 300px; display: inline-block; position: relative;" data-cid='2518' 
             data-style='stick'></div>
       <div class='viewer_3Dmoljs' id="3" style="height: 300px; width: 300px; display: inline-block; position: relative;" data-cid='1000'
             data-style='stick'></div>