heremaps / harp.gl

3D web map rendering engine written in TypeScript using three.js
Apache License 2.0
1.28k stars 198 forks source link

There is no normal display of water normal. #1996

Closed datouzhan closed 3 years ago

datouzhan commented 3 years ago

Hi,Long time no see. I created a demo about the water false reflection in a separate threejs, which is displayed normally. image But when I transplanted to harpgl, it is failed.There is no normal display of water normal. image it is the shader `WaterShader = {

uniforms: {

    'color': {
        type: 'c',
        value: null
    },

    'reflectivity': {
        type: 'f',
        value: 0
    },

    'tReflectionMap': {
        type: 't',
        value: null
    },

    'tRefractionMap': {
        type: 't',
        value: null
    },

    'tNormalMap0': {
        type: 't',
        value: null
    },

    'tNormalMap1': {
        type: 't',
        value: null
    },

    'textureMatrix': {
        type: 'm4',
        value: null
    },

    'config': {
        type: 'v4',
        value: new THREE.Vector4()
    }

},

vertexShader: [

    '#include <common>',
    '#include <fog_pars_vertex>',
    '#include <logdepthbuf_pars_vertex>',

    'uniform mat4 textureMatrix;',

    'varying vec4 vCoord;',
    'varying vec2 vUv;',
    'varying vec3 vToEye;',

    'void main() {',

    '   vUv = uv;',
    '   vCoord = textureMatrix * vec4( position, 1.0 );',

    '   vec4 worldPosition = modelMatrix * vec4( position, 1.0 );',
    '   vToEye = cameraPosition - worldPosition.xyz;',

    '   vec4 mvPosition =  viewMatrix * worldPosition;', // used in fog_vertex
    '   gl_Position = projectionMatrix * mvPosition;',

    '   #include <logdepthbuf_vertex>',
    '   #include <fog_vertex>',

    '}'

].join( '\n' ),

fragmentShader: [

    '#include <common>',
    '#include <fog_pars_fragment>',
    '#include <logdepthbuf_pars_fragment>',

    'uniform sampler2D tReflectionMap;',
    'uniform sampler2D tRefractionMap;',
    'uniform sampler2D tNormalMap0;',
    'uniform sampler2D tNormalMap1;',

    '#ifdef USE_FLOWMAP',
    '   uniform sampler2D tFlowMap;',
    '#else',
    '   uniform vec2 flowDirection;',
    '#endif',

    'uniform vec3 color;',
    'uniform float reflectivity;',
    'uniform vec4 config;',

    'varying vec4 vCoord;',
    'varying vec2 vUv;',
    'varying vec3 vToEye;',

    'void main() {',

    '   #include <logdepthbuf_fragment>',

    '   float flowMapOffset0 = config.x;',
    '   float flowMapOffset1 = config.y;',
    '   float halfCycle = config.z;',
    '   float scale = config.w;',

    '   vec3 toEye = normalize( vToEye );',

    // determine flow direction
    '   vec2 flow;',
    '   #ifdef USE_FLOWMAP',
    '       flow = texture2D( tFlowMap, vUv ).rg * 2.0 - 1.0;',
    '   #else',
    '       flow = flowDirection;',
    '   #endif',
    '   flow.x *= - 1.0;',

    // sample normal maps (distort uvs with flowdata)
    '   vec4 normalColor0 = texture2D( tNormalMap0, ( vUv * scale ) + flow * flowMapOffset0 );',
    '   vec4 normalColor1 = texture2D( tNormalMap1, ( vUv * scale ) + flow * flowMapOffset1 );',

    // linear interpolate to get the final normal color
    '   float flowLerp = abs( halfCycle - flowMapOffset0 ) / halfCycle;',
    '   vec4 normalColor = mix( normalColor0, normalColor1, flowLerp );',

    // calculate normal vector
    '   vec3 normal = normalize( vec3( normalColor.r * 2.0 - 1.0, normalColor.g * 2.0 - 1.0, normalColor.b) );',

    // calculate the fresnel term to blend reflection and refraction maps
    '   float theta = max( dot( toEye, normal ), 0.0 );',
    '   float reflectance = reflectivity + ( 1.0 - reflectivity ) * pow( ( 1.0 - theta ), 5.0 );',

    // calculate final uv coords
    '   vec3 coord = vCoord.xyz / vCoord.w;',
    '   vec2 uv = coord.xy + coord.z * normal.xz * 0.05;',

    '   vec4 reflectColor = texture2D( tReflectionMap, vec2( 1.0 - uv.x, uv.y ) );',
    '   vec4 refractColor = texture2D( tRefractionMap, uv );',

    // multiply water color with the mix of both textures
    '   gl_FragColor = vec4( color, 1.0 ) * mix( refractColor, reflectColor, reflectance );',

    '   #include <tonemapping_fragment>',
    '   #include <encodings_fragment>',
    '   #include <fog_fragment>',

    '}'

].join( '\n' )

}; ` I've been looking for it for a long time. I can't find the reason.Can u help me.

FraukeF commented 3 years ago

@datouzhan I see you closed the issue, did you find a solution?

nzjony commented 3 years ago

@datouzhan , I would also like to know if / how you fixed it.