From 45cc3cb16353623cbd0aa421be315e7422f0a270 Mon Sep 17 00:00:00 2001 From: KyroVibe Date: Mon, 8 Jul 2024 16:53:08 -0600 Subject: [PATCH 1/4] Added some anti aliasing. Tinkering with more --- fission/.gitignore | 2 + fission/package.json | 3 +- fission/src/mirabuf/MirabufSceneObject.ts | 2 +- fission/src/systems/scene/SceneRenderer.ts | 64 ++++++++++++++++++++-- 4 files changed, 65 insertions(+), 6 deletions(-) diff --git a/fission/.gitignore b/fission/.gitignore index 449d7eb050..92468d7a20 100644 --- a/fission/.gitignore +++ b/fission/.gitignore @@ -25,3 +25,5 @@ dist-ssr *.njsproj *.sln *.sw? + +yarn.lock diff --git a/fission/package.json b/fission/package.json index 256645d327..ef15c621e8 100644 --- a/fission/package.json +++ b/fission/package.json @@ -30,8 +30,9 @@ "async-mutex": "^0.5.0", "colord": "^2.9.3", "framer-motion": "^10.13.1", - "playwright": "^1.45.0", "lygia": "^1.1.3", + "playwright": "^1.45.0", + "postprocessing": "^6.35.6", "react": "^18.2.0", "react-colorful": "^5.6.1", "react-dom": "^18.2.0", diff --git a/fission/src/mirabuf/MirabufSceneObject.ts b/fission/src/mirabuf/MirabufSceneObject.ts index 22a579147f..64ff4c85cf 100644 --- a/fission/src/mirabuf/MirabufSceneObject.ts +++ b/fission/src/mirabuf/MirabufSceneObject.ts @@ -11,7 +11,7 @@ import { LayerReserve } from "@/systems/physics/PhysicsSystem" import Mechanism from "@/systems/physics/Mechanism" import SynthesisBrain from "@/systems/simulation/synthesis_brain/SynthesisBrain" -const DEBUG_BODIES = true +const DEBUG_BODIES = false interface RnDebugMeshes { colliderMesh: THREE.Mesh diff --git a/fission/src/systems/scene/SceneRenderer.ts b/fission/src/systems/scene/SceneRenderer.ts index c37f9bccbd..8f2ed09312 100644 --- a/fission/src/systems/scene/SceneRenderer.ts +++ b/fission/src/systems/scene/SceneRenderer.ts @@ -4,13 +4,14 @@ import SceneObject from "./SceneObject" import WorldSystem from "../WorldSystem" import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js" import MirabufSceneObject from "@/mirabuf/MirabufSceneObject" +import { BlendFunction, DepthCopyPass, DepthDownsamplingPass, EffectComposer, EffectPass, NormalPass, PredicationMode, RenderPass, SMAAEffect, SSAOEffect } from "postprocessing" import vertexShader from '@/shaders/vertex.glsl'; import fragmentShader from '@/shaders/fragment.glsl'; import { Theme } from '@/ui/ThemeContext'; const CLEAR_COLOR = 0x121212 -const GROUND_COLOR = 0x73937e +const GROUND_COLOR = 0x4066c7 let nextSceneObjectId = 1 @@ -20,6 +21,9 @@ class SceneRenderer extends WorldSystem { private _scene: THREE.Scene; private _renderer: THREE.WebGLRenderer; private _skybox: THREE.Mesh; + private _composer: EffectComposer; + + private _antiAliasPass: SMAAEffect; private _sceneObjects: Map @@ -53,7 +57,12 @@ class SceneRenderer extends WorldSystem { this._scene = new THREE.Scene() - this._renderer = new THREE.WebGLRenderer() + this._renderer = new THREE.WebGLRenderer({ // Following parameters are used to optimize post-processing + powerPreference: "high-performance", + antialias: false, + stencil: false, + depth: false + }) this._renderer.setClearColor(CLEAR_COLOR) this._renderer.setPixelRatio(window.devicePixelRatio) this._renderer.shadowMap.enabled = true @@ -119,6 +128,52 @@ class SceneRenderer extends WorldSystem { this._skybox.receiveShadow = false; this._skybox.castShadow = false; this.scene.add(this._skybox); + + // POST PROCESSING: https://github.com/pmndrs/postprocessing + this._composer = new EffectComposer(this._renderer) + this._composer.addPass(new RenderPass(this._scene, this._mainCamera)) + + const normalPass = new NormalPass(this._scene, this._mainCamera) + this._composer.addPass(normalPass) + + let depthPass: DepthDownsamplingPass | undefined; + if (this._renderer.capabilities.isWebGL2) { + depthPass = new DepthDownsamplingPass({ + normalBuffer: normalPass.texture, + resolutionScale: 0.5 + }) + this._composer.addPass(depthPass) + } + + const normalDepthBuffer = this._renderer.capabilities.isWebGL2 ? + depthPass!.texture : undefined; + + // https://github.com/pmndrs/postprocessing/blob/main/demo/src/demos/SSAODemo.js + const ssaoEffect = new SSAOEffect(this._mainCamera, normalPass.texture, { + distanceThreshold: 20 , // Render up to a distance of ~20 world units + distanceFalloff: 2.5, // with an additional ~2.5 units of falloff. + rangeThreshold: 0.3, // Occlusion proximity of ~0.3 world units + rangeFalloff: 0.1, + blendFunction: BlendFunction.MULTIPLY, + distanceScaling: true, + depthAwareUpsampling: true, + luminanceInfluence: 0.7, + minRadiusScale: 0.33, + radius: 0.01, + intensity: 2.7, + bias: 0.025, + fade: 0.01, + samples: 90, + rings: 7, + resolutionScale: 1.5, + normalDepthBuffer: normalDepthBuffer + }) + + // this._composer.addPass(new EffectPass(this._mainCamera, ssaoEffect)) + + this._antiAliasPass = new SMAAEffect() + // this._antiAliasPass.edgeDetectionMaterial.predicationMode = PredicationMode.DEPTH; + this._composer.addPass(new EffectPass(this._mainCamera, this._antiAliasPass)) } public UpdateCanvasSize() { @@ -128,7 +183,7 @@ class SceneRenderer extends WorldSystem { this._mainCamera.updateProjectionMatrix() } - public Update(_: number): void { + public Update(deltaT: number): void { this._sceneObjects.forEach(obj => { obj.Update() }) @@ -148,7 +203,8 @@ class SceneRenderer extends WorldSystem { this._skybox.position.copy(this._mainCamera.position); - this._renderer.render(this._scene, this._mainCamera); + // this._renderer.render(this._scene, this._mainCamera); + this._composer.render(deltaT) } public Destroy(): void { From 01051908305fd2c881f4ffc19070493df2e2dcad Mon Sep 17 00:00:00 2001 From: KyroVibe Date: Tue, 9 Jul 2024 13:08:00 -0600 Subject: [PATCH 2/4] Working on render passes --- fission/src/systems/scene/SceneRenderer.ts | 39 ++-------------------- 1 file changed, 2 insertions(+), 37 deletions(-) diff --git a/fission/src/systems/scene/SceneRenderer.ts b/fission/src/systems/scene/SceneRenderer.ts index 8f2ed09312..602d0849c2 100644 --- a/fission/src/systems/scene/SceneRenderer.ts +++ b/fission/src/systems/scene/SceneRenderer.ts @@ -4,7 +4,7 @@ import SceneObject from "./SceneObject" import WorldSystem from "../WorldSystem" import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js" import MirabufSceneObject from "@/mirabuf/MirabufSceneObject" -import { BlendFunction, DepthCopyPass, DepthDownsamplingPass, EffectComposer, EffectPass, NormalPass, PredicationMode, RenderPass, SMAAEffect, SSAOEffect } from "postprocessing" +import { BlendFunction, BoxBlurPass, DepthCopyPass, DepthDownsamplingPass, EdgeDetectionMode, EffectComposer, EffectPass, NormalPass, OutlineEffect, PredicationMode, RenderPass, SMAAEffect, SSAOEffect } from "postprocessing" import vertexShader from '@/shaders/vertex.glsl'; import fragmentShader from '@/shaders/fragment.glsl'; @@ -136,42 +136,7 @@ class SceneRenderer extends WorldSystem { const normalPass = new NormalPass(this._scene, this._mainCamera) this._composer.addPass(normalPass) - let depthPass: DepthDownsamplingPass | undefined; - if (this._renderer.capabilities.isWebGL2) { - depthPass = new DepthDownsamplingPass({ - normalBuffer: normalPass.texture, - resolutionScale: 0.5 - }) - this._composer.addPass(depthPass) - } - - const normalDepthBuffer = this._renderer.capabilities.isWebGL2 ? - depthPass!.texture : undefined; - - // https://github.com/pmndrs/postprocessing/blob/main/demo/src/demos/SSAODemo.js - const ssaoEffect = new SSAOEffect(this._mainCamera, normalPass.texture, { - distanceThreshold: 20 , // Render up to a distance of ~20 world units - distanceFalloff: 2.5, // with an additional ~2.5 units of falloff. - rangeThreshold: 0.3, // Occlusion proximity of ~0.3 world units - rangeFalloff: 0.1, - blendFunction: BlendFunction.MULTIPLY, - distanceScaling: true, - depthAwareUpsampling: true, - luminanceInfluence: 0.7, - minRadiusScale: 0.33, - radius: 0.01, - intensity: 2.7, - bias: 0.025, - fade: 0.01, - samples: 90, - rings: 7, - resolutionScale: 1.5, - normalDepthBuffer: normalDepthBuffer - }) - - // this._composer.addPass(new EffectPass(this._mainCamera, ssaoEffect)) - - this._antiAliasPass = new SMAAEffect() + this._antiAliasPass = new SMAAEffect({ edgeDetectionMode: EdgeDetectionMode.LUMA }) // this._antiAliasPass.edgeDetectionMaterial.predicationMode = PredicationMode.DEPTH; this._composer.addPass(new EffectPass(this._mainCamera, this._antiAliasPass)) } From 7f4bf5b5bce95258fa14697e7f74421bf84d8f76 Mon Sep 17 00:00:00 2001 From: KyroVibe Date: Wed, 10 Jul 2024 02:44:27 -0600 Subject: [PATCH 3/4] Changed anti alias detection mode --- fission/src/systems/scene/SceneRenderer.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/fission/src/systems/scene/SceneRenderer.ts b/fission/src/systems/scene/SceneRenderer.ts index 602d0849c2..2f2610a60a 100644 --- a/fission/src/systems/scene/SceneRenderer.ts +++ b/fission/src/systems/scene/SceneRenderer.ts @@ -136,7 +136,7 @@ class SceneRenderer extends WorldSystem { const normalPass = new NormalPass(this._scene, this._mainCamera) this._composer.addPass(normalPass) - this._antiAliasPass = new SMAAEffect({ edgeDetectionMode: EdgeDetectionMode.LUMA }) + this._antiAliasPass = new SMAAEffect({ edgeDetectionMode: EdgeDetectionMode.COLOR }) // this._antiAliasPass.edgeDetectionMaterial.predicationMode = PredicationMode.DEPTH; this._composer.addPass(new EffectPass(this._mainCamera, this._antiAliasPass)) } From c262de95d1aba5dea0ff8ad9dbb795a93033cfeb Mon Sep 17 00:00:00 2001 From: KyroVibe Date: Wed, 10 Jul 2024 11:23:15 -0600 Subject: [PATCH 4/4] Removed normal pass, renamed variable --- fission/src/systems/scene/SceneRenderer.ts | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/fission/src/systems/scene/SceneRenderer.ts b/fission/src/systems/scene/SceneRenderer.ts index 2f2610a60a..bfb6bbaf72 100644 --- a/fission/src/systems/scene/SceneRenderer.ts +++ b/fission/src/systems/scene/SceneRenderer.ts @@ -23,7 +23,7 @@ class SceneRenderer extends WorldSystem { private _skybox: THREE.Mesh; private _composer: EffectComposer; - private _antiAliasPass: SMAAEffect; + private _antiAliasPass: EffectPass; private _sceneObjects: Map @@ -133,12 +133,9 @@ class SceneRenderer extends WorldSystem { this._composer = new EffectComposer(this._renderer) this._composer.addPass(new RenderPass(this._scene, this._mainCamera)) - const normalPass = new NormalPass(this._scene, this._mainCamera) - this._composer.addPass(normalPass) - - this._antiAliasPass = new SMAAEffect({ edgeDetectionMode: EdgeDetectionMode.COLOR }) - // this._antiAliasPass.edgeDetectionMaterial.predicationMode = PredicationMode.DEPTH; - this._composer.addPass(new EffectPass(this._mainCamera, this._antiAliasPass)) + const antiAliasEffect = new SMAAEffect({ edgeDetectionMode: EdgeDetectionMode.COLOR }) + this._antiAliasPass = new EffectPass(this._mainCamera, antiAliasEffect) + this._composer.addPass(this._antiAliasPass) } public UpdateCanvasSize() {