update: optimize specular AA.(#2)

uinosoft · Apr 19, 2023 · 1ef16a7 · 1ef16a7
1 parent 72e376c
commit 1ef16a7
Show file tree

Hide file tree

Showing 16 changed files with 733 additions and 13 deletions.
diff --git a/build/t3d.js b/build/t3d.js
diff --git a/build/t3d.min.js b/build/t3d.min.js
diff --git a/build/t3d.module.js b/build/t3d.module.js
diff --git a/examples/files.json b/examples/files.json
@@ -74,7 +74,8 @@
 		"material_vertexcolors",
 		"material_alphamask",
 		"material_clippingplanes",
-		"material_clearcoat"
+		"material_clearcoat",
+		"material_specularAA"
 	],
 	"camera": [
 		"camera_cameras",

diff --git a/examples/material_specularAA.html b/examples/material_specularAA.html
@@ -0,0 +1,134 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta charset="utf-8">
+	<title>t3d - specular AA</title>
+	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+	<link type="text/css" rel="stylesheet" href="main.css">
+
+<body>
+	<div id="info">
+		<a href="" target="_blank">t3d</a> - specular AA
+	</div>
+
+	<script src="./libs/nanobar.js"></script>
+
+	<!-- Import maps polyfill -->
+	<!-- Remove this when import maps will be widely supported -->
+	<script async src="./libs/es-module-shims.js"></script>
+
+	<script type="importmap">
+        {
+            "imports": {
+                "t3d": "../build/t3d.module.js"
+            }
+        }
+    </script>
+
+	<script type="module">
+		import * as t3d from 't3d';
+		import { GLTFLoader } from './jsm/loaders/glTF/GLTFLoader.js';
+		import { TextureCubeLoader } from './jsm/loaders/TextureCubeLoader.js';
+		import { OrbitControls } from './jsm/controls/OrbitControls.js';
+		import { SkyBox } from './jsm/objects/SkyBox.js';
+		import { ForwardRenderer } from './jsm/render/ForwardRenderer.js';
+
+		let width = window.innerWidth || 2;
+		let height = window.innerHeight || 2;
+
+		const canvas = document.createElement('canvas');
+		canvas.width = width * window.devicePixelRatio;
+		canvas.height = height * window.devicePixelRatio;
+		canvas.style.width = width + "px";
+		canvas.style.height = height + "px";
+		document.body.appendChild(canvas);
+
+		const forwardRenderer = new ForwardRenderer(canvas);
+
+		const file = "resources/models/gltf/colt-type_revolver/scene.gltf";
+
+		const cube_texture = new TextureCubeLoader().load([
+			"resources/skybox/Bridge2/posx.jpg",
+			"resources/skybox/Bridge2/negx.jpg",
+			"resources/skybox/Bridge2/posy.jpg",
+			"resources/skybox/Bridge2/negy.jpg",
+			"resources/skybox/Bridge2/posz.jpg",
+			"resources/skybox/Bridge2/negz.jpg"
+		]);
+
+		const scene = new t3d.Scene();
+		scene.environment = cube_texture;
+
+		const sky_box = new SkyBox(cube_texture);
+		sky_box.level = 0;
+
+		const nanobar = new Nanobar();
+		nanobar.el.style.background = "gray";
+
+		const loadingManager = new t3d.LoadingManager(function () {
+			nanobar.go(100);
+			nanobar.el.style.background = "transparent";
+		}, function (url, itemsLoaded, itemsTotal) {
+			if (itemsLoaded < itemsTotal) {
+				nanobar.go(itemsLoaded / itemsTotal * 100);
+			}
+		});
+
+		const loader = new GLTFLoader(loadingManager);
+		loader.autoLogError = false;
+
+		console.time('GLTFLoader');
+		loader.load(file).then(function (result) {
+			console.timeEnd('GLTFLoader');
+			result.root.position.set(0, 0, 0);
+			scene.add(result.root);
+		}).catch(e => console.error(e));
+
+		const ambientLight = new t3d.AmbientLight(0xffffff, 0.5);
+		scene.add(ambientLight);
+
+		const directionalLight = new t3d.DirectionalLight(0xffffff, 1);
+		directionalLight.position.set(10, 10, 0);
+		directionalLight.lookAt(new t3d.Vector3(), new t3d.Vector3(0, 1, 0));
+		scene.add(directionalLight);
+
+		const camera = new t3d.Camera();
+		camera.outputEncoding = t3d.TEXEL_ENCODING_TYPE.GAMMA;
+		camera.gammaFactor = 2;
+		camera.position.set(-0.19411062129111564, 0.32686243457525144, 0.5551263776367967);
+		camera.lookAt(new t3d.Vector3(-0.16641960623619168, -0.057168775531497344, 0.03323746859828566), new t3d.Vector3(0, 1, 0));
+		camera.setPerspective(45 / 180 * Math.PI, width / height, 0.1, 800);
+		camera.add(sky_box);
+		scene.add(camera);
+		window.camera = camera;
+
+		const controller = new OrbitControls(camera, canvas);
+		controller.target.set(-0.16641960623619168, -0.057168775531497344, 0.03323746859828566);
+		window.controller = controller;
+
+		function loop(count) {
+			requestAnimationFrame(loop);
+
+			controller.update();
+
+			forwardRenderer.render(scene, camera);
+		}
+		requestAnimationFrame(loop);
+
+		function onWindowResize() {
+			width = window.innerWidth || 2;
+			height = window.innerHeight || 2;
+
+			camera.setPerspective(45 / 180 * Math.PI, width / height, 1, 8000);
+
+			forwardRenderer.backRenderTarget.resize(width * window.devicePixelRatio, height * window.devicePixelRatio);
+
+			canvas.style.width = width + "px";
+			canvas.style.height = height + "px";
+		}
+		window.addEventListener("resize", onWindowResize, false);
+	</script>
+</body>
+
+</html>
diff --git a/examples/resources/models/gltf/colt-type_revolver/license.txt b/examples/resources/models/gltf/colt-type_revolver/license.txt
@@ -0,0 +1,8 @@
+Model Information:
+* title:	Colt-type revolver
+* source:	https://sketchfab.com/3d-models/colt-type-revolver-d0c9d2c989134fefb623c62b25a51daf
+* author:	Virtual Museums of Małopolska (https://sketchfab.com/WirtualneMuzeaMalopolski)
+
+Model License:
+* license type:	CC0-1.0 (http://creativecommons.org/publicdomain/zero/1.0/)
+* requirements:	Credit is not mandatory. Commercial use is allowed.
diff --git a/examples/resources/models/gltf/colt-type_revolver/scene.bin b/examples/resources/models/gltf/colt-type_revolver/scene.bin