diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/SceneProps/index.tsx b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/SceneProps/index.tsx index 5150a8a87..ca26e8c94 100644 --- a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/SceneProps/index.tsx +++ b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/SceneProps/index.tsx @@ -1,10 +1,8 @@ import { mauveDark } from "@radix-ui/colors"; import { invalidate } from "@react-three/fiber"; import { Quicklime, type QuicklimeEvent } from "quicklime"; -import { useEffect, useRef } from "react"; -import { Color, Mesh } from "three"; -import fragmentShader from "./shaders/fragment.glsl?raw"; -import vertexShader from "./shaders/vertex.glsl?raw"; +import { useCallback, useEffect, useRef } from "react"; +import { Mesh, type WebGLProgramParametersWithUniforms } from "three"; const SIZE = 2 ** 4; @@ -26,22 +24,62 @@ export function SceneProps() { }; }, []); + const handleBeforeCompile = useCallback( + (shader: WebGLProgramParametersWithUniforms) => { + shader.uniforms.size = { value: SIZE / 2 }; + + shader.vertexShader = ` + varying vec3 vWorldPosition; + + ${shader.vertexShader} + `.replace( + "#include ", + + ` + #include + vWorldPosition = (modelMatrix * vec4(transformed, 1.0)).xyz; + `, + ); + + shader.fragmentShader = ` + varying vec3 vWorldPosition; + uniform float size; + + ${shader.fragmentShader} + `.replace( + "#include ", + + ` + #include + + vec3 scaled = vWorldPosition / size; + float radius = length(scaled.xz); + + if (radius >= 1.0) { + discard; + } + + diffuseColor.a *= (1.0 - radius); + `, + ); + }, + [], + ); + return ( - ); diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/SceneProps/shaders/fragment.glsl b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/SceneProps/shaders/fragment.glsl deleted file mode 100644 index 7f83b2e0d..000000000 --- a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/SceneProps/shaders/fragment.glsl +++ /dev/null @@ -1,16 +0,0 @@ -varying vec3 vWorldPosition; -uniform float size; -uniform vec3 color; - -void main() { - vec3 scaled = vWorldPosition / size; - float radius = length(scaled.xz); - - if(radius >= 1.0) { - discard; - } - - float a = 1.0 - radius; - - gl_FragColor = vec4(color, a); -} \ No newline at end of file diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/SceneProps/shaders/vertex.glsl b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/SceneProps/shaders/vertex.glsl deleted file mode 100644 index eb9f48934..000000000 --- a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/SceneProps/shaders/vertex.glsl +++ /dev/null @@ -1,8 +0,0 @@ -varying vec3 vWorldPosition; - -void main() { - vec4 worldPos = modelMatrix * vec4(position, 1.0); - vWorldPosition = worldPos.xyz; - - gl_Position = projectionMatrix * viewMatrix * worldPos; -} \ No newline at end of file