web starts reloading infinitely
WebGL warning: <Present>: Swap chain surface creation failed. WebGL context was lost. WebGL warning: <Present>: Swap chain surface creation failed. WebGL context was lost. WebGL warning: <Present>: Swap chain surface creation failed. WebGL context was lost. WebGL warning: <Present>: Swap chain surface creation failed. WebGL context was lost. WebGL warning: <Present>: Swap chain surface creation failed. WebGL context was lost. THREE.WebGLRenderer: Context Lost. 5 three.module.js:28674:11 THREE.WebGLRenderer: Context Restored. 5 three.module.js:28682:11
I got these errors on my console when I load the page. Everything is correct, but after doing some actions (button clicks or text inputting), the web is crashing, and I get these errors in the console, and it starts infinitely reloading.
You can try it here: https://west.software/
All Replies (4)
Does it still happen in a new profile? An easy way to test a new profile is to install Developer Edition and see if it happens there or refresh your existing profile.
Thank you, for your answer!
Unfortunatelly it didn't help.
As i noticed the error is related to this line: frameloop="always" when I change it to frameloop="demand", web works good, but I wanna use "always"
The importang thing I noticed that before infinite reloading CanvasRender is usin 98 CPU
import React, { Suspense } from "react"; import { Canvas } from "@react-three/fiber"; import { Decal, Float, OrbitControls, Preload, useTexture } from "@react-three/drei";
import CanvasLoader from "./Loader"
const Ball = (props) => {
const [decal] = useTexture([props.imgUrl]) return ( <Float speed={.005} rotationIntensity={1} floatIntensity={2}> <ambientLight intensity={.25} /> <directionalLight position={[0, 0, .05]} /> <mesh castShadow receiveShadow scale={2.75}> <icosahedronGeometry args={[1, 1]} /> <meshStandardMaterial color="#8176AF" polygonOffset polygonOffsetFactor={1} flatShading /> <Decal position={[0, 0, 1]} rotation={[2 * Math.PI, 0, 6.25]} flatShading map={decal} /> </mesh> </Float> )
}
const BallCanvas = ({ icon }) => {
return ( <Canvas frameloop="always" gl={{ preserveDrawingBuffer: true }} > <Suspense fallback={<CanvasLoader/>}> <OrbitControls enableZoom={false} /> <Ball imgUrl={icon} /> </Suspense> <Preload all /> </Canvas> ) </pre>}
export default BallCanvas;
The site fails to load for me with WebGL disabled (webgl.disabled set to true in about:config) which can also happen if there is a graphics failure. Since it is only being used for some ball decorations, it should be able to fail gracefully and load without them.
for me it is set to true, but the problem is still here