diff --git a/fission/.gitignore b/fission/.gitignore index a138326143..a8a3e12932 100644 --- a/fission/.gitignore +++ b/fission/.gitignore @@ -26,3 +26,5 @@ dist-ssr *.njsproj *.sln *.sw? + +yarn.lock diff --git a/fission/package.json b/fission/package.json index a8849746a6..7a8692a05d 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/Synthesis.tsx b/fission/src/Synthesis.tsx index 63735ea04e..9edd6954a1 100644 --- a/fission/src/Synthesis.tsx +++ b/fission/src/Synthesis.tsx @@ -75,7 +75,7 @@ function Synthesis() { const { openPanel, closePanel, closeAllPanels, getActivePanelElements } = usePanelManager(initialPanels) const { showTooltip } = useTooltipManager() - const { currentTheme, applyTheme } = useTheme() + const { currentTheme, applyTheme, defaultTheme } = useTheme() useEffect(() => { applyTheme(currentTheme) @@ -128,6 +128,9 @@ function Synthesis() { World.UpdateWorld() } mainLoop() + + World.SceneRenderer.updateSkyboxColors(defaultTheme) + // Cleanup return () => { // TODO: Teardown literally everything diff --git a/fission/src/mirabuf/MirabufSceneObject.ts b/fission/src/mirabuf/MirabufSceneObject.ts index 26f99ea126..be6ae81225 100644 --- a/fission/src/mirabuf/MirabufSceneObject.ts +++ b/fission/src/mirabuf/MirabufSceneObject.ts @@ -13,7 +13,7 @@ import SynthesisBrain from "@/systems/simulation/synthesis_brain/SynthesisBrain" import InputSystem from "@/systems/input/InputSystem" import TransformGizmos from "@/ui/components/TransformGizmos" -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 644403e7f6..efc9c925e1 100644 --- a/fission/src/systems/scene/SceneRenderer.ts +++ b/fission/src/systems/scene/SceneRenderer.ts @@ -3,6 +3,7 @@ import { TransformControls } from "three/examples/jsm/controls/TransformControls import SceneObject from "@/systems/scene/SceneObject" import WorldSystem from "@/systems/WorldSystem" import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js" +import { EdgeDetectionMode, EffectComposer, EffectPass, RenderPass, SMAAEffect } from "postprocessing" import vertexShader from "@/shaders/vertex.glsl" import fragmentShader from "@/shaders/fragment.glsl" @@ -10,7 +11,7 @@ import { Theme } from "@/ui/ThemeContext" import InputSystem from "../input/InputSystem" const CLEAR_COLOR = 0x121212 -const GROUND_COLOR = 0x73937e +const GROUND_COLOR = 0x4066c7 let nextSceneObjectId = 1 @@ -19,6 +20,9 @@ class SceneRenderer extends WorldSystem { private _scene: THREE.Scene private _renderer: THREE.WebGLRenderer private _skybox: THREE.Mesh + private _composer: EffectComposer + + private _antiAliasPass: EffectPass private _sceneObjects: Map @@ -52,7 +56,13 @@ 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 @@ -98,11 +108,20 @@ class SceneRenderer extends WorldSystem { bColor: { value: 1.0 }, }, }) + this._skybox = new THREE.Mesh(geometry, material) 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 antiAliasEffect = new SMAAEffect({ edgeDetectionMode: EdgeDetectionMode.COLOR }) + this._antiAliasPass = new EffectPass(this._mainCamera, antiAliasEffect) + this._composer.addPass(this._antiAliasPass) + // Orbit controls this._orbitControls = new OrbitControls(this._mainCamera, this._renderer.domElement) this._orbitControls.update() @@ -115,12 +134,11 @@ class SceneRenderer extends WorldSystem { this._mainCamera.updateProjectionMatrix() } - public Update(_: number): void { + public Update(deltaT: number): void { this._sceneObjects.forEach(obj => { obj.Update() }) - // controls.update(deltaTime); // TODO: Add controls? this._skybox.position.copy(this._mainCamera.position) const mainCameraFovRadians = (Math.PI * (this._mainCamera.fov * 0.5)) / 180 @@ -132,7 +150,7 @@ class SceneRenderer extends WorldSystem { ) }) - this._renderer.render(this._scene, this._mainCamera) + this._composer.render(deltaT) } public Destroy(): void {