From a57a7b17ba6bfa1db6d7a4d6311d658e214be0cc Mon Sep 17 00:00:00 2001 From: Cameron Fraser Date: Thu, 5 Dec 2024 18:58:52 -0800 Subject: [PATCH] bump as far as r162; replace `WebGLMultipleRenderTargets` --- package-lock.json | 52 +++++++++++++++---- package.json | 4 +- src/viewport/index.tsx | 2 +- src/visGeometry/rendering/GBufferPass.ts | 4 +- .../rendering/SimulariumRenderer.ts | 35 ++++++------- 5 files changed, 65 insertions(+), 32 deletions(-) diff --git a/package-lock.json b/package-lock.json index ad0a6610..debc54d8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,7 +23,7 @@ "mp4-muxer": "^2.2.2", "parse-pdb": "^1.0.0", "si-prefix": "^0.2.0", - "three": "^0.144.0", + "three": "^0.162.0", "tweakpane": "^3.0.7" }, "devDependencies": { @@ -40,7 +40,7 @@ "@types/lodash": "^4.14.175", "@types/react": "^18.2.46", "@types/react-dom": "^18.2.18", - "@types/three": "^0.144.0", + "@types/three": "^0.162.0", "@typescript-eslint/eslint-plugin": "~8.15.0", "@typescript-eslint/parser": "~8.15.0", "@vitest/coverage-v8": "^2.1.5", @@ -2944,6 +2944,13 @@ "tweakpane": "^3.1.4" } }, + "node_modules/@tweenjs/tween.js": { + "version": "23.1.3", + "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-23.1.3.tgz", + "integrity": "sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==", + "dev": true, + "license": "MIT" + }, "node_modules/@types/dom-webcodecs": { "version": "0.1.13", "resolved": "https://registry.npmjs.org/@types/dom-webcodecs/-/dom-webcodecs-0.1.13.tgz", @@ -3030,13 +3037,25 @@ "@types/react": "*" } }, + "node_modules/@types/stats.js": { + "version": "0.17.3", + "resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.3.tgz", + "integrity": "sha512-pXNfAD3KHOdif9EQXZ9deK82HVNaXP5ZIF5RP2QG6OQFNTaY2YIetfrE9t528vEreGQvEPRDDc8muaoYeK0SxQ==", + "dev": true, + "license": "MIT" + }, "node_modules/@types/three": { - "version": "0.144.0", - "resolved": "https://registry.npmjs.org/@types/three/-/three-0.144.0.tgz", - "integrity": "sha512-psvEs6q5rLN50jUYZ3D4pZMfxTbdt3A243blt0my7/NcL6chaCZpHe2csbCtx0SOD9fI/XnF3wnVUAYZGqCSYg==", + "version": "0.162.0", + "resolved": "https://registry.npmjs.org/@types/three/-/three-0.162.0.tgz", + "integrity": "sha512-0j5yZcVukVIhrhSIC7+LmBPkkMoMuEJ1AfYBZfgNytdYqYREMuiyXWhYOMeZLBElTEAlJIZn7r2W3vqTIgjWlg==", "dev": true, + "license": "MIT", "dependencies": { - "@types/webxr": "*" + "@tweenjs/tween.js": "~23.1.1", + "@types/stats.js": "*", + "@types/webxr": "*", + "fflate": "~0.6.10", + "meshoptimizer": "~0.18.1" } }, "node_modules/@types/webxr": { @@ -5716,6 +5735,13 @@ "reusify": "^1.0.4" } }, + "node_modules/fflate": { + "version": "0.6.10", + "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.6.10.tgz", + "integrity": "sha512-IQrh3lEPM93wVCEczc9SaAOvkmcoQn/G8Bo1e8ZPlY3X3bnAxWaBdvTdvM1hP62iZp0BXWDy4vTAy4fF0+Dlpg==", + "dev": true, + "license": "MIT" + }, "node_modules/file-entry-cache": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz", @@ -7845,6 +7871,13 @@ "node": ">= 8" } }, + "node_modules/meshoptimizer": { + "version": "0.18.1", + "resolved": "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-0.18.1.tgz", + "integrity": "sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==", + "dev": true, + "license": "MIT" + }, "node_modules/micromatch": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz", @@ -11752,9 +11785,10 @@ "dev": true }, "node_modules/three": { - "version": "0.144.0", - "resolved": "https://registry.npmjs.org/three/-/three-0.144.0.tgz", - "integrity": "sha512-R8AXPuqfjfRJKkYoTQcTK7A6i3AdO9++2n8ubya/GTU+fEHhYKu1ZooRSCPkx69jbnzT7dD/xEo6eROQTt2lJw==" + "version": "0.162.0", + "resolved": "https://registry.npmjs.org/three/-/three-0.162.0.tgz", + "integrity": "sha512-xfCYj4RnlozReCmUd+XQzj6/5OjDNHBy5nT6rVwrOKGENAvpXe2z1jL+DZYaMu4/9pNsjH/4Os/VvS9IrH7IOQ==", + "license": "MIT" }, "node_modules/through": { "version": "2.3.8", diff --git a/package.json b/package.json index a87a7bd1..65d023c8 100644 --- a/package.json +++ b/package.json @@ -55,7 +55,7 @@ "@types/lodash": "^4.14.175", "@types/react": "^18.2.46", "@types/react-dom": "^18.2.18", - "@types/three": "^0.144.0", + "@types/three": "^0.162.0", "@typescript-eslint/eslint-plugin": "~8.15.0", "@typescript-eslint/parser": "~8.15.0", "@vitest/coverage-v8": "^2.1.5", @@ -105,7 +105,7 @@ "mp4-muxer": "^2.2.2", "parse-pdb": "^1.0.0", "si-prefix": "^0.2.0", - "three": "^0.144.0", + "three": "^0.162.0", "tweakpane": "^3.0.7" } } diff --git a/src/viewport/index.tsx b/src/viewport/index.tsx index 2fac5b27..5b7dfe18 100644 --- a/src/viewport/index.tsx +++ b/src/viewport/index.tsx @@ -140,7 +140,7 @@ class Viewport extends React.Component< this.lastRenderTime = Date.now(); this.startTime = Date.now(); this.onPickObject = this.onPickObject.bind(this); - this.stats = Stats(); + this.stats = new Stats(); this.stats.showPanel(1); this.handlers = { diff --git a/src/visGeometry/rendering/GBufferPass.ts b/src/visGeometry/rendering/GBufferPass.ts index 415308bc..398fe289 100644 --- a/src/visGeometry/rendering/GBufferPass.ts +++ b/src/visGeometry/rendering/GBufferPass.ts @@ -18,7 +18,7 @@ import { Points, Scene, WebGLRenderer, - WebGLMultipleRenderTargets, + WebGLRenderTarget, } from "three"; // strategy: @@ -72,7 +72,7 @@ class GBufferPass { renderer: WebGLRenderer, scene: Scene, camera: PerspectiveCamera | OrthographicCamera, - gbuffer: WebGLMultipleRenderTargets + gbuffer: WebGLRenderTarget ): void { const c = renderer.getClearColor(new Color()).clone(); const a = renderer.getClearAlpha(); diff --git a/src/visGeometry/rendering/SimulariumRenderer.ts b/src/visGeometry/rendering/SimulariumRenderer.ts index ec8a7695..1e00f8cc 100644 --- a/src/visGeometry/rendering/SimulariumRenderer.ts +++ b/src/visGeometry/rendering/SimulariumRenderer.ts @@ -17,7 +17,6 @@ import { PerspectiveCamera, RGBAFormat, Scene, - WebGLMultipleRenderTargets, WebGLRenderer, WebGLRenderTarget, } from "three"; @@ -60,7 +59,7 @@ class SimulariumRenderer { public compositePass: CompositePass; public contourPass: ContourPass; public drawBufferPass: DrawBufferPass; - public gbuffer: WebGLMultipleRenderTargets; + public gbuffer: WebGLRenderTarget; private hitTestHelper: HitTestHelper; public blurIntermediateBuffer: WebGLRenderTarget; public ssaoBuffer: WebGLRenderTarget; @@ -120,18 +119,18 @@ class SimulariumRenderer { this.drawBufferPass = new DrawBufferPass(); // buffers: - this.gbuffer = new WebGLMultipleRenderTargets(2, 2, 3); - for (let i = 0, il = this.gbuffer.texture.length; i < il; i++) { - this.gbuffer.texture[i].minFilter = NearestFilter; - this.gbuffer.texture[i].magFilter = NearestFilter; - this.gbuffer.texture[i].format = RGBAFormat; - this.gbuffer.texture[i].type = FloatType; - this.gbuffer.texture[i].generateMipmaps = false; - } + this.gbuffer = new WebGLRenderTarget(2, 2, { + count: 3, + minFilter: NearestFilter, + magFilter: NearestFilter, + format: RGBAFormat, + type: FloatType, + generateMipmaps: false, + }); // Name our G-Buffer attachments for debugging - this.gbuffer.texture[AGENTBUFFER].name = "agentinfo"; - this.gbuffer.texture[NORMALBUFFER].name = "normal"; - this.gbuffer.texture[POSITIONBUFFER].name = "position"; + this.gbuffer.textures[AGENTBUFFER].name = "agentinfo"; + this.gbuffer.textures[NORMALBUFFER].name = "normal"; + this.gbuffer.textures[POSITIONBUFFER].name = "position"; this.hitTestHelper = new HitTestHelper(); @@ -276,7 +275,7 @@ class SimulariumRenderer { } public hitTest(renderer: WebGLRenderer, x: number, y: number): number { - const tex = this.gbuffer.texture[AGENTBUFFER]; + const tex = this.gbuffer.textures[AGENTBUFFER]; const pixel = this.hitTestHelper.hitTest( renderer, tex, @@ -411,14 +410,14 @@ class SimulariumRenderer { renderer, camera, this.ssaoBuffer, - this.gbuffer.texture[NORMALBUFFER], - this.gbuffer.texture[POSITIONBUFFER] + this.gbuffer.textures[NORMALBUFFER], + this.gbuffer.textures[POSITIONBUFFER] ); this.blur1Pass.render( renderer, this.ssaoBufferBlurred, this.ssaoBuffer, - this.gbuffer.texture[POSITIONBUFFER], + this.gbuffer.textures[POSITIONBUFFER], this.blurIntermediateBuffer ); @@ -433,7 +432,7 @@ class SimulariumRenderer { compositeTarget, this.ssaoBufferBlurred, this.ssaoBufferBlurred2, - this.gbuffer.texture[AGENTBUFFER] + this.gbuffer.textures[AGENTBUFFER] ); this.contourPass.render(