Add bloom effect

Remove unnecessary dependencies

Author: JLChnToZ

assets/i18n/en.json

@@ -4,6 +4,7 @@
   "info": "Model Info",
   "lights": "Toggle Lights",
   "rotate": "Toggle Auto Rotate",
+  "bloom": "Toggle Bloom Effect",
   "hint": "Drop VRM and VMD file to the screen to view them.",
   "fps": "Frames Per Second",
   "draw-call": "Draw Calls Per Frame",

assets/i18n/ja.json

@@ -4,9 +4,10 @@
   "info": "ﾓﾃﾞﾙ情報",
   "lights": "照明ｽｲｯﾁ",
   "rotate": "自動回転ｽｲｯﾁ",
+  "bloom": "ﾌﾞﾙｰﾑ効果ｽｲｯﾁ",
   "hint": "VRM と VMD ﾌｧｲﾙを画面にﾄﾞﾛｯﾌﾟして表示してください。",
-  "fps": "1秒あたりのフレーム数",
-  "draw-call": "ドローコール",
+  "fps": "1秒あたりのﾌﾚｰﾑ数",
+  "draw-call": "ﾄﾞﾛｰｺｰﾙ",
   "face-count": "三角形数",
   "ok": "OK",
   "mata_title": "{{title}} の情報",

assets/i18n/zh-cn.json

@@ -4,6 +4,7 @@
   "info": "模型信息",
   "lights": "场景灯光开关",
   "rotate": "自动旋转开关",
+  "bloom": "发光效果开关",
   "hint": "请把 VRM 和 VMD 文件拖曳到画面中间以进行预览。",
   "fps": "每秒帧数",
   "draw-call": "绘制指令调用次数 (每帧)",

assets/i18n/zh.json

@@ -4,6 +4,7 @@
   "info": "模型資訊",
   "lights": "場景燈光開關",
   "rotate": "自動旋轉開關",
+  "bloom": "發光效果開關",
   "hint": "請把 VRM 和 VMD 檔拖曳到畫面中間以進行預覽。",
   "fps": "每秒影格數",
   "draw-call": "繪製指令呼叫次數 (每影格)",

package.json

@@ -27,7 +27,6 @@
     "@types/resize-observer-browser": "latest",
     "@types/three": "latest",
     "@types/webpack-env": "latest",
-    "@types/webxr": "^0.2.1",
     "dseg": "latest",
     "hyperscript": "latest",
     "i18next": "latest",

src/global.d.ts

@@ -1,4 +1,14 @@
-declare module "mmd-parser" {
+declare module '__global' {
+  import { Navigator as NavigatorWithXR, Window as WindowWithXR } from 'three';
+  export {};
+  global {
+    // Imports WebXR interface
+    interface Window extends WindowWithXR {}
+    interface Navigator extends NavigatorWithXR {}
+  }
+}
+
+declare module 'mmd-parser' {
   export const CharsetEncoder: any;
   export class Parser {
     parsePmd(buffer: ArrayBufferLike, leftToRight?: boolean): any;

src/host/index.ts

@@ -75,6 +75,10 @@ export function toggleAutoRotate() {
   return void workerService.trigger('toggleRotate');
 }
 
+export function toggleBloom() {
+  return void workerService.trigger('toggleBloom');
+}
+
 observeVisibilty.subscribe(
   state => workerService.trigger('enable', state === 'visible'),
 );

src/index.html

@@ -26,6 +26,7 @@
       <a class="item" id="info" data-tooltip-lang="info"><i class="notice circle icon"></i></a>
       <div class="divider item"></div>
       <a class="item" id="lights" data-tooltip-lang="lights"><i class="lightbulb icon"></i></a>
+      <a class="item" id="bloom" data-tooltip-lang="bloom"><i class="sun icon"></i></a>
       <a class="item" id="rotate" data-tooltip-lang="rotate"><i class="repeat icon"></i></a>
     </span>
     <form class="hidden">

src/main.ts

@@ -1,7 +1,7 @@
 import './main.css';
 import './i18n';
 import { ajax } from 'rxjs/ajax';
-import { canvas, loadAnimation, loadModel, toggleAutoRotate, toggleLights } from './host';
+import { canvas, loadAnimation, loadModel, toggleAutoRotate, toggleBloom, toggleLights } from './host';
 import { setAutoShown, showMoreInfo } from './host/meta-display';
 import registerStats from './host/status';
 import { registerDropZone } from './utils/drag-drop';
@@ -95,6 +95,9 @@ if (searchParams.has('dark'))
 if (searchParams.has('noinfo'))
   setAutoShown(false);
 
+if (searchParams.has('nobloom'))
+  toggleBloom();
+
 const vrmUrl = searchParams.get('vrm');
 if (vrmUrl)
   loadingPromises.push((async () => {
@@ -141,6 +144,7 @@ if (searchParams.has('nocontrols'))
   workerService.trigger('enableControls', false);
 
 document.querySelector('#lights')?.addEventListener('click', toggleLights);
+document.querySelector('#bloom')?.addEventListener('click', toggleBloom);
 document.querySelector('#rotate')?.addEventListener('click', toggleAutoRotate);
 const fileSelect = document.querySelector<HTMLInputElement>('#selectfile');
 document.querySelector('#open')?.addEventListener('click', () => fileSelect?.click());

src/utils/xr-detect.ts

@@ -1,7 +1,3 @@
-import { Navigator } from 'webxr';
-
-declare var navigator: Navigator;
-
 export const isSupported = (async ({ xr }) => {
   if (!xr) return false;
   return xr.isSessionSupported('immersive-vr');

src/worker/scene/controls/xr-controls.ts

@@ -1,16 +1,11 @@
-import { Navigator as XRNavigator, XRSession } from 'three';
+import { WorkerMessageService } from '../../../utils/message-service';
+import { isSupported } from '../../../utils/xr-detect';
+import { XRSession } from 'three';
 import { renderer } from '../renderer';
 import { isXR } from './common';
 
-declare var navigator: Navigator & XRNavigator;
-
 let promise: Promise<boolean> | undefined;
 
-export const supported = (async ({ xr }) => {
-  if (!xr) return false;
-  return xr.isSessionSupported('immersive-vr');
-})(navigator);
-
 function xrSessionEnd() {
   if (!renderer) return;
   const xrManager = renderer.xr;
@@ -25,16 +20,15 @@ export function enableXR(enable?: boolean) {
 
 async function execEnableXR(enable?: boolean) {
   console.log(navigator);
-  if (!renderer || !navigator.xr || !await supported) {
-    console.log('Boo, not supported :(');
+  if (!renderer || !navigator.xr || !await isSupported) {
+    WorkerMessageService.host.trigger('warn', 'Failed to initialize webXR.');
     return false;
   }
   const { xr } = navigator;
   const xrManager = renderer.xr;
   if (enable == null)
     enable = !xrManager.enabled;
   if (enable && !xrManager.enabled) {
-    console.log('Trying to enable VR');
     let session: XRSession | undefined;
     try {
       session = await xr.requestSession('immersive-vr', {

src/worker/scene/index.ts

@@ -2,9 +2,9 @@ import { Subject } from 'rxjs';
 import { take } from 'rxjs/operators';
 import { initWorkerContext, remoteCanvasObservable } from '../../utils/remote-canvas';
 import { camera } from './camera';
-import { scene } from './scene';
 import { init as initLights } from './lights';
-import { init as initRenderer, renderer } from './renderer';
+import { init as initRenderer } from './renderer';
+import { updateSize, init as initPostProcessing, render } from './post-processing';
 import { init as initControls, controls, targetPosition, enableOrbit, enableXR } from './controls';
 import { setCenter } from './floor';
 import { WebGLRenderer } from 'three';
@@ -17,8 +17,9 @@ let lastStatsUpdate = 0;
 let controlsEnabled = true;
 
 const loopManager = new LoopManager(deltaTime => {
-  deltaTimeObservable.next(deltaTime / 1000);
-  renderer?.render(scene, camera);
+  deltaTime /= 1000;
+  deltaTimeObservable.next(deltaTime);
+  render(deltaTime);
   frameCount++;
 }, true);
 
@@ -29,14 +30,15 @@ remoteCanvasObservable.pipe(take(1)).subscribe(canvas => {
     (self as any).document = {};
   const renderer = initRenderer(canvas.undelyOffscreenCanvas);
   const controls = initControls(canvas, deltaTimeObservable, true);
+  initPostProcessing();
   handleResize(canvas.width, canvas.height);
   deltaTimeObservable.subscribe(() => setCenter(controls.target));
   setInterval(notifyRendererStats, 1000, renderer);
 });
 initWorkerContext();
 
 export function handleResize(width: number, height: number) {
-  renderer?.setSize(width, height, false);
+  updateSize(width, height);
   camera.aspect = width / height;
   camera.updateProjectionMatrix();
 }

src/worker/scene/lights.ts

@@ -8,7 +8,7 @@ scene.background = new Color(bgColor);
 scene.fog = new Fog(bgColor, 3, 10);
 
 let targetIntensity = 1;
-let currentIntensity = 0;
+export let currentIntensity = 0;
 const ambiantLight = new HemisphereLight(0xffffff, 0x444444);
 ambiantLight.position.set(0, 20, 0);
 scene.add(ambiantLight);

src/worker/scene/post-processing.ts

@@ -0,0 +1,45 @@
+import { Vector2 } from 'three';
+import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer';
+import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass';
+import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass';
+import { WorkerMessageService } from '../../utils/message-service';
+
+import { renderer } from './renderer';
+import { camera } from './camera';
+import { scene } from './scene';
+import { currentIntensity } from './lights';
+
+const renderPass = new RenderPass(scene, camera);
+let composer: EffectComposer | undefined;
+let bloomOn = true;
+
+const bloomPass = new UnrealBloomPass(new Vector2(2048, 2048), 0, 1, 0.3);
+
+export function init() {
+  if (composer || !renderer) return;
+  composer = new EffectComposer(renderer);
+  composer.addPass(renderPass);
+  composer.addPass(bloomPass);
+}
+
+export function updateSize(width: number, height: number) {
+  renderer?.setSize(width, height, false);
+  composer?.setSize(width, height);
+  bloomPass.setSize(width, height);
+}
+
+export function render(deltaTime?: number) {
+  bloomPass.strength = bloomOn ? Math.max(0, 1 - (currentIntensity ** 0.3)) : 0;
+  composer?.render(deltaTime);
+}
+
+export function setBloomEnabled(value: boolean) {
+  bloomOn = value;
+}
+
+export function toggleBloom() {
+  bloomOn = !bloomOn;
+}
+
+
+WorkerMessageService.host.on({ setBloomEnabled, toggleBloom });

yarn.lock

@@ -219,11 +219,6 @@
     "@types/webpack-sources" "*"
     source-map "^0.6.0"
 
-"@types/webxr@^0.2.1":
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/@types/webxr/-/webxr-0.2.1.tgz#58eab531ac17d761894cdea63c7d86b3f31cc0d6"
-  integrity sha512-1WLx0tQUXJKqdIeTPLZPMOzeI+ZdhCdp/iqB8Ke8bWG+tfvSuyWow+MM6Rl/7NGabW1rcwJyO3y3gjnbo2AVvA==
-
 "@webassemblyjs/[email protected]":
   version "1.11.0"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.0.tgz#a5aa679efdc9e51707a4207139da57920555961f"