Try to apply the example of Threejs's ocean, but the texture of the mouse scrolling flow will move with it.
Closed this issue · 20 comments
Try to apply the example of Threejs's ocean, but the texture of the mouse scrolling flow will move with it.
There is no problem with a separate threejs example.Can u help me?
` vertexShader: [
"uniform mat4 textureMatrix;",
"uniform float time;",
"varying vec4 mirrorCoord;",
"varying vec4 worldPosition;",
"#include <common>",
"#include <fog_pars_vertex>",
"#include <shadowmap_pars_vertex>",
"#include <logdepthbuf_pars_vertex>",
"void main() {",
" mirrorCoord = modelMatrix * vec4( position, 1.0 );",
" worldPosition = mirrorCoord.xyzw;",
" mirrorCoord = textureMatrix * mirrorCoord;",
" vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",
" gl_Position = projectionMatrix * mvPosition;",
"#include <beginnormal_vertex>",
"#include <defaultnormal_vertex>",
"#include <logdepthbuf_vertex>",
"#include <fog_vertex>",
"#include <shadowmap_vertex>",
"}"
].join("\n"),`
` fragmentShader: [
"uniform sampler2D mirrorSampler;",
"uniform float alpha;",
"uniform float time;",
"uniform float size;",
"uniform float distortionScale;",
"uniform sampler2D normalSampler;",
"uniform vec3 sunColor;",
"uniform vec3 sunDirection;",
"uniform vec3 eye;",
"uniform vec3 waterColor;",
"varying vec4 mirrorCoord;",
"varying vec4 worldPosition;",
"vec4 getNoise( vec2 uv ) {",
" vec2 uv0 = ( uv / 103.0 ) + vec2(time / 17.0, time / 29.0);",
" vec2 uv1 = uv / 107.0-vec2( time / -19.0, time / 31.0 );",
" vec2 uv2 = uv / vec2( 8907.0, 9803.0 ) + vec2( time / 101.0, time / 97.0 );",
" vec2 uv3 = uv / vec2( 1091.0, 1027.0 ) - vec2( time / 109.0, time / -113.0 );",
" vec4 noise = texture2D( normalSampler, uv0 ) +",
" texture2D( normalSampler, uv1 ) +",
" texture2D( normalSampler, uv2 ) +",
" texture2D( normalSampler, uv3 );",
" return noise * 0.5 - 1.0;",
"}",
"void sunLight( const vec3 surfaceNormal, const vec3 eyeDirection, float shiny, float spec, float diffuse, inout vec3 diffuseColor, inout vec3 specularColor ) {",
" vec3 reflection = normalize( reflect( -sunDirection, surfaceNormal ) );",
" float direction = max( 0.0, dot( eyeDirection, reflection ) );",
" specularColor += pow( direction, shiny ) * sunColor * spec;",
" diffuseColor += max( dot( sunDirection, surfaceNormal ), 0.0 ) * sunColor * diffuse;",
"}",
"#include <common>",
"#include <packing>",
"#include <bsdfs>",
"#include <fog_pars_fragment>",
"#include <logdepthbuf_pars_fragment>",
"#include <lights_pars_begin>",
"#include <shadowmap_pars_fragment>",
"#include <shadowmask_pars_fragment>",
"void main() {",
"#include <logdepthbuf_fragment>",
" vec4 noise = getNoise( worldPosition.xy * size );",
" vec3 surfaceNormal = normalize( noise.xyz * vec3( 1.5, 1.0, 1.5 ) );",
" vec3 diffuseLight = vec3(0.0);",
" vec3 specularLight = vec3(0.0);",
" vec3 worldToEye = eye-worldPosition.xyz;",
" vec3 eyeDirection = normalize( worldToEye );",
" sunLight( surfaceNormal, eyeDirection, 100.0, 2.0, 0.5, diffuseLight, specularLight );",
" float distance = length(worldToEye);",
" vec2 distortion = surfaceNormal.xy * ( 0.001 + 1.0 / distance ) * distortionScale;",
" vec3 reflectionSample = vec3( texture2D( mirrorSampler, mirrorCoord.xy / mirrorCoord.w + distortion ) );",
" float theta = max( dot( eyeDirection, surfaceNormal ), 0.0 );",
" float rf0 = 0.3;",
" float reflectance = rf0 + ( 1.0 - rf0 ) * pow( ( 1.0 - theta ), 5.0 );",
" vec3 scatter = max( 0.0, dot( surfaceNormal, eyeDirection ) ) * waterColor;",
" vec3 albedo = mix( ( sunColor * diffuseLight * 0.3 + scatter ) * getShadowMask(), ( vec3( 0.1 ) + reflectionSample * 0.9 + reflectionSample * specularLight ), reflectance);",
" vec3 outgoingLight = albedo;",
" gl_FragColor = vec4( outgoingLight, alpha );",
"#include <tonemapping_fragment>",
"#include <fog_fragment>",
"}"
].join("\n")`
@datouzhan , thanks for the issue.
What do you mean by:
Try to apply the example of Threejs's ocean, but the texture of the mouse scrolling flow will move with it.
Do you want the water texture to somehow follow the mouse?
i dont want the water texture to somehow follow the mouse ,but it follow.It confuse me
At present, the water texure will follow the mouse to zoom in and out.I dont want it follow.
@datouzhan , I can't see the issue from the gif, can you please upload a video somewhere and make it a bit longer, the gif is too stuttering
waterproblem.mp4
Can you see the issue?
@datouzhan , yes, thank you, now it is much clearer, and sorry for the delay.
What value are you passing in as the "eye" value? I mean uniform vec3 eye;.
var eye = options.eye !== undefined ? options.eye : new THREE.Vector3(0, 0, 0); I
set the eye value to the new vector3,and then In onbeforeRender method, I set eye.setFromMatrixPosition(camera.matrixWorld);
Ok, thanks @datouzhan. Which camera do you use? I guess the .camara from the MapView ?
yes, the camera from thre mapview
I have an idea.
Can you try just removing that line. i.e. set the eye to 0,0,0 every frame.
The position of all objects is positioned relative to the camera, i.e. the camera is positioned at 0,0,0 and everything is rendered relative to it, to ensure the precision of the depth buffer.
Do you mean to delete the eye.setFromMatrixPosition(camera.matrixWorld); from beforeerender?
Yes
i try to delete the eye.setFromMatrixPosition(camera.matrixWorld); But the problem is still not solved
What does it look like? Can you please create another video?
I noticed also you have the following
worldPosition = mirrorCoord.xyzw;
mirrorCoord = textureMatrix * mirrorCoord;
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 )
Can you instead set worldPosition to mvPosition?
Otherwise I don't know what the issue is. You will have to debug it step by step.
" mirrorCoord = modelMatrix * vec4( position, 1.0 );",
// " worldPosition = mirrorCoord.xyzw;",
" mirrorCoord = textureMatrix * vec4( position, 1.0 );",
" vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",
" worldPosition = mvPosition;",
" gl_Position = projectionMatrix * mvPosition;",
i instead set the worldPosition to mvPosition,
now it look like
https://user-images.githubusercontent.com/20176393/118776635-c72d6180-b8ba-11eb-8f72-17d56b0ee363.mp4
Do you have an email? I can send you a simple example
Sure, I have setup a temporary email: fowexeb391@threepp.com
Please send there, or do you have slack? You can register and we can talk directly. The link is in harp.gl: https://github.com/heremaps/harp.gl#harpgl-slack-channel-registration-available-here
@datouzhan , did you solve the issue in the end with the water?