diff --git a/README.md b/README.md index a467084..3d47d12 100644 --- a/README.md +++ b/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, -as transparent background may look buggy. +You must use an **opaque** background when FXAA is enabled, +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({ - // we do not use transparent background, so disable alpha to improve performance - alpha: false, - ... -}); -// set the background color +let skinViewer = new skinview3d.FXAASkinViewer(...); +// Set the background color to blue skinViewer.renderer.setClearColor(0x5a76f3); ``` diff --git a/examples/index.html b/examples/index.html index 7287d78..a6db679 100644 --- a/examples/index.html +++ b/examples/index.html @@ -394,8 +394,7 @@ function initializeViewer() { skinViewer = new skinview3d.FXAASkinViewer({ - canvas: document.getElementById("skin_container"), - alpha: false + canvas: document.getElementById("skin_container") }); skinViewer.renderer.setClearColor(0x5a76f3); orbitControl = skinview3d.createOrbitControls(skinViewer); diff --git a/examples/offscreen-render.html b/examples/offscreen-render.html index 662c209..ccc7518 100644 --- a/examples/offscreen-render.html +++ b/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; diff --git a/src/fxaa.ts b/src/fxaa.ts index a2943d0..baec39a 100644 --- a/src/fxaa.ts +++ b/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 {