Post Scene with configurable camera

metaversefile-api.js

@@ -12,7 +12,7 @@ import React from 'react';
 import * as ReactThreeFiber from '@react-three/fiber';
 import * as Z from 'zjs';
 import metaversefile from 'metaversefile';
-import {getRenderer, scene, sceneHighPriority, sceneLowPriority, rootScene, postScene, camera} from './renderer.js';
+import {getRenderer, scene, sceneHighPriority, sceneLowPriority, rootScene, sceneOrthographic, scenePerspective, camera} from './renderer.js';
 import physicsManager from './physics-manager.js';
 import Avatar from './avatars/avatars.js';
 import {world} from './world.js';
@@ -347,8 +347,11 @@ metaversefile.setApi({
   useScene() {
     return scene;
   },
-  usePostScene() {
-    return postScene;
+  useOrthographicScene() {
+    return sceneOrthographic;
+  },
+  usePerspectiveScene() {
+    return scenePerspective;
   },
   useWorld() {
     return {
@@ -833,7 +836,8 @@ export default () => {
       renderer,
       scene,
       rootScene,
-      postScene,
+      sceneOrthographic,
+      scenePerspective,
       camera,
       sceneHighPriority,
       sceneLowPriority,
@@ -1079,4 +1083,4 @@ App.prototype.addModule = function(m) {
   return metaversefile.addModule(this, m);
 };
 
-export default metaversefile;
+export default metaversefile;

post-processing.js

@@ -16,8 +16,10 @@ import {
   getRenderer,
   getComposer,
   rootScene,
-  postScene,
+  sceneOrthographic,
+  scenePerspective,
   camera,
+  orthographicCamera,
 } from './renderer.js';
 // import {rigManager} from './rig.js';
 import {world} from './world.js';
@@ -228,7 +230,7 @@ function setPasses(rendersettings) {
   composer.addPass(webaverseRenderPass);
 
   if (rendersettings) {
-    const {ssao, dof, hdr, bloom, enablePostScene} = rendersettings;
+    const {ssao, dof, hdr, bloom, postPostProcessScene} = rendersettings;
     // console.log('got', ssao, dof, hdr, bloom);
 
     if (ssao) {
@@ -250,9 +252,16 @@ function setPasses(rendersettings) {
       const bloomPass = makeBloomPass(bloom);
       composer.addPass(bloomPass);
     }
-    if (enablePostScene) {
-      const postRenderPass = new RenderPass(postScene, camera);
-      composer.addPass(postRenderPass);
+    if (postPostProcessScene) {
+      const {perspectiveScene, orthographicScene} = postPostProcessScene;
+      if(perspectiveScene) {
+        const postRenderPass = new RenderPass(scenePerspective, camera);
+        composer.addPass(postRenderPass);
+      }
+      if(orthographicScene) {
+        const postRenderPass = new RenderPass(sceneOrthographic, orthographicCamera);
+        composer.addPass(postRenderPass);
+      }
     }
   }
 
@@ -270,4 +279,4 @@ export {
   // makeBloomPass,
   // makeEncodingPass,
   setPasses,
-};
+};

renderer.js

@@ -88,8 +88,10 @@ sceneLowPriority.name = 'lowPriorioty';
 const rootScene = new THREE.Scene();
 rootScene.name = 'root';
 rootScene.autoUpdate = false;
-const postScene = new THREE.Scene();
-postScene.name = 'postScene';
+const sceneOrthographic = new THREE.Scene();
+sceneOrthographic.name = 'orthographic';
+const scenePerspective = new THREE.Scene();
+scenePerspective.name = 'perspective';
 rootScene.add(sceneHighPriority);
 rootScene.add(scene);
 rootScene.add(sceneLowPriority);
@@ -113,7 +115,7 @@ dolly.add(camera);
 // dolly.add(avatarCamera);
 scene.add(dolly);
 
-// const orthographicCamera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0.1, 100);
+const orthographicCamera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0.01, 100);
 // scene.add(orthographicCamera);
 
 window.addEventListener('resize', e => {
@@ -178,10 +180,11 @@ export {
   getComposer,
   scene,
   rootScene,
-  postScene,
+  sceneOrthographic,
+  scenePerspective,
   // avatarScene,
   camera,
-  // orthographicCamera,
+  orthographicCamera,
   // avatarCamera,
   dolly,
   /*orbitControls, renderer2,*/
@@ -190,4 +193,4 @@ export {
   // iframeContainer,
   // iframeContainer2,
   // appManager,
-};
+};

world.js

@@ -12,7 +12,7 @@ import hpManager from './hp-manager.js';
 import {AppManager} from './app-manager.js';
 // import {getState, setState} from './state.js';
 // import {makeId} from './util.js';
-import {scene, postScene, sceneHighPriority, sceneLowPriority} from './renderer.js';
+import {scene, sceneOrthographic, scenePerspective, sceneHighPriority, sceneLowPriority} from './renderer.js';
 import metaversefileApi from 'metaversefile';
 import {worldMapName, appsMapName, playersMapName} from './constants.js';
 import {playersManager} from './players-manager.js';
@@ -301,8 +301,11 @@ const _getBindSceneForRenderPriority = renderPriority => {
     case 'low': {
       return sceneLowPriority;
     }
-    case 'postScene': {
-      return postScene;
+    case 'perspectiveScene': {
+      return scenePerspective;
+    }
+    case 'orthographicScene': {
+      return sceneOrthographic;
     }
     default: {
       return scene;