Very slow performance in production (CSG)

Questions
1

Hello

I’m creating a sort of product configurator using React where I utilize CSG (Chandler Prall) to do some edits to 3D objects. This is pretty performant in development, almost no delays in rendering objects with multiple CSG operations.

When I build this React project for production everything goes well performance wise, until I introduce some CSG operations on a 3D object. Suddenly the render of the object takes several seconds for 1 operation, and even a minute when there are 5 or something similar.

I can’t find anything on this subject, especially because in development everything flies in comparison to when it is built for production.

Has anyone encountered a problem like this, or knows what the problem could be?

Thanks in advance!

2

When you say “in production”, do you mean also when you run your bundle locally, or only when you run it deployed ?

3

Both actually, this problem surfaces when deployed on a shared server but after this I tested the production build on a locally hosted webserver and the performance was the same.

4

For anyone searching for a solution in the future:

I backtracked in my git to pinpoint the moment where this went wrong, as it worked fine when I deployed the application a while ago. I found that at one point I updated the “react-scripts” dependency from 3.3.0 to 3.4.1 and when I change the version back to 3.3.0 the performance of the CSG is as fast as it should be. No idea what is causing this so far.

5

I have the same issue with react-scripts": “^4.0.2”.

6

Yeah I have tried updating the packages a few times and I still had the same problem again and again.

Could you post your findings here if you find something else than downgrading?

7

What I find so far is that the clone function is much slower in production. But also the performance tools in Chrome don’t work because I think something very expensive or memory intensive is happening.

Are you also using react-three-fiber?
Maybe there are two renderers or something?

8

It works for me now with Sean Bradley version slightly edited
Code can be found here: CSGMesh.ts fix bug in production · GitHub

It is in typescript btw.

I think the cause is webpack / babel three shaking or removing important things from the class

UPDATE 25 march 2021

Use the code from Seanwasere!

After that is was still much (10 times) slower for me in production right now than in development somehow…
It also still freezes my application for a while but I finally found why it is still slow somehow.

You also have to copy the file at
three/examples/jsm/deprecated/Geometry’

to your local project and import in CSGMesh.js like
import { Geometry, Face3 } from ‘./Geometry’

Now it is as fast in development if not faster!

9

Note that your copy on your gist is still referring to THREE.Geometry, which is pre three r125.

where as my copy here
Three.js-TypeScript-Boilerplate/CSGMesh.ts at csg · Sean-Bradley/Three.js-TypeScript-Boilerplate (github.com)
is importing the deprecated Geometry instead which makes it work for three r125

If you want a JavaScript version see
Three.js-TypeScript-Boilerplate/CSGMesh.js at csg · Sean-Bradley/Three.js-TypeScript-Boilerplate (github.com)

This also requires the deprecated version of geometry from three r125
import { Geometry } from '/jsm/deprecated/Geometry';

10

I only now had the chance to check this out. This indeed helps a ton as the application doesn’t freeze anymore, although I notice a small delay in rendering. But that is a small price to pay for getting an actual response from the application when rendering.

Thanks everybody!