From f304782ae88505e77345976f88ae9da5e4d9927d Mon Sep 17 00:00:00 2001 From: Denis Manherz Date: Sat, 20 May 2023 01:14:17 +0200 Subject: [PATCH] commit before breaking everything --- index.html | 6 + src/Scene1.jsx | 2 +- src/SharedPlanetState.jsx | 48 ++++- src/customCamera.jsx | 46 +++-- src/omnioverlay.jsx | 35 +++- src/planet.jsx | 163 ++++++++++++++++ src/styles.css | 11 +- src/sunscene.jsx | 396 ++++++++++++++++++++++++++++++++++++-- 8 files changed, 665 insertions(+), 42 deletions(-) diff --git a/index.html b/index.html index 26f8134..bc75655 100644 --- a/index.html +++ b/index.html @@ -2,6 +2,12 @@ Why no working +
diff --git a/src/Scene1.jsx b/src/Scene1.jsx index 14f90a3..8a924df 100644 --- a/src/Scene1.jsx +++ b/src/Scene1.jsx @@ -130,7 +130,7 @@ const WaveShaderMaterial = shaderMaterial( varying vec2 vUv; void main(){ - gl_FragColor = vec4(cos(vUv.x + uTime*2.0) * uColor, 1.0); + gl_FragColor = vec4(cos(vUv.x - uTime*2.0) * uColor, 1.0); }` ); diff --git a/src/SharedPlanetState.jsx b/src/SharedPlanetState.jsx index 720c48c..6b65f47 100644 --- a/src/SharedPlanetState.jsx +++ b/src/SharedPlanetState.jsx @@ -28,26 +28,24 @@ import { MyContext } from "./Scene3.jsx"; export const PlanetOverlayContext = createContext(); +import { Planet } from "./planet.jsx"; + export const SharedPlanetState = () => { const { customData } = useContext(MyContext); let [nameVis, setNameVis] = useState("visible"); let [iconVis, setIconVis] = useState("visible"); + const lastPositionUpdate = useRef(0); + const handleVisibility = () => { if (nameVis == "visible" && iconVis == "visible") { setNameVis("hidden"); - console.log(nameVis); - console.log("hiding names"); } else if (nameVis == "hidden" && iconVis == "visible") { setIconVis("hidden"); - console.log(nameVis); - console.log("hiding icons"); } else if (nameVis == "hidden" && iconVis == "hidden") { setIconVis("visible"); setNameVis("visible"); - console.log(nameVis); - console.log("showing everything"); } }; customData.current["handleVisibility"] = handleVisibility; @@ -58,7 +56,7 @@ export const SharedPlanetState = () => { customData.current["handleReset"] = handleReset; //set speed (timeinterval between positions 60000ms*speed) - const [speed, setSpeed] = useState(1); + const [speed, setSpeed] = useState(60); const updateSpeed = (newSpeed) => { setSpeed(newSpeed); setSpeedChanged(true); @@ -104,6 +102,42 @@ export const SharedPlanetState = () => { //console.log(oldState.length); }; + const dataRef = useRef(null); + const loadingRef = useRef(false); + const errRef = useRef(null); + + useFrame(({ clock }) => { + const fetchData = async () => { + fetch(`http://127.0.0.1:8000/duration`).then((response) => { + if (!response.ok) { + throw new Error( + `This is an HTTP error: The status is ${response.status}` + ); + } + loadingRef.current = true; + response + .json() + .then((data) => { + dataRef.current = data; + errRef.current = null; + }) + .catch((err) => { + dataRef.current = null; + errRef.current = err.message; + }) + .finally(() => { + loadingRef.current = false; + }); + }); + }; + const timeSinceLastUpdate = clock.elapsedTime - lastPositionUpdate.current; + if (timeSinceLastUpdate >= 5) { + fetchData(); + console.log(dataRef.current); + lastPositionUpdate.current = clock.elapsedTime; + } + }); + return ( <> diff --git a/src/customCamera.jsx b/src/customCamera.jsx index 85e2024..77cc226 100644 --- a/src/customCamera.jsx +++ b/src/customCamera.jsx @@ -31,10 +31,10 @@ export function CustomCamera(props) { const mouseUp = useRef(false); let _mouseStart = useRef(new THREE.Vector2(0, 0)); let _mouseEnd = useRef(new THREE.Vector2(0, 0)); - let distance = useRef(0); + let distance = useRef(200); const [currObj, setCurrObj] = useState(undefined); - let rotate = useRef(false); + let rotate = useRef(true); const handleMouseWheel = (event) => { const delta = Math.sign(event.deltaY); @@ -47,7 +47,7 @@ export function CustomCamera(props) { const deltaX = event.movementX; const deltaY = event.movementY; - const rotationSpeed = 0.01; + const rotationSpeed = 0.005; // Create quaternions for rotation around X and Y axes const quaternionX = new THREE.Quaternion().setFromAxisAngle( @@ -63,7 +63,8 @@ export function CustomCamera(props) { const deltaQuaternion = quaternionY.multiply(quaternionX); // Apply the rotation to the camera quaternion - camGroup.current.quaternion.multiply(deltaQuaternion); + if (camGroup.current.quaternion) + camGroup.current.quaternion.multiply(deltaQuaternion); } }; @@ -84,10 +85,17 @@ export function CustomCamera(props) { customData.current["handleLookAt"] = handleLookAt; const handleZoom = (delta) => { - const zoomSpeed = 0.1; + let zoomSpeed = 0.01; + if (camGroup && cameraRef) { + zoomSpeed *= cameraRef.current.position.distanceTo( + camGroup.current.position + ); + console.log("asdasd"); + } + function newDistance(prevDistance) { const newDistance = prevDistance + delta * zoomSpeed; - return Math.max(1, newDistance); // Adjust the minimum distance as needed + return Math.max(0, newDistance); // Adjust the minimum distance as needed } distance.current = newDistance(distance.current); console.log(distance); @@ -113,7 +121,7 @@ export function CustomCamera(props) { cameraRef.current.aspect = size.width / size.height; cameraRef.current.updateProjectionMatrix(); } - cameraRef.current.position.copy(new THREE.Vector3(0, 0, 1000)); + cameraRef.current.position.copy(new THREE.Vector3(0, 0, 400)); window.addEventListener("mousedown", handleMouseDown); window.addEventListener("mouseup", handleMouseUp); window.addEventListener("mousemove", handleMouseMove); @@ -124,39 +132,49 @@ export function CustomCamera(props) { set({ camera: cameraRef.current }); }); + let lerpedilerp = useRef(0.01); + useFrame(({ clock }) => { cameraRef.current.updateProjectionMatrix(); if (animate && currObj) { distance.current = currObj.children[1].geometry.boundingSphere.radius * 2.5; - camGroup.current.position.lerp(currObj.position, 0.02); + camGroup.current.position.lerp(currObj.position, lerpedilerp.current); cameraRef.current.position.lerp( new THREE.Vector3( 0, 0, currObj.children[1].geometry.boundingSphere.radius * 2.5 ), - 0.02 + lerpedilerp.current ); cameraRef.current.lookAt(currObj.position); rotate.current = false; + lerpedilerp.current *= 1.1; + console.log(camGroup.current.position.distanceTo(currObj.position)); - if (camGroup.current.position.distanceTo(currObj.position) < 0.2) { + if (camGroup.current.position.distanceTo(currObj.position) < 0.1) { currObj.add(camGroup.current); camGroup.current.position.copy(new THREE.Vector3(0, 0, 0), 0.2); rotate.current = true; setAnimate(false); } } - if (rotate.current) { + if (rotate.current && currObj) { /* cameraRef.current.quaternion.multiply(lastQ.current); */ //camGroup.current.rotation.x += 0.005; - cameraRef.current.position.copy( - new THREE.Vector3(0, 0, distance.current) - ); + lerpedilerp.current = 0.01; + if ( + distance.current > + currObj.children[1].geometry.boundingSphere.radius * 2.5 + ) { + cameraRef.current.position.copy( + new THREE.Vector3(0, 0, distance.current) + ); + } } }); diff --git a/src/omnioverlay.jsx b/src/omnioverlay.jsx index 75b5bad..ffc9f5d 100644 --- a/src/omnioverlay.jsx +++ b/src/omnioverlay.jsx @@ -30,7 +30,7 @@ export const ScreenOverlay = () => { return ( <> -
+ {/*
{ className="slider" id="myRange" onChange={handleChange} - /> - - + /> */} +
+
+ + + + +
+
+ +
diff --git a/src/planet.jsx b/src/planet.jsx index e69de29..0a4da09 100644 --- a/src/planet.jsx +++ b/src/planet.jsx @@ -0,0 +1,163 @@ +import { + Canvas, + extend, + useFrame, + useLoader, + useThree, +} from "@react-three/fiber"; +import { + shaderMaterial, + OrbitControls, + Line, + Html, + Text, +} from "@react-three/drei"; +import React, { + useRef, + Suspense, + useLayoutEffect, + useState, + useEffect, + useContext, +} from "react"; +import * as THREE from "three"; +import glsl from "glslify"; +import { TextureLoader } from "three/src/loaders/TextureLoader"; +import { + Selection, + Select, + EffectComposer, + Outline, + Scanline, +} from "@react-three/postprocessing"; +import "./styles.css"; + +import { PlanetOverlay } from "./planetOverlay"; +import { PlanetInfo } from "./planetInfo"; +import { PlanetPath } from "./path"; +import { MyContext } from "./Scene3"; +import { PlanetOverlayContext } from "./SharedPlanetState"; + +export const Planet = (props) => { + const distanceScaleFactor = 1000000; + //These are the props i need + let posArr = props.posArr; + console.log(props.posArr); + let speed = props.speed; + const lineArr = useRef([]); + const line = useRef(); + const clouds = useRef("clouds"); + const earth = useRef(); + const group = useRef(); + const first = useRef(true); + const lastPositionUpdate = useRef(0); + + let planetPositionIndex = useRef(0); + + useLayoutEffect(() => { + group.current.userData.name = "Earth"; + group.current.userData.nearOvOp = 60; + group.current.userData.scolor = "lightgreen"; + }); + + useFrame(({ clock }) => { + const timeSinceLastUpdate = clock.elapsedTime - lastPositionUpdate.current; + if (timeSinceLastUpdate >= 2 || speedChanged) { + //console.log("gethis"); + getPosition("earth", setPosArr, posArr, planetPositionIndex.current); + lastPositionUpdate.current = clock.elapsedTime; + //console.log(group.current); + } + //console.log("arrlength" + posArr.length); + clouds.current.rotation.y += 0.00025; + earth.current.rotation.y += 0.00015; + + //if speed is 0 set the date to current date get from posArr + //search for current date in posArr an set planetPositionIndex + if (speed == 0) planetPositionIndex.current = 0; + if ( + true && + planetPositionIndex.current < posArr.length && + posArr.length > 0 + ) { + group.current.position.set( + Number( + posArr[planetPositionIndex.current].position.x / distanceScaleFactor + ), + Number( + posArr[planetPositionIndex.current].position.y / distanceScaleFactor + ), + Number( + posArr[planetPositionIndex.current].position.z / distanceScaleFactor + ) + ); + planetPositionIndex.current += Number(1); + lineArr.current.push( + new THREE.Vector3( + Number( + posArr[planetPositionIndex.current].position.x / distanceScaleFactor + ), + Number( + posArr[planetPositionIndex.current].position.y / distanceScaleFactor + ), + Number( + posArr[planetPositionIndex.current].position.z / distanceScaleFactor + ) + ) + ); + } + }, []); + + const col = useLoader(TextureLoader, "../img/earth/6k_earth_daymap.jpg"); + const bump = useLoader(TextureLoader, "../img/earth/earth_bump_1k.jpg"); + const spec = useLoader( + TextureLoader, + "../img/earth/6k_earth_specular_map.jpg" + ); + const norm = useLoader(TextureLoader, "../img/earth/6k_earth_normal_map.jpg"); + const cloudMap = useLoader(TextureLoader, "../img/earth/6k_earth_clouds.jpg"); + const axisPoints = [ + new THREE.Vector3(0, 6371.0 / 6000 + 0.5, 0), + new THREE.Vector3(0, -(6371.0 / 6000 + 0.5), 0), + ]; + useLayoutEffect(() => { + line.current.geometry.setFromPoints(axisPoints); + }); + return ( + <> + + + + + + + + + + + + + + + + + + ); +}; diff --git a/src/styles.css b/src/styles.css index 4489e09..c853963 100644 --- a/src/styles.css +++ b/src/styles.css @@ -31,9 +31,6 @@ canvas { display: block; } -.overlay { -} - .planetInfo { z-index: 12; position: absolute; @@ -42,10 +39,14 @@ canvas { } .slidecontainer { + text-align: center; position: absolute; + display: flex; + justify-content: center; + margin: 0 auto; z-index: 12; - top: 96%; - right: 45%; + top: 90%; + width: 100%; } .planetInfo .wrapper { diff --git a/src/sunscene.jsx b/src/sunscene.jsx index 0ad8c14..f4af413 100644 --- a/src/sunscene.jsx +++ b/src/sunscene.jsx @@ -332,12 +332,12 @@ const SunPerlinMaterial = shaderMaterial( float noisy = fbm(p); - vec4 p1 = vec4(vPosition*2.,uTime*0.05); + vec4 p1 = vec4(vPosition*2.,uTime*0.07); float spots = max(cnoise(p1),0.); gl_FragColor = vec4(noisy); - gl_FragColor *= mix(1.,spots, 0.7); - //gl_FragColor = vec4(vUv,1.,1.); + gl_FragColor *= mix(1.,spots, 0.3); + gl_FragColor *= vec4(1.,0.3,0.,1.); }` ); @@ -367,7 +367,7 @@ const SunShaderMaterial = shaderMaterial( void main(){ gl_FragColor = textureCube(uPerlin, vPosition); - //gl_FragColor = vec4(vUv,1.,1.); + //gl_FragColor = vec4(0.8,1.,0.1,1.); }` ); @@ -375,8 +375,372 @@ extend({ SunPerlinMaterial }); extend({ SunShaderMaterial }); const Sun = () => { + const { scene, camera, gl, clock } = useThree(); + console.log(useThree()); const sunMesh = useRef(); + const scene2 = new THREE.Scene(); + const time = useRef(0); + const sunPerlinMesh = useRef(); + const sphere = new THREE.SphereGeometry(2, 30, 30); + const sphereMat = new THREE.ShaderMaterial({ + side: THREE.DoubleSide, + uniforms: { + uTime: clock.getElapsedTime(), + }, + vertexShader: `uniform float uTime; + + varying vec3 vPosition; + varying vec2 vUv; + + void main(){ + vPosition = position; + vUv = uv; + gl_Position = projectionMatrix* modelViewMatrix*vec4(position,1.); + }`, + fragmentShader: ` + uniform float uTime; + //uniform samplerCube uPerlin; + + varying vec3 vPosition; + varying vec2 vUv; + + void main(){ + + //gl_FragColor = textureCube(uPerlin, vPosition); + gl_FragColor = vec4(vUv,1.*uTime,1.); + }`, + }); + const sphereMesh = new THREE.Mesh(sphere, sphereMat); + + const perlinSphere = new THREE.SphereGeometry(3, 30, 30); + const perlinSphereMat = new THREE.ShaderMaterial({ + side: THREE.DoubleSide, + uniforms: { + uTime: time.current, + }, + vertexShader: ` + uniform float uTime; + + varying vec3 vPosition; + + varying vec2 vUv; + void main(){ + + vPosition = position; + vUv = uv; + gl_Position = projectionMatrix* modelViewMatrix*vec4(position,1.); + }`, + fragmentShader: ` + // Classic Perlin 3D Noise + // by Stefan Gustavson + // + vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);} + vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;} + vec4 fade(vec4 t) {return t*t*t*(t*(t*6.0-15.0)+10.0);} + + float cnoise(vec4 P){ + vec4 Pi0 = floor(P); // Integer part for indexing + vec4 Pi1 = Pi0 + 1.0; // Integer part + 1 + Pi0 = mod(Pi0, 289.0); + Pi1 = mod(Pi1, 289.0); + vec4 Pf0 = fract(P); // Fractional part for interpolation + vec4 Pf1 = Pf0 - 1.0; // Fractional part - 1.0 + vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x); + vec4 iy = vec4(Pi0.yy, Pi1.yy); + vec4 iz0 = vec4(Pi0.zzzz); + vec4 iz1 = vec4(Pi1.zzzz); + vec4 iw0 = vec4(Pi0.wwww); + vec4 iw1 = vec4(Pi1.wwww); + + vec4 ixy = permute(permute(ix) + iy); + vec4 ixy0 = permute(ixy + iz0); + vec4 ixy1 = permute(ixy + iz1); + vec4 ixy00 = permute(ixy0 + iw0); + vec4 ixy01 = permute(ixy0 + iw1); + vec4 ixy10 = permute(ixy1 + iw0); + vec4 ixy11 = permute(ixy1 + iw1); + + vec4 gx00 = ixy00 / 7.0; + vec4 gy00 = floor(gx00) / 7.0; + vec4 gz00 = floor(gy00) / 6.0; + gx00 = fract(gx00) - 0.5; + gy00 = fract(gy00) - 0.5; + gz00 = fract(gz00) - 0.5; + vec4 gw00 = vec4(0.75) - abs(gx00) - abs(gy00) - abs(gz00); + vec4 sw00 = step(gw00, vec4(0.0)); + gx00 -= sw00 * (step(0.0, gx00) - 0.5); + gy00 -= sw00 * (step(0.0, gy00) - 0.5); + + vec4 gx01 = ixy01 / 7.0; + vec4 gy01 = floor(gx01) / 7.0; + vec4 gz01 = floor(gy01) / 6.0; + gx01 = fract(gx01) - 0.5; + gy01 = fract(gy01) - 0.5; + gz01 = fract(gz01) - 0.5; + vec4 gw01 = vec4(0.75) - abs(gx01) - abs(gy01) - abs(gz01); + vec4 sw01 = step(gw01, vec4(0.0)); + gx01 -= sw01 * (step(0.0, gx01) - 0.5); + gy01 -= sw01 * (step(0.0, gy01) - 0.5); + + vec4 gx10 = ixy10 / 7.0; + vec4 gy10 = floor(gx10) / 7.0; + vec4 gz10 = floor(gy10) / 6.0; + gx10 = fract(gx10) - 0.5; + gy10 = fract(gy10) - 0.5; + gz10 = fract(gz10) - 0.5; + vec4 gw10 = vec4(0.75) - abs(gx10) - abs(gy10) - abs(gz10); + vec4 sw10 = step(gw10, vec4(0.0)); + gx10 -= sw10 * (step(0.0, gx10) - 0.5); + gy10 -= sw10 * (step(0.0, gy10) - 0.5); + + vec4 gx11 = ixy11 / 7.0; + vec4 gy11 = floor(gx11) / 7.0; + vec4 gz11 = floor(gy11) / 6.0; + gx11 = fract(gx11) - 0.5; + gy11 = fract(gy11) - 0.5; + gz11 = fract(gz11) - 0.5; + vec4 gw11 = vec4(0.75) - abs(gx11) - abs(gy11) - abs(gz11); + vec4 sw11 = step(gw11, vec4(0.0)); + gx11 -= sw11 * (step(0.0, gx11) - 0.5); + gy11 -= sw11 * (step(0.0, gy11) - 0.5); + + vec4 g0000 = vec4(gx00.x,gy00.x,gz00.x,gw00.x); + vec4 g1000 = vec4(gx00.y,gy00.y,gz00.y,gw00.y); + vec4 g0100 = vec4(gx00.z,gy00.z,gz00.z,gw00.z); + vec4 g1100 = vec4(gx00.w,gy00.w,gz00.w,gw00.w); + vec4 g0010 = vec4(gx10.x,gy10.x,gz10.x,gw10.x); + vec4 g1010 = vec4(gx10.y,gy10.y,gz10.y,gw10.y); + vec4 g0110 = vec4(gx10.z,gy10.z,gz10.z,gw10.z); + vec4 g1110 = vec4(gx10.w,gy10.w,gz10.w,gw10.w); + vec4 g0001 = vec4(gx01.x,gy01.x,gz01.x,gw01.x); + vec4 g1001 = vec4(gx01.y,gy01.y,gz01.y,gw01.y); + vec4 g0101 = vec4(gx01.z,gy01.z,gz01.z,gw01.z); + vec4 g1101 = vec4(gx01.w,gy01.w,gz01.w,gw01.w); + vec4 g0011 = vec4(gx11.x,gy11.x,gz11.x,gw11.x); + vec4 g1011 = vec4(gx11.y,gy11.y,gz11.y,gw11.y); + vec4 g0111 = vec4(gx11.z,gy11.z,gz11.z,gw11.z); + vec4 g1111 = vec4(gx11.w,gy11.w,gz11.w,gw11.w); + + vec4 norm00 = taylorInvSqrt(vec4(dot(g0000, g0000), dot(g0100, g0100), dot(g1000, g1000), dot(g1100, g1100))); + g0000 *= norm00.x; + g0100 *= norm00.y; + g1000 *= norm00.z; + g1100 *= norm00.w; + + vec4 norm01 = taylorInvSqrt(vec4(dot(g0001, g0001), dot(g0101, g0101), dot(g1001, g1001), dot(g1101, g1101))); + g0001 *= norm01.x; + g0101 *= norm01.y; + g1001 *= norm01.z; + g1101 *= norm01.w; + + vec4 norm10 = taylorInvSqrt(vec4(dot(g0010, g0010), dot(g0110, g0110), dot(g1010, g1010), dot(g1110, g1110))); + g0010 *= norm10.x; + g0110 *= norm10.y; + g1010 *= norm10.z; + g1110 *= norm10.w; + + vec4 norm11 = taylorInvSqrt(vec4(dot(g0011, g0011), dot(g0111, g0111), dot(g1011, g1011), dot(g1111, g1111))); + g0011 *= norm11.x; + g0111 *= norm11.y; + g1011 *= norm11.z; + g1111 *= norm11.w; + + float n0000 = dot(g0000, Pf0); + float n1000 = dot(g1000, vec4(Pf1.x, Pf0.yzw)); + float n0100 = dot(g0100, vec4(Pf0.x, Pf1.y, Pf0.zw)); + float n1100 = dot(g1100, vec4(Pf1.xy, Pf0.zw)); + float n0010 = dot(g0010, vec4(Pf0.xy, Pf1.z, Pf0.w)); + float n1010 = dot(g1010, vec4(Pf1.x, Pf0.y, Pf1.z, Pf0.w)); + float n0110 = dot(g0110, vec4(Pf0.x, Pf1.yz, Pf0.w)); + float n1110 = dot(g1110, vec4(Pf1.xyz, Pf0.w)); + float n0001 = dot(g0001, vec4(Pf0.xyz, Pf1.w)); + float n1001 = dot(g1001, vec4(Pf1.x, Pf0.yz, Pf1.w)); + float n0101 = dot(g0101, vec4(Pf0.x, Pf1.y, Pf0.z, Pf1.w)); + float n1101 = dot(g1101, vec4(Pf1.xy, Pf0.z, Pf1.w)); + float n0011 = dot(g0011, vec4(Pf0.xy, Pf1.zw)); + float n1011 = dot(g1011, vec4(Pf1.x, Pf0.y, Pf1.zw)); + float n0111 = dot(g0111, vec4(Pf0.x, Pf1.yzw)); + float n1111 = dot(g1111, Pf1); + + vec4 fade_xyzw = fade(Pf0); + vec4 n_0w = mix(vec4(n0000, n1000, n0100, n1100), vec4(n0001, n1001, n0101, n1101), fade_xyzw.w); + vec4 n_1w = mix(vec4(n0010, n1010, n0110, n1110), vec4(n0011, n1011, n0111, n1111), fade_xyzw.w); + vec4 n_zw = mix(n_0w, n_1w, fade_xyzw.z); + vec2 n_yzw = mix(n_zw.xy, n_zw.zw, fade_xyzw.y); + float n_xyzw = mix(n_yzw.x, n_yzw.y, fade_xyzw.x); + return 2.2 * n_xyzw; + } + + // Classic Perlin noise, periodic version + float cnoise(vec4 P, vec4 rep){ + vec4 Pi0 = mod(floor(P), rep); // Integer part modulo rep + vec4 Pi1 = mod(Pi0 + 1.0, rep); // Integer part + 1 mod rep + vec4 Pf0 = fract(P); // Fractional part for interpolation + vec4 Pf1 = Pf0 - 1.0; // Fractional part - 1.0 + vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x); + vec4 iy = vec4(Pi0.yy, Pi1.yy); + vec4 iz0 = vec4(Pi0.zzzz); + vec4 iz1 = vec4(Pi1.zzzz); + vec4 iw0 = vec4(Pi0.wwww); + vec4 iw1 = vec4(Pi1.wwww); + + vec4 ixy = permute(permute(ix) + iy); + vec4 ixy0 = permute(ixy + iz0); + vec4 ixy1 = permute(ixy + iz1); + vec4 ixy00 = permute(ixy0 + iw0); + vec4 ixy01 = permute(ixy0 + iw1); + vec4 ixy10 = permute(ixy1 + iw0); + vec4 ixy11 = permute(ixy1 + iw1); + + vec4 gx00 = ixy00 / 7.0; + vec4 gy00 = floor(gx00) / 7.0; + vec4 gz00 = floor(gy00) / 6.0; + gx00 = fract(gx00) - 0.5; + gy00 = fract(gy00) - 0.5; + gz00 = fract(gz00) - 0.5; + vec4 gw00 = vec4(0.75) - abs(gx00) - abs(gy00) - abs(gz00); + vec4 sw00 = step(gw00, vec4(0.0)); + gx00 -= sw00 * (step(0.0, gx00) - 0.5); + gy00 -= sw00 * (step(0.0, gy00) - 0.5); + + vec4 gx01 = ixy01 / 7.0; + vec4 gy01 = floor(gx01) / 7.0; + vec4 gz01 = floor(gy01) / 6.0; + gx01 = fract(gx01) - 0.5; + gy01 = fract(gy01) - 0.5; + gz01 = fract(gz01) - 0.5; + vec4 gw01 = vec4(0.75) - abs(gx01) - abs(gy01) - abs(gz01); + vec4 sw01 = step(gw01, vec4(0.0)); + gx01 -= sw01 * (step(0.0, gx01) - 0.5); + gy01 -= sw01 * (step(0.0, gy01) - 0.5); + + vec4 gx10 = ixy10 / 7.0; + vec4 gy10 = floor(gx10) / 7.0; + vec4 gz10 = floor(gy10) / 6.0; + gx10 = fract(gx10) - 0.5; + gy10 = fract(gy10) - 0.5; + gz10 = fract(gz10) - 0.5; + vec4 gw10 = vec4(0.75) - abs(gx10) - abs(gy10) - abs(gz10); + vec4 sw10 = step(gw10, vec4(0.0)); + gx10 -= sw10 * (step(0.0, gx10) - 0.5); + gy10 -= sw10 * (step(0.0, gy10) - 0.5); + + vec4 gx11 = ixy11 / 7.0; + vec4 gy11 = floor(gx11) / 7.0; + vec4 gz11 = floor(gy11) / 6.0; + gx11 = fract(gx11) - 0.5; + gy11 = fract(gy11) - 0.5; + gz11 = fract(gz11) - 0.5; + vec4 gw11 = vec4(0.75) - abs(gx11) - abs(gy11) - abs(gz11); + vec4 sw11 = step(gw11, vec4(0.0)); + gx11 -= sw11 * (step(0.0, gx11) - 0.5); + gy11 -= sw11 * (step(0.0, gy11) - 0.5); + + vec4 g0000 = vec4(gx00.x,gy00.x,gz00.x,gw00.x); + vec4 g1000 = vec4(gx00.y,gy00.y,gz00.y,gw00.y); + vec4 g0100 = vec4(gx00.z,gy00.z,gz00.z,gw00.z); + vec4 g1100 = vec4(gx00.w,gy00.w,gz00.w,gw00.w); + vec4 g0010 = vec4(gx10.x,gy10.x,gz10.x,gw10.x); + vec4 g1010 = vec4(gx10.y,gy10.y,gz10.y,gw10.y); + vec4 g0110 = vec4(gx10.z,gy10.z,gz10.z,gw10.z); + vec4 g1110 = vec4(gx10.w,gy10.w,gz10.w,gw10.w); + vec4 g0001 = vec4(gx01.x,gy01.x,gz01.x,gw01.x); + vec4 g1001 = vec4(gx01.y,gy01.y,gz01.y,gw01.y); + vec4 g0101 = vec4(gx01.z,gy01.z,gz01.z,gw01.z); + vec4 g1101 = vec4(gx01.w,gy01.w,gz01.w,gw01.w); + vec4 g0011 = vec4(gx11.x,gy11.x,gz11.x,gw11.x); + vec4 g1011 = vec4(gx11.y,gy11.y,gz11.y,gw11.y); + vec4 g0111 = vec4(gx11.z,gy11.z,gz11.z,gw11.z); + vec4 g1111 = vec4(gx11.w,gy11.w,gz11.w,gw11.w); + + vec4 norm00 = taylorInvSqrt(vec4(dot(g0000, g0000), dot(g0100, g0100), dot(g1000, g1000), dot(g1100, g1100))); + g0000 *= norm00.x; + g0100 *= norm00.y; + g1000 *= norm00.z; + g1100 *= norm00.w; + + vec4 norm01 = taylorInvSqrt(vec4(dot(g0001, g0001), dot(g0101, g0101), dot(g1001, g1001), dot(g1101, g1101))); + g0001 *= norm01.x; + g0101 *= norm01.y; + g1001 *= norm01.z; + g1101 *= norm01.w; + + vec4 norm10 = taylorInvSqrt(vec4(dot(g0010, g0010), dot(g0110, g0110), dot(g1010, g1010), dot(g1110, g1110))); + g0010 *= norm10.x; + g0110 *= norm10.y; + g1010 *= norm10.z; + g1110 *= norm10.w; + + vec4 norm11 = taylorInvSqrt(vec4(dot(g0011, g0011), dot(g0111, g0111), dot(g1011, g1011), dot(g1111, g1111))); + g0011 *= norm11.x; + g0111 *= norm11.y; + g1011 *= norm11.z; + g1111 *= norm11.w; + + float n0000 = dot(g0000, Pf0); + float n1000 = dot(g1000, vec4(Pf1.x, Pf0.yzw)); + float n0100 = dot(g0100, vec4(Pf0.x, Pf1.y, Pf0.zw)); + float n1100 = dot(g1100, vec4(Pf1.xy, Pf0.zw)); + float n0010 = dot(g0010, vec4(Pf0.xy, Pf1.z, Pf0.w)); + float n1010 = dot(g1010, vec4(Pf1.x, Pf0.y, Pf1.z, Pf0.w)); + float n0110 = dot(g0110, vec4(Pf0.x, Pf1.yz, Pf0.w)); + float n1110 = dot(g1110, vec4(Pf1.xyz, Pf0.w)); + float n0001 = dot(g0001, vec4(Pf0.xyz, Pf1.w)); + float n1001 = dot(g1001, vec4(Pf1.x, Pf0.yz, Pf1.w)); + float n0101 = dot(g0101, vec4(Pf0.x, Pf1.y, Pf0.z, Pf1.w)); + float n1101 = dot(g1101, vec4(Pf1.xy, Pf0.z, Pf1.w)); + float n0011 = dot(g0011, vec4(Pf0.xy, Pf1.zw)); + float n1011 = dot(g1011, vec4(Pf1.x, Pf0.y, Pf1.zw)); + float n0111 = dot(g0111, vec4(Pf0.x, Pf1.yzw)); + float n1111 = dot(g1111, Pf1); + + vec4 fade_xyzw = fade(Pf0); + vec4 n_0w = mix(vec4(n0000, n1000, n0100, n1100), vec4(n0001, n1001, n0101, n1101), fade_xyzw.w); + vec4 n_1w = mix(vec4(n0010, n1010, n0110, n1110), vec4(n0011, n1011, n0111, n1111), fade_xyzw.w); + vec4 n_zw = mix(n_0w, n_1w, fade_xyzw.z); + vec2 n_yzw = mix(n_zw.xy, n_zw.zw, fade_xyzw.y); + float n_xyzw = mix(n_yzw.x, n_yzw.y, fade_xyzw.x); + return 2.2 * n_xyzw; + } + + varying vec2 vUv; + varying vec3 vPosition; + uniform float uTime; + + // 6 lyers of noise + + float fbm(vec4 p){ + float sum = 0.; + float amp = 1.; + float scale = 1.; + for(int i = 0; i < 6; i++){ + sum+=cnoise(p*scale)*amp; + p.w += 100.; + amp*=0.9; + scale *= 2.; + } + return sum; + } + + void main(){ + + vec4 p = vec4(vPosition*3.,uTime*0.05); + + float noisy = fbm(p); + + vec4 p1 = vec4(vPosition*2.,uTime*10.); + float spots = max(cnoise(p1),0.); + + gl_FragColor = vec4(noisy); + gl_FragColor *= mix(1.,spots, 0.3); + gl_FragColor *= vec4(1.,0.3,0.,1.); + }`, + }); + //const perlinSphereMesh = new THREE.Mesh(perlinSphere, perlinSphereMat); + + //scene.add(sphereMesh); + //scene.add(perlinSphereMesh); //const scene1 = useRef(); //const scene2 = useRef(); //const cubeCamera1 = useRef(); @@ -387,14 +751,24 @@ const Sun = () => { encoding: THREE.sRGBEncoding, }); const cubeCamera = useCubeCamera(256, 0.1, 1000);*/ + const cube = new THREE.CubeCamera(); + scene.add(cube); const ref = useRef(); const ref1 = useRef(); const tmpRef = useRef(); - useFrame(({ clock }) => { + useFrame(({ clock, gl }) => { + perlinSphereMat.uniforms.uTime = clock.getElapsedTime(); + console.log(perlinSphereMat.uniforms.uTime); + //console.log(gl); + gl.render(scene, camera); + time.current = clock.getElapsedTime(); + //console.log(time.current); ref.current.uTime = clock.getElapsedTime(); ref1.current.uTime = clock.getElapsedTime(); + //gl.render(scene, camera); //console.log(tmpRef); ref1.current.uPerlin = tmpRef.current; + //cubeCamera.camera.position.copy(sunPerlinMesh.current.position); //cubeCamera.camera.update(renderer, scene); //gl.render(scene1, camera); @@ -405,16 +779,16 @@ const Sun = () => { <> {(texture) => { - tmpRef.current = texture; + //tmpRef.current = texture; }} - - - + + + - + @@ -423,7 +797,7 @@ const Sun = () => { const SunScene = () => { return ( - +