Skip to content

Commit 0f71b2c

Browse files
DavidHDevDavidHDev
authored
Merge pull request #882 from PedroMarianoAlmeida/Hyperspeed-performance
Fix Hyperspeed partial options override and improve performance
2 parents 1eb0ee1 + 0bf2414 commit 0f71b2c

File tree

9 files changed

+94
-102
lines changed

9 files changed

+94
-102
lines changed

‎public/r/Hyperspeed-JS-CSS.json‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎public/r/Hyperspeed-JS-TW.json‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎public/r/Hyperspeed-TS-CSS.json‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎public/r/Hyperspeed-TS-TW.json‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎src/constants/code/Backgrounds/hyperspeedCode.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ export const hyperspeed = {
1111
1212
// the component will fill the height/width of its parent container, edit the CSS to change this
1313
// the options below are the default values
14+
// TIP: if you pass custom effectOptions, memoize the object (e.g. useMemo or a constant)
15+
// to avoid unnecessary re-renders and WebGL scene recreations
1416
1517
<Hyperspeed
1618
effectOptions={{

‎src/content/Backgrounds/Hyperspeed/Hyperspeed.jsx‎

Lines changed: 39 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -4,45 +4,45 @@ import { BloomEffect, EffectComposer, EffectPass, RenderPass, SMAAEffect, SMAAPr
44

55
import './Hyperspeed.css';
66

7-
const Hyperspeed = ({
8-
effectOptions = {
9-
onSpeedUp: () => {},
10-
onSlowDown: () => {},
11-
distortion: 'turbulentDistortion',
12-
length: 400,
13-
roadWidth: 10,
14-
islandWidth: 2,
15-
lanesPerRoad: 4,
16-
fov: 90,
17-
fovSpeedUp: 150,
18-
speedUp: 2,
19-
carLightsFade: 0.4,
20-
totalSideLightSticks: 20,
21-
lightPairsPerRoadWay: 40,
22-
shoulderLinesWidthPercentage: 0.05,
23-
brokenLinesWidthPercentage: 0.1,
24-
brokenLinesLengthPercentage: 0.5,
25-
lightStickWidth: [0.12, 0.5],
26-
lightStickHeight: [1.3, 1.7],
27-
movingAwaySpeed: [60, 80],
28-
movingCloserSpeed: [-120, -160],
29-
carLightsLength: [400 * 0.03, 400 * 0.2],
30-
carLightsRadius: [0.05, 0.14],
31-
carWidthPercentage: [0.3, 0.5],
32-
carShiftX: [-0.8, 0.8],
33-
carFloorSeparation: [0, 5],
34-
colors: {
35-
roadColor: 0x080808,
36-
islandColor: 0x0a0a0a,
37-
background: 0x000000,
38-
shoulderLines: 0xffffff,
39-
brokenLines: 0xffffff,
40-
leftCars: [0xd856bf, 0x6750a2, 0xc247ac],
41-
rightCars: [0x03b3c3, 0x0e5ea5, 0x324555],
42-
sticks: 0x03b3c3
43-
}
7+
const DEFAULT_EFFECT_OPTIONS = {
8+
onSpeedUp: () => {},
9+
onSlowDown: () => {},
10+
distortion: 'turbulentDistortion',
11+
length: 400,
12+
roadWidth: 10,
13+
islandWidth: 2,
14+
lanesPerRoad: 4,
15+
fov: 90,
16+
fovSpeedUp: 150,
17+
speedUp: 2,
18+
carLightsFade: 0.4,
19+
totalSideLightSticks: 20,
20+
lightPairsPerRoadWay: 40,
21+
shoulderLinesWidthPercentage: 0.05,
22+
brokenLinesWidthPercentage: 0.1,
23+
brokenLinesLengthPercentage: 0.5,
24+
lightStickWidth: [0.12, 0.5],
25+
lightStickHeight: [1.3, 1.7],
26+
movingAwaySpeed: [60, 80],
27+
movingCloserSpeed: [-120, -160],
28+
carLightsLength: [400 * 0.03, 400 * 0.2],
29+
carLightsRadius: [0.05, 0.14],
30+
carWidthPercentage: [0.3, 0.5],
31+
carShiftX: [-0.8, 0.8],
32+
carFloorSeparation: [0, 5],
33+
colors: {
34+
roadColor: 0x080808,
35+
islandColor: 0x0a0a0a,
36+
background: 0x000000,
37+
shoulderLines: 0xffffff,
38+
brokenLines: 0xffffff,
39+
leftCars: [0xd856bf, 0x6750a2, 0xc247ac],
40+
rightCars: [0x03b3c3, 0x0e5ea5, 0x324555],
41+
sticks: 0x03b3c3
4442
}
45-
}) => {
43+
};
44+
45+
const Hyperspeed = ({ effectOptions = DEFAULT_EFFECT_OPTIONS }) => {
4646
const hyperspeed = useRef(null);
4747
const appRef = useRef(null);
4848

@@ -567,9 +567,6 @@ const Hyperspeed = ({
567567
this.camera.updateProjectionMatrix();
568568
}
569569

570-
if (this.options.isHyper) {
571-
console.log(this.options.isHyper);
572-
}
573570
}
574571

575572
render(delta) {
@@ -1102,7 +1099,7 @@ const Hyperspeed = ({
11021099

11031100
(function () {
11041101
const container = document.getElementById('lights');
1105-
const options = { ...effectOptions };
1102+
const options = { ...DEFAULT_EFFECT_OPTIONS, ...effectOptions, colors: { ...DEFAULT_EFFECT_OPTIONS.colors, ...effectOptions.colors } };
11061103
options.distortion = distortions[options.distortion];
11071104

11081105
const myApp = new App(container, options);

‎src/tailwind/Backgrounds/Hyperspeed/Hyperspeed.jsx‎

Lines changed: 39 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -2,45 +2,45 @@ import { useEffect, useRef } from 'react';
22
import * as THREE from 'three';
33
import { BloomEffect, EffectComposer, EffectPass, RenderPass, SMAAEffect, SMAAPreset } from 'postprocessing';
44

5-
const Hyperspeed = ({
6-
effectOptions = {
7-
onSpeedUp: () => {},
8-
onSlowDown: () => {},
9-
distortion: 'turbulentDistortion',
10-
length: 400,
11-
roadWidth: 10,
12-
islandWidth: 2,
13-
lanesPerRoad: 4,
14-
fov: 90,
15-
fovSpeedUp: 150,
16-
speedUp: 2,
17-
carLightsFade: 0.4,
18-
totalSideLightSticks: 20,
19-
lightPairsPerRoadWay: 40,
20-
shoulderLinesWidthPercentage: 0.05,
21-
brokenLinesWidthPercentage: 0.1,
22-
brokenLinesLengthPercentage: 0.5,
23-
lightStickWidth: [0.12, 0.5],
24-
lightStickHeight: [1.3, 1.7],
25-
movingAwaySpeed: [60, 80],
26-
movingCloserSpeed: [-120, -160],
27-
carLightsLength: [400 * 0.03, 400 * 0.2],
28-
carLightsRadius: [0.05, 0.14],
29-
carWidthPercentage: [0.3, 0.5],
30-
carShiftX: [-0.8, 0.8],
31-
carFloorSeparation: [0, 5],
32-
colors: {
33-
roadColor: 0x080808,
34-
islandColor: 0x0a0a0a,
35-
background: 0x000000,
36-
shoulderLines: 0xffffff,
37-
brokenLines: 0xffffff,
38-
leftCars: [0xd856bf, 0x6750a2, 0xc247ac],
39-
rightCars: [0x03b3c3, 0x0e5ea5, 0x324555],
40-
sticks: 0x03b3c3
41-
}
5+
const DEFAULT_EFFECT_OPTIONS = {
6+
onSpeedUp: () => {},
7+
onSlowDown: () => {},
8+
distortion: 'turbulentDistortion',
9+
length: 400,
10+
roadWidth: 10,
11+
islandWidth: 2,
12+
lanesPerRoad: 4,
13+
fov: 90,
14+
fovSpeedUp: 150,
15+
speedUp: 2,
16+
carLightsFade: 0.4,
17+
totalSideLightSticks: 20,
18+
lightPairsPerRoadWay: 40,
19+
shoulderLinesWidthPercentage: 0.05,
20+
brokenLinesWidthPercentage: 0.1,
21+
brokenLinesLengthPercentage: 0.5,
22+
lightStickWidth: [0.12, 0.5],
23+
lightStickHeight: [1.3, 1.7],
24+
movingAwaySpeed: [60, 80],
25+
movingCloserSpeed: [-120, -160],
26+
carLightsLength: [400 * 0.03, 400 * 0.2],
27+
carLightsRadius: [0.05, 0.14],
28+
carWidthPercentage: [0.3, 0.5],
29+
carShiftX: [-0.8, 0.8],
30+
carFloorSeparation: [0, 5],
31+
colors: {
32+
roadColor: 0x080808,
33+
islandColor: 0x0a0a0a,
34+
background: 0x000000,
35+
shoulderLines: 0xffffff,
36+
brokenLines: 0xffffff,
37+
leftCars: [0xd856bf, 0x6750a2, 0xc247ac],
38+
rightCars: [0x03b3c3, 0x0e5ea5, 0x324555],
39+
sticks: 0x03b3c3
4240
}
43-
}) => {
41+
};
42+
43+
const Hyperspeed = ({ effectOptions = DEFAULT_EFFECT_OPTIONS }) => {
4444
const hyperspeed = useRef(null);
4545
const appRef = useRef(null);
4646

@@ -565,9 +565,6 @@ const Hyperspeed = ({
565565
this.camera.updateProjectionMatrix();
566566
}
567567

568-
if (this.options.isHyper) {
569-
console.log(this.options.isHyper);
570-
}
571568
}
572569

573570
render(delta) {
@@ -1100,7 +1097,7 @@ const Hyperspeed = ({
11001097

11011098
(function () {
11021099
const container = document.getElementById('lights');
1103-
const options = { ...effectOptions };
1100+
const options = { ...DEFAULT_EFFECT_OPTIONS, ...effectOptions, colors: { ...DEFAULT_EFFECT_OPTIONS.colors, ...effectOptions.colors } };
11041101
options.distortion = distortions[options.distortion];
11051102

11061103
const myApp = new App(container, options);

‎src/ts-default/Backgrounds/Hyperspeed/Hyperspeed.tsx‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1212,11 +1212,9 @@ class App {
12121212
}
12131213
}
12141214

1215-
const Hyperspeed: FC<HyperspeedProps> = ({ effectOptions = {} }) => {
1216-
const mergedOptions: HyperspeedOptions = {
1217-
...defaultOptions,
1218-
...effectOptions
1219-
};
1215+
const DEFAULT_EFFECT_OPTIONS: Partial<HyperspeedOptions> = {};
1216+
1217+
const Hyperspeed: FC<HyperspeedProps> = ({ effectOptions = DEFAULT_EFFECT_OPTIONS }) => {
12201218
const hyperspeed = useRef<HTMLDivElement>(null);
12211219
const appRef = useRef<App | null>(null);
12221220

@@ -1234,7 +1232,7 @@ const Hyperspeed: FC<HyperspeedProps> = ({ effectOptions = {} }) => {
12341232
const container = hyperspeed.current;
12351233
if (!container) return;
12361234

1237-
const options = { ...mergedOptions };
1235+
const options: HyperspeedOptions = { ...defaultOptions, ...effectOptions, colors: { ...defaultOptions.colors, ...effectOptions.colors } };
12381236
if (typeof options.distortion === 'string') {
12391237
options.distortion = distortions[options.distortion];
12401238
}
@@ -1248,7 +1246,7 @@ const Hyperspeed: FC<HyperspeedProps> = ({ effectOptions = {} }) => {
12481246
appRef.current.dispose();
12491247
}
12501248
};
1251-
}, [mergedOptions]);
1249+
}, [effectOptions]);
12521250

12531251
return <div id="lights" ref={hyperspeed}></div>;
12541252
};

‎src/ts-tailwind/Backgrounds/Hyperspeed/Hyperspeed.tsx‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1216,11 +1216,9 @@ class App {
12161216
}
12171217
}
12181218

1219-
const Hyperspeed: FC<HyperspeedProps> = ({ effectOptions = {} }) => {
1220-
const mergedOptions: HyperspeedOptions = {
1221-
...defaultOptions,
1222-
...effectOptions
1223-
};
1219+
const DEFAULT_EFFECT_OPTIONS: Partial<HyperspeedOptions> = {};
1220+
1221+
const Hyperspeed: FC<HyperspeedProps> = ({ effectOptions = DEFAULT_EFFECT_OPTIONS }) => {
12241222
const hyperspeed = useRef<HTMLDivElement>(null);
12251223
const appRef = useRef<App | null>(null);
12261224

@@ -1238,7 +1236,7 @@ const Hyperspeed: FC<HyperspeedProps> = ({ effectOptions = {} }) => {
12381236
const container = hyperspeed.current;
12391237
if (!container) return;
12401238

1241-
const options = { ...mergedOptions };
1239+
const options: HyperspeedOptions = { ...defaultOptions, ...effectOptions, colors: { ...defaultOptions.colors, ...effectOptions.colors } };
12421240
if (typeof options.distortion === 'string') {
12431241
options.distortion = distortions[options.distortion];
12441242
}
@@ -1252,7 +1250,7 @@ const Hyperspeed: FC<HyperspeedProps> = ({ effectOptions = {} }) => {
12521250
appRef.current.dispose();
12531251
}
12541252
};
1255-
}, [mergedOptions]);
1253+
}, [effectOptions]);
12561254

12571255
return <div id="lights" className="w-full h-full" ref={hyperspeed}></div>;
12581256
};

0 commit comments

Comments
 (0)