support FXAA, close #71

README.md

@@ -16,7 +16,7 @@ Three.js powered Minecraft skin viewer.
   * Automatic model detection (Slim / Default)
 
 # Usage
-[Examples of using the viewer](https://bs-community.github.io/skinview3d/)
+[Example of using skinview3d](https://bs-community.github.io/skinview3d/)
 ```html
 <div id="skin_container"></div>
 <script>
@@ -65,5 +65,21 @@ Three.js powered Minecraft skin viewer.
 </script>
 ```
 
+## Anti-aliasing
+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.
+
+```javascript
+let skinViewer = new skinview3d.FXAASkinViewer(document.getElementById("skin_container"), {
+	// we do not use transparent background, so disable alpha to improve performance
+	alpha: false
+});
+// set the background color
+skinViewer.renderer.setClearColor(0x5a76f3);
+```
+
 # Build
 `npm run build`

examples/index.html

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

src/fxaa.ts

@@ -0,0 +1,41 @@
+import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js";
+import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js";
+import { ShaderPass } from "three/examples/jsm/postprocessing/ShaderPass.js";
+import { FXAAShader } from "three/examples/jsm/shaders/FXAAShader.js";
+import { SkinViewer, SkinViewerOptions } from "./viewer.js";
+
+export class FXAASkinViewer extends SkinViewer {
+
+    readonly composer: EffectComposer;
+    readonly renderPass: RenderPass;
+    readonly fxaaPass: ShaderPass;
+
+    constructor(domElement: Node, options: SkinViewerOptions = {}) {
+        super(domElement, options);
+        this.composer = new EffectComposer(this.renderer);
+        this.renderPass = new RenderPass(this.scene, this.camera);
+        this.fxaaPass = new ShaderPass(FXAAShader);
+        this.composer.addPass(this.renderPass);
+        this.composer.addPass(this.fxaaPass);
+        this.updateComposerSize();
+    }
+
+    setSize(width: number, height: number): void {
+        super.setSize(width, height);
+        if (this.composer !== undefined) {
+            this.updateComposerSize();
+        }
+    }
+
+    private updateComposerSize(): void {
+        this.composer.setSize(this.width, this.height);
+        const pixelRatio = this.renderer.getPixelRatio();
+        this.composer.setPixelRatio(pixelRatio);
+        this.fxaaPass.material.uniforms["resolution"].value.x = 1 / (this.width * pixelRatio);
+        this.fxaaPass.material.uniforms["resolution"].value.y = 1 / (this.height * pixelRatio);
+    }
+
+    protected doRender(): void {
+        this.composer.render();
+    }
+}

src/skinview3d.ts

@@ -2,3 +2,4 @@ export * from "./model.js";
 export * from "./viewer.js";
 export * from "./orbit_controls.js";
 export * from "./animation.js";
+export * from "./fxaa.js";