Force opaque background when using FXAA

README.md

@@ -74,16 +74,14 @@ Three.js powered Minecraft skin viewer.
 skinview3d supports FXAA (fast approximate anti-aliasing).
 To enable it, you need to replace `SkinViewer` with `FXAASkinViewer`.
 
-It's recommended to use an opaque background when FXAA is enabled,
+You must use an **opaque** background when FXAA is enabled,
-as transparent background may look buggy.
+because FXAA is incompatible with transparent backgrounds.
 
+By default, the background color is white.
+To use a different color:
 ```javascript
-let skinViewer = new skinview3d.FXAASkinViewer({
+let skinViewer = new skinview3d.FXAASkinViewer(...);
-	// we do not use transparent background, so disable alpha to improve performance
+// Set the background color to blue
-	alpha: false,
-	...
-});
-// set the background color
 skinViewer.renderer.setClearColor(0x5a76f3);
 ```
 

examples/index.html

@@ -394,8 +394,7 @@
 
 		function initializeViewer() {
 			skinViewer = new skinview3d.FXAASkinViewer({
-				canvas: document.getElementById("skin_container"),
+				canvas: document.getElementById("skin_container")
-				alpha: false
 			});
 			skinViewer.renderer.setClearColor(0x5a76f3);
 			orbitControl = skinview3d.createOrbitControls(skinViewer);

examples/offscreen-render.html

@@ -44,10 +44,8 @@
             const skinViewer = new skinview3d.FXAASkinViewer({
                 width: 200,
                 height: 300,
-                alpha: false,
                 renderPaused: true
             });
-            skinViewer.renderer.setClearColor(0x5a76f3);
             skinViewer.camera.rotation.x = -0.620;
             skinViewer.camera.rotation.y = 0.534;
             skinViewer.camera.rotation.z = 0.348;

src/fxaa.ts

@@ -11,11 +11,14 @@ export class FXAASkinViewer extends SkinViewer {
     readonly renderPass: RenderPass;
     readonly fxaaPass: ShaderPass;
 
-    /**
-     * Note: FXAA doesn't work well with transparent backgrounds.
-     * It's recommended to use an opaque background and set `options.alpha` to false.
-     */
     constructor(options?: SkinViewerOptions) {
+        // Force options.alpha to false, because FXAA is incompatible with transparent backgrounds
+        if (options === undefined) {
+            options = { alpha: false };
+        } else {
+            options.alpha = false;
+        }
+
         super(options);
         this.composer = new EffectComposer(this.renderer);
         this.renderPass = new RenderPass(this.scene, this.camera);
@@ -23,6 +26,9 @@ export class FXAASkinViewer extends SkinViewer {
         this.composer.addPass(this.renderPass);
         this.composer.addPass(this.fxaaPass);
         this.updateComposerSize();
+
+        // Default background: white
+        this.renderer.setClearColor("white");
     }
 
     setSize(width: number, height: number): void {