Skip to content

Commit 879d5a0

Browse files
basetenbaseten
committed
performance improvements
1 parent 9f5b264 commit 879d5a0

File tree

11 files changed

+315
-176
lines changed

11 files changed

+315
-176
lines changed

‎examples/3d-cubes/src/components/Cube.js

Lines changed: 60 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,93 +1,75 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3+
import { vec3 } from 'gl-matrix';
34
import { Transform3d } from 'react-css-transform';
45
import { FlatMaterial } from './FlatMaterial';
56
import { halfPi, yAxis, xAxis } from '../constants';
67

7-
export function Cube(props) {
8-
const { faceSize, color, ...otherProps } = props;
9-
10-
const halfFaceSize = faceSize / 2;
11-
12-
const faceStyle = {
13-
width: faceSize,
14-
height: faceSize,
15-
margin: -halfFaceSize,
8+
export class Cube extends React.Component {
9+
propTypes = {
10+
faceSize: PropTypes.number.isRequired,
11+
color: PropTypes.string.isRequired,
1612
};
1713

18-
const pos1 = {
19-
x: -halfFaceSize,
20-
y: 0,
21-
z: 0,
22-
};
14+
pos1 = vec3.create();
15+
pos2 = vec3.create();
16+
pos3 = vec3.create();
17+
pos4 = vec3.create();
18+
pos5 = vec3.create();
19+
pos6 = vec3.create();
2320

24-
const pos2 = {
25-
x: halfFaceSize,
26-
y: 0,
27-
z: 0,
28-
};
21+
render() {
22+
const { faceSize, color, ...otherProps } = this.props;
23+
const { pos1, pos2, pos3, pos4, pos5, pos6 } = this;
2924

30-
const pos3 = {
31-
x: 0,
32-
y: -halfFaceSize,
33-
z: 0,
34-
};
25+
const halfFaceSize = faceSize / 2;
3526

36-
const pos4 = {
37-
x: 0,
38-
y: halfFaceSize,
39-
z: 0,
40-
};
27+
const faceStyle = {
28+
width: faceSize,
29+
height: faceSize,
30+
margin: -halfFaceSize,
31+
};
4132

42-
const pos5 = {
43-
x: 0,
44-
y: 0,
45-
z: -halfFaceSize,
46-
};
33+
vec3.set(pos1, -halfFaceSize, 0, 0);
34+
vec3.set(pos2, halfFaceSize, 0, 0);
35+
vec3.set(pos3, 0, -halfFaceSize, 0);
36+
vec3.set(pos4, 0, halfFaceSize, 0);
37+
vec3.set(pos5, 0, 0, -halfFaceSize);
38+
vec3.set(pos6, 0, 0, halfFaceSize);
4739

48-
const pos6 = {
49-
x: 0,
50-
y: 0,
51-
z: halfFaceSize,
52-
};
53-
54-
return (
55-
<Transform3d {...otherProps}>
56-
<Transform3d translate={pos1} rotate={-halfPi} rotateAxis={yAxis}>
57-
<FlatMaterial color={color}>
58-
<div style={faceStyle} className="face" />
59-
</FlatMaterial>
60-
</Transform3d>
61-
<Transform3d translate={pos2} rotate={halfPi} rotateAxis={yAxis}>
62-
<FlatMaterial color={color}>
63-
<div style={faceStyle} className="face" />
64-
</FlatMaterial>
65-
</Transform3d>
66-
<Transform3d translate={pos3} rotate={halfPi} rotateAxis={xAxis}>
67-
<FlatMaterial color={color}>
68-
<div style={faceStyle} className="face" />
69-
</FlatMaterial>
70-
</Transform3d>
71-
<Transform3d translate={pos4} rotate={-halfPi} rotateAxis={xAxis}>
72-
<FlatMaterial color={color}>
73-
<div style={faceStyle} className="face" />
74-
</FlatMaterial>
40+
return (
41+
<Transform3d {...otherProps}>
42+
<Transform3d translate={pos1} rotate={-halfPi} rotateAxis={yAxis}>
43+
<FlatMaterial color={color}>
44+
<div style={faceStyle} className="face" />
45+
</FlatMaterial>
46+
</Transform3d>
47+
<Transform3d translate={pos2} rotate={halfPi} rotateAxis={yAxis}>
48+
<FlatMaterial color={color}>
49+
<div style={faceStyle} className="face" />
50+
</FlatMaterial>
51+
</Transform3d>
52+
<Transform3d translate={pos3} rotate={halfPi} rotateAxis={xAxis}>
53+
<FlatMaterial color={color}>
54+
<div style={faceStyle} className="face" />
55+
</FlatMaterial>
56+
</Transform3d>
57+
<Transform3d translate={pos4} rotate={-halfPi} rotateAxis={xAxis}>
58+
<FlatMaterial color={color}>
59+
<div style={faceStyle} className="face" />
60+
</FlatMaterial>
61+
</Transform3d>
62+
<Transform3d translate={pos5} rotate={Math.PI} rotateAxis={yAxis}>
63+
<FlatMaterial color={color}>
64+
<div style={faceStyle} className="face" />
65+
</FlatMaterial>
66+
</Transform3d>
67+
<Transform3d translate={pos6}>
68+
<FlatMaterial color={color}>
69+
<div style={faceStyle} className="face" />
70+
</FlatMaterial>
71+
</Transform3d>
7572
</Transform3d>
76-
<Transform3d translate={pos5} rotate={Math.PI} rotateAxis={yAxis}>
77-
<FlatMaterial color={color}>
78-
<div style={faceStyle} className="face" />
79-
</FlatMaterial>
80-
</Transform3d>
81-
<Transform3d translate={pos6}>
82-
<FlatMaterial color={color}>
83-
<div style={faceStyle} className="face" />
84-
</FlatMaterial>
85-
</Transform3d>
86-
</Transform3d>
87-
);
73+
);
74+
}
8875
}
89-
90-
Cube.propTypes = {
91-
faceSize: PropTypes.number.isRequired,
92-
color: PropTypes.string.isRequired,
93-
};

‎examples/3d-cubes/src/components/CubeGroup.js

Lines changed: 75 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,93 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3+
import { vec3 } from 'gl-matrix';
34
import { Transform3d } from 'react-css-transform';
45
import { Cube } from './Cube';
56
import { yAxis } from '../constants';
67

7-
export function CubeGroup(props) {
8-
const { time, parentMatrixWorld, cubeFaceSize } = props;
9-
const frameTime = 1000 / 60;
10-
const theta = (time / frameTime) * 0.04;
11-
const twoTheta = theta * 2;
12-
const cubeSpacing = cubeFaceSize * 1.5;
8+
export class CubeGroup extends React.Component {
9+
static propTypes = {
10+
cubeFaceSize: PropTypes.number.isRequired,
11+
time: PropTypes.number.isRequired,
12+
parentMatrixWorld: PropTypes.oneOfType([PropTypes.instanceOf(Float32Array), PropTypes.array]),
13+
};
1314

14-
return (
15-
<React.Fragment>
16-
<Cube
17-
parentMatrixWorld={parentMatrixWorld}
18-
faceSize={cubeFaceSize}
19-
translate={{ y: -cubeSpacing }}
20-
rotate={-theta}
21-
rotateAxis={yAxis}
22-
color="#ff0000"
23-
/>
24-
<Cube
25-
parentMatrixWorld={parentMatrixWorld}
26-
faceSize={cubeFaceSize}
27-
translate={{ y: cubeSpacing }}
28-
rotate={-theta}
29-
rotateAxis={yAxis}
30-
color="#ff0000"
31-
/>
32-
<Transform3d parentMatrixWorld={parentMatrixWorld} rotate={theta} rotateAxis={yAxis}>
33-
<Cube
34-
parentMatrixWorld={parentMatrixWorld}
35-
faceSize={cubeFaceSize}
36-
translate={{ x: -cubeSpacing }}
37-
rotate={-twoTheta}
38-
rotateAxis={yAxis}
39-
color="#0000ff"
40-
/>
41-
<Cube
42-
parentMatrixWorld={parentMatrixWorld}
43-
faceSize={cubeFaceSize}
44-
translate={{ x: cubeSpacing }}
45-
rotate={-twoTheta}
46-
rotateAxis={yAxis}
47-
color="#0000ff"
48-
/>
15+
cube1Translate = vec3.create();
16+
cube2Translate = vec3.create();
17+
cube3Translate = vec3.create();
18+
cube4Translate = vec3.create();
19+
cube5Translate = vec3.create();
20+
cube6Translate = vec3.create();
21+
22+
render() {
23+
const { time, parentMatrixWorld, cubeFaceSize } = this.props;
24+
const { cube1Translate, cube2Translate, cube3Translate, cube4Translate, cube5Translate, cube6Translate } = this;
25+
26+
const frameTime = 1000 / 60;
27+
const theta = (time / frameTime) * 0.04;
28+
const twoTheta = theta * 2;
29+
const cubeSpacing = cubeFaceSize * 1.5;
30+
31+
vec3.set(cube1Translate, 0, -cubeSpacing, 0);
32+
vec3.set(cube2Translate, 0, cubeSpacing, 0);
33+
vec3.set(cube3Translate, -cubeSpacing, 0, 0);
34+
vec3.set(cube4Translate, cubeSpacing, 0, 0);
35+
vec3.set(cube5Translate, 0, 0, -cubeSpacing);
36+
vec3.set(cube6Translate, 0, 0, cubeSpacing);
37+
38+
return (
39+
<React.Fragment>
4940
<Cube
5041
parentMatrixWorld={parentMatrixWorld}
5142
faceSize={cubeFaceSize}
52-
translate={{ z: -cubeSpacing }}
53-
rotate={-twoTheta}
43+
translate={cube1Translate}
44+
rotate={-theta}
5445
rotateAxis={yAxis}
55-
color="#00ff00"
46+
color="#ff0000"
5647
/>
5748
<Cube
5849
parentMatrixWorld={parentMatrixWorld}
5950
faceSize={cubeFaceSize}
60-
translate={{ z: cubeSpacing }}
61-
rotate={-twoTheta}
51+
translate={cube2Translate}
52+
rotate={-theta}
6253
rotateAxis={yAxis}
63-
color="#00ff00"
54+
color="#ff0000"
6455
/>
65-
</Transform3d>
66-
</React.Fragment>
67-
);
56+
<Transform3d parentMatrixWorld={parentMatrixWorld} rotate={theta} rotateAxis={yAxis}>
57+
<Cube
58+
parentMatrixWorld={parentMatrixWorld}
59+
faceSize={cubeFaceSize}
60+
translate={cube3Translate}
61+
rotate={-twoTheta}
62+
rotateAxis={yAxis}
63+
color="#0000ff"
64+
/>
65+
<Cube
66+
parentMatrixWorld={parentMatrixWorld}
67+
faceSize={cubeFaceSize}
68+
translate={cube4Translate}
69+
rotate={-twoTheta}
70+
rotateAxis={yAxis}
71+
color="#0000ff"
72+
/>
73+
<Cube
74+
parentMatrixWorld={parentMatrixWorld}
75+
faceSize={cubeFaceSize}
76+
translate={cube5Translate}
77+
rotate={-twoTheta}
78+
rotateAxis={yAxis}
79+
color="#00ff00"
80+
/>
81+
<Cube
82+
parentMatrixWorld={parentMatrixWorld}
83+
faceSize={cubeFaceSize}
84+
translate={cube6Translate}
85+
rotate={-twoTheta}
86+
rotateAxis={yAxis}
87+
color="#00ff00"
88+
/>
89+
</Transform3d>
90+
</React.Fragment>
91+
);
92+
}
6893
}
69-
70-
CubeGroup.propTypes = {
71-
cubeFaceSize: PropTypes.number.isRequired,
72-
time: PropTypes.number.isRequired,
73-
parentMatrixWorld: PropTypes.oneOfType([PropTypes.instanceOf(Float32Array), PropTypes.array]),
74-
};

‎examples/3d-cubes/src/constants.js

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1+
import { vec3 } from 'gl-matrix';
2+
13
export const halfPi = Math.PI / 2;
2-
export const xAxis = { x: 1, y: 0, z: 0 };
3-
export const yAxis = { x: 0, y: 1, z: 0 };
4-
export const zAxis = { x: 0, y: 0, z: 1 };
4+
export const xAxis = vec3.fromValues(1, 0, 0);
5+
export const yAxis = vec3.fromValues(0, 1, 0);
6+
export const zAxis = vec3.fromValues(0, 0, 1);

‎examples/3d-cubes/src/index.js

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom';
33
import { Transform3d } from 'react-css-transform';
4+
import { vec3 } from 'gl-matrix';
45
import { CubeGroup } from './components/CubeGroup';
56
import { yAxis, zAxis } from './constants';
67

@@ -14,6 +15,13 @@ class App extends React.Component {
1415
playing: true,
1516
};
1617

18+
appStyle = {
19+
perspective: 500
20+
};
21+
translateToCentre = vec3.create();
22+
cubeGroup1Translate = vec3.create();
23+
cubeGroup2Translate = vec3.create();
24+
1725
componentDidMount() {
1826
window.addEventListener('resize', this.handleResize);
1927
window.addEventListener('keyup', this.handleKeyUp);
@@ -31,29 +39,28 @@ class App extends React.Component {
3139

3240
render() {
3341
const { time, windowWidth, windowHeight } = this.state;
42+
const { translateToCentre, cubeGroup1Translate, cubeGroup2Translate, appStyle } = this;
3443
const frameTime = 1000 / 60;
3544
const theta = (time / frameTime) * 0.04;
3645

37-
const translateToCentre = {
38-
x: windowWidth / 2,
39-
y: windowHeight / 2,
40-
z: -400,
41-
};
46+
vec3.set(translateToCentre, windowWidth / 2, windowHeight / 2, -400);
4247

4348
const cubeFaceSize = (110 / 750) * windowHeight;
4449
const cubeGroupSpacing = cubeFaceSize * 2.25;
45-
const appStyle = {
46-
perspective: (500 / 750) * windowHeight,
47-
};
50+
51+
appStyle.perspective = (500 / 750) * windowHeight;
52+
53+
vec3.set(cubeGroup1Translate, cubeGroupSpacing, 0, 0);
54+
vec3.set(cubeGroup2Translate, -cubeGroupSpacing, 0, 0);
4855

4956
return (
5057
<div className="app" style={appStyle}>
5158
<Transform3d translate={translateToCentre} rotate={theta} rotateAxis={yAxis}>
5259
<Transform3d rotate={theta} rotateAxis={zAxis}>
53-
<Transform3d translate={{ x: cubeGroupSpacing }}>
60+
<Transform3d translate={cubeGroup1Translate}>
5461
<CubeGroup cubeFaceSize={cubeFaceSize} time={time} />
5562
</Transform3d>
56-
<Transform3d translate={{ x: -cubeGroupSpacing }}>
63+
<Transform3d translate={cubeGroup2Translate}>
5764
<CubeGroup cubeFaceSize={cubeFaceSize} time={time} />
5865
</Transform3d>
5966
</Transform3d>

‎jest.config.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@ module.exports = {
22
collectCoverageFrom: ['src/**/*.js'],
33
coverageThreshold: {
44
global: {
5-
statements: 90,
6-
branches: 65,
5+
statements: 95,
6+
branches: 85,
77
functions: 100,
8-
lines: 90,
8+
lines: 95,
99
},
1010
},
1111
moduleDirectories: ['node_modules', 'src'],

0 commit comments

Comments
 (0)