Reactjs 我试图使光线球体相交函数在threejs中实现后处理效果，但我被卡住了

我一直在尝试添加这种后处理（取自sebastian lague视频，我正在尝试将其从unity转换为threejs）效果，即当光线击中我网格（蓝色）上的海洋时：

它是白色的（就像在他的视频中）：

在其他任何地方，原色都会被还原。但对于我来说，我似乎无法解决这个问题，我假设我的光线原点或方向可能是错误的，但似乎没有任何效果，下面是我传递给光线球体相交函数和函数本身的代码

        vec2 raySphere(vec3 centre, float radius, vec3 rayOrigin, vec3 rayDir) {
        vec3 offset = rayOrigin - centre;
        float a = 1.0; // set  to dot(rayDir, rayDir) instead of rayDir may not be normalized
        float b = 2.0 * dot(offset, rayDir);
        float c = dot(offset, offset) - radius * radius;

        float discriminant = b*b-4.0*a*c;
        // No intersection: discriminant < 0
        // 1 intersection: discriminant == 0
        // 2 intersection: discriminant > 0
        if(discriminant > 0.0) {
            float s = sqrt(discriminant);
            float dstToSphereNear = max(0.0, (-b - s) / (2.0 * a));
            float dstToSphereFar = (-b + s) / (2.0 * a);

            if (dstToSphereFar >= 0.0) {
                return vec2(dstToSphereNear, dstToSphereFar-dstToSphereNear);
            }
        }

        return vec2(99999999, 0.0);
        }

        vec4 ro = inverse(modelMatrix) * vec4(cameraPosition, 1.0);
        vec3 rd = normalize(position - ro.xyz);
        
        vec3 oceanCentre = vec3(0.0, 0.0, 0.0);
        float oceanRadius = 32.0;
        vec2 hitInfo = raySphere(oceanCentre, oceanRadius, ro.xyz, rd);
        float dstToOcean = hitInfo.x;
        float dstThroughOcean = hitInfo.y;

        vec3 rayOceanIntersectPos = ro.xyz + rd * dstToOcean - oceanCentre;
    
        // dst that view ray travels through ocean (before hitting terrain / exiting ocean)
        float oceanViewDepth = min(dstThroughOcean, depth - dstToOcean);
        vec4 oceanCol;
        float alpha;

        if(oceanViewDepth > 0.0) {
            gl_FragColor = vec4(vec3(1.0), .1);
        }
        gl_FragColor = texture2D(tDiffuse, vUv);

vec2光线球体（vec3中心、浮动半径、vec3光线原点、vec3光线方向）{
vec3偏移=光线原点-中心；
float a=1.0；//设置为dot（rayDir，rayDir）而不是rayDir可能无法正常化
浮点b=2.0*点（偏移，光线方向）；
浮点c=点（偏移，偏移）-半径*半径；
浮点数鉴别器=b*b-4.0*a*c；
//无交叉点：判别式<0
//1交点：判别式==0
//2交叉口：判别式>0
如果（判别式>0.0）{
浮点数s=sqrt（判别式）；
浮球dstToSphereNear=max（0.0，（-b-s）/（2.0*a））；
浮点数dstToSphereFar=（-b+s）/（2.0*a）；
如果（dstToSphereFar>=0.0）{
返回vec2（dstToSphereNear，dstToSphereFar dstToSphereNear）；
}
}
返回向量2（99999999，0.0）；
}
vec4 ro=逆（模型矩阵）*vec4（摄像机位置，1.0）；
vec3 rd=标准化（位置-ro.xyz）；
vec3海洋中心=vec3（0.0,0.0,0.0）；
浮动半径=32.0；
vec2 hitInfo=射线球（海洋中心，海洋半径，罗西兹路）；
float dsttocean=hitInfo.x；
float dsthroughocean=hitInfo.y；
vec3 rayOceanIntersectPos=ro.xyz+rd*DSTOOcean-海洋中心；
//查看光线穿过海洋的dst（在撞击地形/离开海洋之前）
浮动海洋视图深度=最小值（DSTOOCEAN，深度-DSTOOCEAN）；
vec4-海洋素；
浮动α；
如果（oceanViewDepth>0.0）{
gl_FragColor=vec4（vec3（1.0），.1）；
}
gl_FragColor=纹理2d（tDiffuse，vUv）；

---

如果有人能帮我指出我可能会把事情搞砸的地方，我将不胜感激，或者感谢一些资源

交叉检查/与此进行比较。还要检查我开发它的原因，因为它与您正在做的非常相似（至少我认为）