From a330847869346701bb7f79561afde9ec1174a974 Mon Sep 17 00:00:00 2001 From: Hamish Williams Date: Sun, 24 Apr 2022 21:23:16 +1000 Subject: [PATCH] Use startTransition --- scripts/generate-sitemap.js | 4 ++-- src/components/Carousel/Carousel.js | 2 ++ src/components/Model/Model.js | 17 +++++++++++++---- src/components/Navbar/navData.js | 8 ++++---- src/hooks/index.js | 6 +++--- src/layouts/Home/DisplacementSphere.js | 5 ++--- src/layouts/Home/Home.js | 2 +- src/pages/projects/smart-sparrow/Earth.js | 13 ++++++++----- src/pages/projects/volkihar-knight/Armor.js | 13 +++++++------ src/utils/three.js | 1 - 10 files changed, 42 insertions(+), 29 deletions(-) diff --git a/scripts/generate-sitemap.js b/scripts/generate-sitemap.js index 19a3268f..d00d4ed9 100644 --- a/scripts/generate-sitemap.js +++ b/scripts/generate-sitemap.js @@ -16,7 +16,7 @@ function addPage(page) { return ` ${`${process.env.NEXT_PUBLIC_WEBSITE_URL}${route}`} - hourly + monthly `; } @@ -30,7 +30,7 @@ async function addPost(post) { return ` ${`${process.env.NEXT_PUBLIC_WEBSITE_URL}${path}`} - hourly + monthly `; } diff --git a/src/components/Carousel/Carousel.js b/src/components/Carousel/Carousel.js index 66398fa2..659c3c3a 100644 --- a/src/components/Carousel/Carousel.js +++ b/src/components/Carousel/Carousel.js @@ -73,7 +73,9 @@ export const Carousel = ({ width, height, images, placeholder, ...rest }) => { renderer.current = new WebGLRenderer({ canvas: canvas.current, antialias: false, + alpha: true, powerPreference: 'high-performance', + failIfMajorPerformanceCaveat: true, }); camera.current = new OrthographicCamera(...cameraOptions); scene.current = new Scene(); diff --git a/src/components/Model/Model.js b/src/components/Model/Model.js index d96bb6db..47222f93 100644 --- a/src/components/Model/Model.js +++ b/src/components/Model/Model.js @@ -1,6 +1,13 @@ import { animate, useReducedMotion, useSpring } from 'framer-motion'; import { useInViewport } from 'hooks'; -import { createRef, useCallback, useEffect, useRef, useState } from 'react'; +import { + createRef, + startTransition, + useCallback, + useEffect, + useRef, + useState, +} from 'react'; import { AmbientLight, Color, @@ -84,6 +91,7 @@ export const Model = ({ alpha: true, antialias: false, powerPreference: 'high-performance', + failIfMajorPerformanceCaveat: true, }); renderer.current.setPixelRatio(2); @@ -380,8 +388,6 @@ const Device = ({ let loadFullResTexture; let playAnimation; - const image = await resolveSrcFromSrcSet(texture); - const [placeholder, gltf] = await Promise.all([ await textureLoader.current.loadAsync(texture.placeholder.src), await modelLoader.loadAsync(url), @@ -407,6 +413,7 @@ const Device = ({ applyScreenTexture(placeholder, placeholderScreen.current); loadFullResTexture = async () => { + const image = await resolveSrcFromSrcSet(texture); const fullSize = await textureLoader.current.loadAsync(image); await applyScreenTexture(fullSize, node); @@ -508,7 +515,9 @@ const Device = ({ } }; - onLoad(); + startTransition(() => { + onLoad(); + }); return () => { animation?.stop(); diff --git a/src/components/Navbar/navData.js b/src/components/Navbar/navData.js index d1e47f40..66bde562 100644 --- a/src/components/Navbar/navData.js +++ b/src/components/Navbar/navData.js @@ -7,10 +7,10 @@ export const navLinks = [ label: 'Details', pathname: '/#details', }, - { - label: 'Articles', - pathname: '/articles', - }, + // { + // label: 'Articles', + // pathname: '/articles', + // }, { label: 'Contact', pathname: '/contact', diff --git a/src/hooks/index.js b/src/hooks/index.js index dc3baf21..8b361477 100644 --- a/src/hooks/index.js +++ b/src/hooks/index.js @@ -1,11 +1,11 @@ export * from './useAppContext'; export * from './useFormInput'; +export * from './useFoucFix'; +export * from './useHasMounted'; export * from './useInterval'; export * from './useInViewport'; export * from './useLocalStorage'; export * from './useParallax'; export * from './usePrevious'; -export * from './useWindowSize'; export * from './useScrollToHash'; -export * from './useFoucFix'; -export * from './useHasMounted'; +export * from './useWindowSize'; diff --git a/src/layouts/Home/DisplacementSphere.js b/src/layouts/Home/DisplacementSphere.js index be2d6d2c..350709c4 100644 --- a/src/layouts/Home/DisplacementSphere.js +++ b/src/layouts/Home/DisplacementSphere.js @@ -12,7 +12,6 @@ import { PerspectiveCamera, Scene, SphereBufferGeometry, - UniformsLib, UniformsUtils, Vector2, WebGLRenderer, @@ -56,7 +55,9 @@ export const DisplacementSphere = props => { renderer.current = new WebGLRenderer({ canvas: canvasRef.current, antialias: false, + alpha: true, powerPreference: 'high-performance', + failIfMajorPerformanceCaveat: true, }); renderer.current.setSize(innerWidth, innerHeight); renderer.current.setPixelRatio(1); @@ -70,8 +71,6 @@ export const DisplacementSphere = props => { material.current = new MeshPhongMaterial(); material.current.onBeforeCompile = shader => { uniforms.current = UniformsUtils.merge([ - UniformsLib['ambient'], - UniformsLib['lights'], shader.uniforms, { time: { type: 'f', value: 0 } }, ]); diff --git a/src/layouts/Home/Home.js b/src/layouts/Home/Home.js index 9e598e43..18e51061 100644 --- a/src/layouts/Home/Home.js +++ b/src/layouts/Home/Home.js @@ -18,7 +18,7 @@ import { ProjectSummary } from 'layouts/Home/ProjectSummary'; import { useEffect, useRef, useState } from 'react'; import styles from './Home.module.css'; -const disciplines = ['Developer', 'Prototyper', 'Animator', 'Illustrator', 'Mod maker']; +const disciplines = ['Developer', 'Prototyper', 'Animator', 'Illustrator', 'Modder']; export const Home = () => { const [visibleSections, setVisibleSections] = useState([]); diff --git a/src/pages/projects/smart-sparrow/Earth.js b/src/pages/projects/smart-sparrow/Earth.js index 9d910f3f..80df83d0 100644 --- a/src/pages/projects/smart-sparrow/Earth.js +++ b/src/pages/projects/smart-sparrow/Earth.js @@ -15,6 +15,7 @@ import { useInViewport, useWindowSize } from 'hooks'; import { createContext, memo, + startTransition, useCallback, useContext, useEffect, @@ -193,7 +194,9 @@ export const Earth = ({ renderer.current = new WebGLRenderer({ canvas: canvas.current, antialias: false, + alpha: true, powerPreference: 'high-performance', + failIfMajorPerformanceCaveat: true, }); renderer.current.setPixelRatio(1); renderer.current.outputEncoding = sRGBEncoding; @@ -394,13 +397,13 @@ export const Earth = ({ } }; - setTimeout(() => { + startTransition(() => { handleLoad(); - }, 2000); - setTimeout(() => { - setLoaderVisible(true); - }, 3000); + setTimeout(() => { + setLoaderVisible(true); + }, 1000); + }); }, [loaded, position, scale]); useEffect(() => { diff --git a/src/pages/projects/volkihar-knight/Armor.js b/src/pages/projects/volkihar-knight/Armor.js index 93997bd8..086c9329 100644 --- a/src/pages/projects/volkihar-knight/Armor.js +++ b/src/pages/projects/volkihar-knight/Armor.js @@ -10,7 +10,7 @@ import { tokens } from 'components/ThemeProvider/theme'; import { Transition } from 'components/Transition'; import { useReducedMotion, useSpring } from 'framer-motion'; import { useInViewport } from 'hooks'; -import { useCallback, useEffect, useRef, useState } from 'react'; +import { startTransition, useCallback, useEffect, useRef, useState } from 'react'; import { ACESFilmicToneMapping, CubeTextureLoader, @@ -63,6 +63,7 @@ export const Armor = ({ alpha: true, antialias: false, powerPreference: 'high-performance', + failIfMajorPerformanceCaveat: true, }); renderer.current.setPixelRatio(2); @@ -126,13 +127,13 @@ export const Armor = ({ renderFrame(); }; - setTimeout(() => { + startTransition(() => { load(); - }, 2000); - setTimeout(() => { - setLoaderVisible(true); - }, 3000); + setTimeout(() => { + setLoaderVisible(true); + }, 1000); + }); const unsubscribeX = rotationX.onChange(value => { modelGroup.current.rotation.x = value; diff --git a/src/utils/three.js b/src/utils/three.js index a7644960..daa34494 100644 --- a/src/utils/three.js +++ b/src/utils/three.js @@ -48,7 +48,6 @@ export const cleanMaterial = material => { */ export const cleanRenderer = renderer => { renderer.dispose(); - renderer.forceContextLoss(); renderer = null; };