Remove fps checks

NuubDev · Nov 19, 2022 · 3efc004 · 3efc004
1 parent dd29ae3
commit 3efc004
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 112 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -43,8 +43,8 @@
  "next": "^12.2.5",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
- "three": "^0.143.0",
- "three-stdlib": "^2.13.0"
+ "three": "^0.146.0",
+ "three-stdlib": "^2.18.1"
  },
  "scripts": {
  "dev": "next dev",

diff --git a/src/components/Model/Model.js b/src/components/Model/Model.js
@@ -1,6 +1,5 @@
 import { animate, useReducedMotion, useSpring } from 'framer-motion';
 import { useInViewport } from 'hooks';
-import { useFps } from 'hooks/useFps';
 import {
  createRef,
  startTransition,
@@ -86,7 +85,6 @@ export const Model = ({
  const reduceMotion = useReducedMotion();
  const rotationX = useSpring(0, rotationSpringConfig);
  const rotationY = useSpring(0, rotationSpringConfig);
- const { measureFps, isLowFps } = useFps(isInViewport);
 
  useEffect(() => {
  const { clientWidth, clientHeight } = container.current;
@@ -280,14 +278,7 @@ export const Model = ({
  modelGroup.current.rotation.y = rotationY.get();
 
  renderer.current.render(scene.current, camera.current);
- measureFps();
-
- if (isLowFps.current) {
- renderer.current.setPixelRatio(1);
- } else {
- renderer.current.setPixelRatio(2);
- }
- }, [blurShadow, isLowFps, measureFps, rotationX, rotationY]);
+ }, [blurShadow, rotationX, rotationY]);
 
  // Handle mouse move animation
  useEffect(() => {

diff --git a/src/hooks/useFps.js b/src/hooks/useFps.js
diff --git a/src/layouts/Home/DisplacementSphere.js b/src/layouts/Home/DisplacementSphere.js
@@ -2,7 +2,6 @@ import { useTheme } from 'components/ThemeProvider';
 import { Transition } from 'components/Transition';
 import { useReducedMotion, useSpring } from 'framer-motion';
 import { useInViewport, useWindowSize } from 'hooks';
-import { useFps } from 'hooks/useFps';
 import { startTransition, useEffect, useRef } from 'react';
 import {
  AmbientLight,
@@ -49,7 +48,6 @@ export const DisplacementSphere = props => {
  const windowSize = useWindowSize();
  const rotationX = useSpring(0, springConfig);
  const rotationY = useSpring(0, springConfig);
- const { measureFps, isLowFps } = useFps(isInViewport);
 
  useEffect(() => {
  const { innerWidth, innerHeight } = window;
@@ -173,14 +171,6 @@ export const DisplacementSphere = props => {
  sphere.current.rotation.y = rotationY.get();
 
  renderer.current.render(scene.current, camera.current);
-
- measureFps();
-
- if (isLowFps.current) {
- renderer.current.setPixelRatio(0.5);
- } else {
- renderer.current.setPixelRatio(1);
- }
  };
 
  if (!reduceMotion && isInViewport) {
@@ -192,7 +182,7 @@ export const DisplacementSphere = props => {
  return () => {
  cancelAnimationFrame(animation);
  };
- }, [isInViewport, measureFps, reduceMotion, isLowFps, rotationX, rotationY]);
+ }, [isInViewport, reduceMotion, rotationX, rotationY]);
 
  return (
  <Transition in timeout={3000}>

diff --git a/src/pages/projects/smart-sparrow/Earth.js b/src/pages/projects/smart-sparrow/Earth.js
@@ -12,7 +12,6 @@ import { tokens } from 'components/ThemeProvider/theme';
 import { Transition } from 'components/Transition';
 import { useReducedMotion, useSpring } from 'framer-motion';
 import { useInViewport, useWindowSize } from 'hooks';
-import { useFps } from 'hooks/useFps';
 import {
  createContext,
  memo,
@@ -151,7 +150,6 @@ export const Earth = ({
  const chunkYSpring = useSpring(0, chunkSpringConfig);
  const chunkZSpring = useSpring(0, chunkSpringConfig);
  const opacitySpring = useSpring(0, opacitySpringConfig);
- const { measureFps, isLowFps } = useFps(inViewport);
 
  const renderFrame = useCallback(() => {
  if (!inViewport) {
@@ -187,15 +185,7 @@ export const Earth = ({
  element.dataset.occluded = false;
  }
  });
-
- measureFps();
-
- if (isLowFps.current) {
- renderer.current.setPixelRatio(0.5);
- } else {
- renderer.current.setPixelRatio(1);
- }
- }, [inViewport, measureFps, isLowFps]);
+ }, [inViewport]);
 
  useEffect(() => {
  mounted.current = true;

diff --git a/src/pages/projects/volkihar-knight/Armor.js b/src/pages/projects/volkihar-knight/Armor.js
@@ -10,7 +10,6 @@ import { tokens } from 'components/ThemeProvider/theme';
 import { Transition } from 'components/Transition';
 import { useReducedMotion, useSpring } from 'framer-motion';
 import { useInViewport } from 'hooks';
-import { useFps } from 'hooks/useFps';
 import { startTransition, useCallback, useEffect, useRef, useState } from 'react';
 import {
  ACESFilmicToneMapping,
@@ -55,7 +54,6 @@ export const Armor = ({
  const reduceMotion = useReducedMotion();
  const rotationX = useSpring(0, rotationSpringConfig);
  const rotationY = useSpring(0, rotationSpringConfig);
- const { measureFps, isLowFps } = useFps(isInViewport);
 
  useEffect(() => {
  const { clientWidth, clientHeight } = container.current;
@@ -160,15 +158,7 @@ export const Armor = ({
  // Handle render passes for a single frame
  const renderFrame = useCallback(() => {
  renderer.current.render(scene.current, camera.current);
-
- measureFps();
-
- if (isLowFps.current) {
- renderer.current.setPixelRatio(1);
- } else {
- renderer.current.setPixelRatio(2);
- }
- }, [measureFps, isLowFps]);
+ }, []);
 
  // Handle mouse move animation
  useEffect(() => {