Javascript 具有反射问题3.js的片段着色器

Javascript 具有反射问题3.js的片段着色器,javascript,three.js,glsl,shader,gltf,Javascript,Three.js,Glsl,Shader,Gltf,我有带纹理和PBR效果的gltf杯模型。我想应用环境反射(立方体反射)。应用反射时遇到问题。颜色和纹理已更改,只有环境反射出现。我无法解决这个问题。哪里是我的着色器错误或其他一些问题。我对着色器程序不太了解。如何通过反射获得正确的颜色(如第一幅图像)。我附上了两张没有反射和有反射的图片。反射效果很好,但我不知道为什么这个颜色不合适。能帮忙吗 my shader programme. var meshlambert_vert = varying vec3 vR

我有带纹理和PBR效果的gltf杯模型。我想应用环境反射(立方体反射)。应用反射时遇到问题。颜色和纹理已更改,只有环境反射出现。我无法解决这个问题。哪里是我的着色器错误或其他一些问题。我对着色器程序不太了解。如何通过反射获得正确的颜色(如第一幅图像)。我附上了两张没有反射和有反射的图片。反射效果很好,但我不知道为什么这个颜色不合适。能帮忙吗

   my shader programme.
        var meshlambert_vert =
        varying vec3 vReflect;
        varying vec3 vRefract[3];
        varying float vReflectionFactor;
        attribute vec3 a_normal;
        varying vec3 v_normal;
        varying vec3 v_position;
        uniform mat3 u_normalMatrix;
        void main() {
                vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
                v_position = mvPosition.xyz;
                vec4 worldPosition = modelMatrix * vec4( position, 1.0 );
                vec3 worldNormal = normalize( mat3( modelMatrix[0].xyz, modelMatrix[1].xyz, modelMatrix[2].xyz ) * normal );
                vec3 I = worldPosition.xyz - cameraPosition;
                vReflect = reflect( I, worldNormal );
                v_normal = u_normalMatrix * a_normal;
                vRefract[0] = refract( normalize( I ), worldNormal, 0.02 );
                vRefract[1] = refract( normalize( I ), worldNormal, 0.02 * 0.2);
                vRefract[2] = refract( normalize( I ), worldNormal, 0.02 * 0.2 );
                vReflectionFactor = 0.1 + 1.0 * pow( 1.0 + dot( normalize( I ), worldNormal ), 0.2 );
                gl_Position = projectionMatrix * mvPosition;
        };


var meshlambert_frag =
    uniform samplerCube tCube;
    varying vec3 vReflect;
    varying vec3 vRefract[3];
    varying float vReflectionFactor;
    uniform vec4 u_ambient;
    uniform vec4 u_emission;
    uniform vec4 u_specular;
    uniform vec4 u_diffuse;
    varying vec3 v_normal;
    varying vec3 v_position;
    void main() {
        vec4 color = vec4(0., 0.29411,0.47843, 1.0);
        vec3 diffuseLight = vec3(0., 0., 0.);
        vec3 u_light2Color = vec3(1.0,1.0,1.0);
        vec4 diffuse = vec4(0.0, 0.0, 0.0, 1.0);
        vec3 specularLight = vec3(0.5, 0.5,0.5);
        float specularIntensity = 0.5;
        float attenuation = 0.5;
        vec3 l = vec3(0.0,0.5,0.5);
        vec3 u_light0Color = vec3(1.0,1.0,1.0);
        vec4 emission;
        vec4 ambient;
        vec4 specular;
        ambient = u_ambient;
        diffuse = u_diffuse;
        emission = u_emission;
        specular = u_specular;
        vec3 ambientLight = vec3(0., 0., 0.);
        ambientLight += u_light2Color;
        ambient.xyz *= ambientLight;
        color.xyz += ambient.xyz;
        specularLight += u_light0Color * specularIntensity;
        specular.xyz *= specularLight;
        color.xyz += specular.xyz;
        vec3 normal = normalize(v_normal);
        if ( dot( normal, v_position ) > 0.0 ) {
            normal *= -1.0;
        }
        diffuseLight += u_light0Color * max(dot(normal,l), 0.) * attenuation;
        diffuse.xyz *= diffuseLight;
        color.xyz += diffuse.xyz;
        color.xyz += emission.xyz;
        vec4 reflectedColor = textureCube( tCube, vec3( -vReflect.x, vReflect.yz ) );
        vec4 refractedColor = vec4( 0.0 );
        refractedColor.r = textureCube( tCube, vec3( -vRefract[0].x, vRefract[0].yz ) ).r;
        refractedColor.g = textureCube( tCube, vec3( -vRefract[1].x, vRefract[1].yz ) ).g;
        refractedColor.b = textureCube( tCube, vec3( -vRefract[2].x, vRefract[2].yz ) ).b;
        gl_FragColor = mix( color, reflectedColor, clamp( 0.98, 0.0, 1.0 ) );
    }";
具有反射的立方体映射代码:


以98:2的恒定比率混合反射颜色和材质颜色

gl_FragColor = mix( color, reflectedColor, clamp( 0.98, 0.0, 1.0 ) );
材质的颜色分量太弱,无法“看到”它

出于调试原因,请尝试50:50的比例:

gl_FragColor = mix( color, reflectedColor, 0.5 );
但您可能希望我们
vReflectionFactor
了解比率:

gl_FragColor = mix( color, reflectedColor, clamp( vReflectionFactor, 0.0, 1.0 ) );

进一步注意,如果使用
vReflectionFactor
,则只会看到反射,因为

vReflectionFactor = 0.1 + 1.0 * pow( 1.0 + dot( normalize( I ), worldNormal ), 0.2 );
始终大于1.0。这是因为
1.0+dot(normalize(I),worldNormal
大于1.0

我不知道你想要实现什么,但你可以使用

vReflectionFactor = 0.1 + pow( dot(normalize(I), worldNormal), 0.2 );


Thxx@rabbi76。但我已经测试过了。它仍然没有出现。@user3587692
vReflectionFactor
isa始终大于1.0,请参见答案
vReflectionFactor = 0.1 + pow( dot(normalize(I), worldNormal), 0.2 );
vReflectionFactor = 0.1 + pow( 1.0 - dot(normalize(I), worldNormal), 0.2 );