Merge pull request #2088 from Sirahi/postSceneWIP

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, postSceneOrthographic, postScenePerspective, 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;
+  usePostOrthographicScene() {
+    return postSceneOrthographic;
+  },
+  usePostPerspectiveScene() {
+    return postScenePerspective;
   },
   useWorld() {
     return {
@@ -833,7 +836,8 @@ export default () => {
       renderer,
       scene,
       rootScene,
-      postScene,
+      postSceneOrthographic,
+      postScenePerspective,
       camera,
       sceneHighPriority,
       sceneLowPriority,
@@ -1082,4 +1086,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,
+  postSceneOrthographic,
+  postScenePerspective,
   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 {postPerspectiveScene, postOrthographicScene} = postPostProcessScene;
+      if(postPerspectiveScene) {
+        const postRenderPass = new RenderPass(postScenePerspective, camera);
+        composer.addPass(postRenderPass);
+      }
+      if(postOrthographicScene) {
+        const postRenderPass = new RenderPass(postSceneOrthographic, 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 postSceneOrthographic = new THREE.Scene();
+postSceneOrthographic.name = 'postOrthographic';
+const postScenePerspective = new THREE.Scene();
+postScenePerspective.name = 'postPerspective';
 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,
+  postSceneOrthographic,
+  postScenePerspective,
   // 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, postSceneOrthographic, postScenePerspective, 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 'postPerspectiveScene': {
+      return postScenePerspective;
+    }
+    case 'postOrthographicScene': {
+      return postSceneOrthographic;
     }
     default: {
       return scene;