Ваше сообщение коммита

.claude/settings.local.json

@@ -0,0 +1,10 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(npm install:*)",
+      "Bash(cp:*)",
+      "mcp__ide__getDiagnostics"
+    ],
+    "deny": []
+  }
+}

.replit

@@ -0,0 +1,8 @@
+modules = ["nodejs-20", "web"]
+run = "npm run start"
+
+[nix]
+channel = "stable-24_05"
+
+[deployment]
+run = ["sh", "-c", "npm run start"]

src/components/three/ScreenPlane.tsx

@@ -1,6 +1,6 @@
-import React, { FC } from 'react';
+import React, { FC, useEffect, useState, useRef } from 'react';
 import * as THREE from 'three';
-import { Plane, useTexture } from '@react-three/drei';
+import { Plane } from '@react-three/drei';
 import { useFrame, useThree } from '@react-three/fiber';
 import fragmentShader from '../../modules/glsl/raymarchingFrag.glsl';
 import vertexShader from '../../modules/glsl/raymarchingVert.glsl';
@@ -9,14 +9,65 @@ import { publicPath } from '../../modules/utils';
 
 export const ScreenPlane: FC = () => {
 	const { viewport } = useThree()
+	const [texture, setTexture] = useState<THREE.Texture | null>(null)
+	const textureRef = useRef<THREE.Texture | null>(null)
 
-	const texture = useTexture(publicPath('/assets/images/wlop.jpg'))
+	useEffect(() => {
-	texture.encoding = THREE.sRGBEncoding
+		let mounted = true
-	texture.wrapS = THREE.MirroredRepeatWrapping
+		let createdTexture: THREE.Texture | null = null
-	texture.wrapT = THREE.MirroredRepeatWrapping
+
+		// Load SVG as high-resolution texture
+		const svgUrl = publicPath('/assets/images/background.svg')
+		
+		// Create an image element to get SVG dimensions
+		const img = new Image()
+		img.onload = () => {
+			if (!mounted) return
+
+			// Create canvas with high resolution
+			const canvas = document.createElement('canvas')
+			const scale = 2 // Increase resolution
+			canvas.width = img.width * scale
+			canvas.height = img.height * scale
+			const ctx = canvas.getContext('2d')
+			
+			if (ctx) {
+				ctx.scale(scale, scale)
+				ctx.drawImage(img, 0, 0, img.width, img.height)
+				
+				// Create texture from canvas
+				const canvasTexture = new THREE.CanvasTexture(canvas)
+				canvasTexture.colorSpace = THREE.SRGBColorSpace
+				canvasTexture.wrapS = THREE.MirroredRepeatWrapping
+				canvasTexture.wrapT = THREE.MirroredRepeatWrapping
+				canvasTexture.minFilter = THREE.LinearFilter
+				canvasTexture.magFilter = THREE.LinearFilter
+				canvasTexture.anisotropy = 16
+				
+				createdTexture = canvasTexture
+				textureRef.current = canvasTexture
+				setTexture(canvasTexture)
+			}
+		}
+		img.onerror = () => {
+			console.error('Failed to load SVG background:', svgUrl)
+		}
+		img.src = svgUrl
+		
+		return () => {
+			mounted = false
+			if (createdTexture) {
+				createdTexture.dispose()
+			}
+			if (textureRef.current) {
+				textureRef.current.dispose()
+				textureRef.current = null
+			}
+		}
+	}, [])
 
 	// Calculate screen size and texture aspect ratio
-	const textureAspect = texture.image.width / texture.image.height
+	const textureAspect = texture ? texture.image.width / texture.image.height : 1
 	const aspect = viewport.aspect
 	const ratio = aspect / textureAspect
 	const [x, y] = aspect < textureAspect ? [ratio, 1] : [1, 1 / ratio]
@@ -36,14 +87,19 @@ export const ScreenPlane: FC = () => {
 	}
 
 	useFrame(() => {
-		datas.forEach((data, i) => {
+		if (texture) {
-			shader.uniforms.u_datas.value[i].position.copy(data.position)
+			datas.forEach((data, i) => {
-		})
+				shader.uniforms.u_datas.value[i].position.copy(data.position)
+			})
+		}
 	})
 
+	// Return null if texture is not loaded yet
+	if (!texture) return null
+
 	return (
 		<Plane args={[1, 1]} scale={[viewport.width, viewport.height, 1]}>
 			<shaderMaterial args={[shader]} />
 		</Plane>
 	)
-}
+}

src/components/three/Simulator.tsx

@@ -70,13 +70,13 @@ const PhysicalSphere: FC<{ data: Data }> = ({ data }) => {
 				.normalize()
 				.multiplyScalar(-scale * 30)
 
-			return api.applyForce(vec.toArray(), [0, 0, 0])
+			api.applyForce(vec.toArray(), [0, 0, 0])
 		})
 
 		return () => {
 			unsubscribe()
 		}
-	}, [api])
+	}, [api, data, scale])
 
 	return null
 }

src/components/three/TCanvas.tsx

@@ -10,11 +10,10 @@ export const TCanvas: FC = () => {
 			camera={{
 				position: [0, 0, 15],
 				fov: 50,
-				aspect: window.innerWidth / window.innerHeight,
 				near: 0.1,
 				far: 2000
 			}}
-			dpr={window.devicePixelRatio}>
+			dpr={[1, 2]}>
 			<color attach="background" args={['#000']} />
 			<Suspense fallback={null}>
 				<Simulator />

src/components/three/postprocessing/PostProcessing.tsx

@@ -1,10 +1,10 @@
-import React, { FC } from 'react';
+import React, { FC, useMemo } from 'react';
 import { Effects } from '@react-three/drei';
 import { useFrame } from '@react-three/fiber';
 import { FXAA } from './pass/FXAA';
 
 export const PostProcessing: FC = () => {
-	const fxaa = new FXAA()
+	const fxaa = useMemo(() => new FXAA(), [])
 
 	useFrame(({ size }) => {
 		fxaa.update(size)