/*
Auto-generated by: https://github.com/pmndrs/gltfjsx
*/

import * as THREE from 'three'
import React, { useMemo, useRef } from 'react'
import { useGLTF } from '@react-three/drei'
import { GLTF } from 'three-stdlib'

type GLTFResult = GLTF & {
  nodes: {
    nebula: THREE.Mesh
  }
  materials: {
    AdditiveNebula03: THREE.MeshStandardMaterial
  }
}

export function Radiat(props: JSX.IntrinsicElements['group']) {
  const { nodes, materials } = useGLTF('/assets/models/radiat.glb') as GLTFResult
  const loader = new THREE.TextureLoader();

  const DarkMatterMaterial2 = useMemo(() => {
    const DarkMatter2 = loader.load('/sourceimages/DarkMatter2.png');
    return new THREE.ShaderMaterial({
      uniforms: {
        uTexture: { value: DarkMatter2 },
      },
      vertexShader: `
        varying vec2 vUv;
        void main() {
          vUv = uv;
          gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        }
      `,
      fragmentShader: `
        varying vec2 vUv;
        uniform sampler2D uTexture;

        void main() {
          vec3 color = texture2D(uTexture, vUv).rgb;
          float gray = dot(color, vec3(0.2126, 0.7152, 0.0722));

          // Set alpha based on the gray value
          float alpha = gray; // Or use a custom formula, e.g., alpha = 1.0 - gray;

          gl_FragColor = vec4(vec3(color*5.0), alpha);
        }
      `,
      transparent: true,
      side: THREE.BackSide, // Make it visible from both sides
    });
  }, []);
  return (
    <group {...props} dispose={null}>
      <mesh renderOrder={6} geometry={nodes.nebula.geometry} material={DarkMatterMaterial2} scale={1} rotation={[0, 0.5, 0]}/>
    </group>
  )
}

useGLTF.preload('/assets/models/radiat.glb')
