Weird CastShadowNode Escaping Lights

Questions
1

Currently trying to achieve the webgl approach in webgpu. Which this image shown.

image
image1219×893 77.7 KB

And this is my webGPU approach which is absolutely sucks, I don’t know how lights escape more properly. Is their anyone can guide me through it, as you can see there is a bit white light in the left side where light is moving around… and it is inside the sphereGeom

image
image884×848 60.9 KB

image
image704×697 87 KB

Current code I have, anything you can improve by this or idea(?) man I really hope it is easy to understand shaders + combination of rendering in lights

import { useFrame } from '@react-three/fiber'
import React, { useMemo, useRef } from 'react'
import { abs, color, float, Fn, fract, length, max, min, mix, smoothstep, uv, vec3, vec4 } from 'three/tsl'
import { MeshPhysicalNodeMaterial } from 'three/webgpu'
import * as THREE from 'three/webgpu'

const TSL1_2 = () => {

    const material = useMemo(() => {
        let mat = new MeshPhysicalNodeMaterial()
        mat.side = THREE.DoubleSide
        mat.toneMapped = true;
        mat.roughness = 1.;
        mat.metalness = 0.;
        mat.transparent = true;
        mat.alphaTest = 0.5;

        const Masks = Fn(() => {
            let cd = uv().mul(10.0).sub(1.0);
            cd = fract(cd).mul(2.0).sub(1.0);

            let sdBox = abs(cd).sub(0.5);
            sdBox = length(max(sdBox, float(0.1))).add(min(max(sdBox.y, sdBox.x), float(0.9)));

            let finalOpa = mix(float(0.0), float(1.0), smoothstep(float(0.0), float(2), sdBox));
            return finalOpa;
        })

        const maskNode = Masks();
        mat.opacityNode = maskNode;

        const pinkishColor = vec3(1.0, 0.4, 0.6);
        const baseRedColor = vec3(1.0, 0.0, 0.0);

        mat.colorNode = mix(pinkishColor, baseRedColor, maskNode);

        mat.castShadowNode = Fn(() => {
            maskNode.lessThan(0.5).discard();
            return vec4(0.0, 0.0, 0.0, 1.0);
        })();

        return mat
    }, [])

    const roomMaterial = useMemo(() => {
        return new THREE.MeshStandardMaterial({
            color: '#ffffff',
            side: THREE.BackSide
        })
    }, [])


    const pointLightRef = useRef(null)
    useFrame((state) => {
        const time = state.clock.elapsedTime;
        pointLightRef.current.position.y = Math.sin(time) * 0.7;
        pointLightRef.current.position.x = Math.cos(time) * 0.7;
    })

    return (
        <>
            <ambientLight args={[0.05]} />

            <pointLight
                ref={pointLightRef}
                position={[0, 0, 0]}
                decay={1}
                color={0xffffff}
                distance={100}
                intensity={10}
                castShadow
                shadow-bias={-0.005}
                shadow-mapSize={[1024, 1024]}
                shadow-radius={2}
            />

            <mesh position={[0, 0, 0]} castShadow>
                <sphereGeometry args={[1, 64, 64]} />
                <primitive object={material} />
            </mesh>

            <mesh receiveShadow>
                <sphereGeometry args={[5, 256, 256]} />
                <primitive object={roomMaterial} />
            </mesh>
        </>
    )
}

export default TSL1_2