三のJS - WaterShader水平面（？メッシュの回転）

Question

私はいくつかの水面の水平を持ってしようとしている、ここに新しい、そして三JSでこのような良いフォーラム:)

を見つけることがうれしいです。垂直（回転はX軸）であればウォータープレーンを正しく挿入できますが、水平に置くとテクスチャが非常に悪くなります。

mirrorMesh.rotation.x = - Math.PI * 0.5; 

新しい結果は次のとおりです：悪いテクスチャーが、私は行を削除すると良い質感が、垂直面

：ここ

var light = new THREE.DirectionalLight(0xffffbb, 1); 
light.position.set(- 1, 1, - 1); 
scene.add(light); 

waterNormals = new THREE.TextureLoader().load('editor/textures/waternormals.jpg'); 
waterNormals.wrapS = waterNormals.wrapT = THREE.RepeatWrapping; 

water = new THREE.Water(webGLRenderer, camera, scene, { 
    textureWidth: 512, 
    textureHeight: 512, 
    waterNormals: waterNormals, 
    alpha: 0.7, 
    sunDirection: light.position.clone().normalize(), 
    sunColor: 0xffffff, 
    waterColor: 0x001e0f, 
    distortionScale: 50.0, 
    fog: scene.fog != undefined 
}); 

var WaterGeometry = new THREE.PlaneBufferGeometry(parameters.width * 500, parameters.height * 500); 
// WaterGeometry.rotateX(Math.PI/2); 

var mirrorMesh = new THREE.Mesh(WaterGeometry, water.material); 

mirrorMesh.add(water); 
mirrorMesh.position.set(0, -200, 200); 
mirrorMesh.rotation.x = - Math.PI * 0.5; 
scene.add(mirrorMesh); 

が結果です： ここに私のコードです水平面

何が起こっているのか？

ありがとうございました！

Answer 1

ここでは、シェーダを追加して自分自身を作成する方法の例を示します。タイマーを追加してシネマティクスを作成し、ライティングを見て、このように使用しようとします。

// init camera, scene, renderer 
 
var scene, camera, renderer; 
 
scene = new THREE.Scene(); 
 
var fov = 75, 
 
\t \t aspect = window.innerWidth/window.innerHeight; 
 
camera = new THREE.PerspectiveCamera(fov, aspect, 0.1, 1000); 
 
camera.position.z = 100; 
 
camera.lookAt(scene.position); 
 
renderer = new THREE.WebGLRenderer(); 
 
renderer.setClearColor(0xc4c4c4); 
 
renderer.setSize(window.innerWidth, window.innerHeight); 
 
document.body.appendChild(renderer.domElement); 
 
var clock = new THREE.Clock(); 
 

 
var tuniform = { 
 
\t iGlobalTime: { 
 
\t \t type: 'f', 
 
\t \t value: 0.1 
 
\t }, 
 
\t iResolution: { 
 
\t \t type: 'v2', 
 
\t \t value: new THREE.Vector2() 
 
\t }, 
 
\t iMouse: { 
 
\t \t type: 'v4', 
 
\t \t value: new THREE.Vector2() 
 
\t } 
 
}; 
 

 
// Mouse position in - 1 to 1 
 
renderer.domElement.addEventListener('mousedown', function(e) { 
 
\t var canvas = renderer.domElement; 
 
\t var rect = canvas.getBoundingClientRect(); 
 
\t tuniform.iMouse.value.x = (e.clientX - rect.left)/window.innerWidth * 2 - 1; 
 
\t tuniform.iMouse.value.y = (e.clientY - rect.top)/window.innerHeight * -2 + 1; 
 
}); 
 
renderer.domElement.addEventListener('mouseup', function(e) { 
 
\t var canvas = renderer.domElement; 
 
\t var rect = canvas.getBoundingClientRect(); 
 
\t tuniform.iMouse.value.z = (e.clientX - rect.left)/window.innerWidth * 2 - 1; 
 
\t tuniform.iMouse.value.w = (e.clientY - rect.top)/window.innerHeight * -2 + 1; 
 
}); 
 
// resize canvas function 
 
window.addEventListener('resize',function() { 
 
\t camera.aspect = window.innerWidth/window.innerHeight; 
 
\t camera.updateProjectionMatrix(); 
 
\t renderer.setSize(window.innerWidth, window.innerHeight); 
 
}); 
 

 
tuniform.iResolution.value.x = window.innerWidth; 
 
tuniform.iResolution.value.y = window.innerHeight; 
 
// Create Plane 
 
var material = new THREE.ShaderMaterial({ 
 
\t uniforms: tuniform, 
 
\t vertexShader: document.getElementById('vertex-shader').textContent, 
 
\t fragmentShader: document.getElementById('fragment-shader').textContent 
 
}); 
 
var mesh = new THREE.Mesh(
 
\t new THREE.PlaneBufferGeometry(window.innerWidth, window.innerHeight, 40), material 
 
); 
 
scene.add(mesh); 
 

 
// draw animation 
 
function render(time) { 
 
\t tuniform.iGlobalTime.value += clock.getDelta(); 
 
\t requestAnimationFrame(render); 
 
\t renderer.render(scene, camera); 
 
} 
 
render();

body { 
 
\t overflow: hidden; 
 
\t margin: 0; 
 
\t height: 100%; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script> 
 

 
<!-- THIS is OPENGL Shading language scripts --> 
 
<script id="vertex-shader" type="no-js"> 
 
\t \t void main() \t { 
 
\t \t \t gl_Position = vec4(position, 1.0); 
 
\t \t } 
 
</script> 
 

 
<script id="fragment-shader" type="no-js"> 
 
\t uniform float iGlobalTime; 
 
\t uniform vec2 iResolution; 
 
\t uniform vec4 iMouse; 
 
\t 
 
const int NUM_STEPS = 8; 
 
const float PI \t \t = 3.1415; 
 
const float EPSILON \t = 1e-3; 
 
float EPSILON_NRM \t = 0.1/iResolution.x; 
 

 
// sea 
 
const int ITER_GEOMETRY = 3; 
 
const int ITER_FRAGMENT = 5; 
 
const float SEA_HEIGHT = 0.6; 
 
const float SEA_CHOPPY = 4.0; 
 
const float SEA_SPEED = 0.8; 
 
const float SEA_FREQ = 0.16; 
 
//coloration sea 
 
const vec3 SEA_BASE = vec3(0.1,0.19,0.22); 
 
const vec3 SEA_WATER_COLOR = vec3(0.8,0.9,0.6); 
 
float SEA_TIME = iGlobalTime * SEA_SPEED; 
 
mat2 octave_m = mat2(1.6,1.2,-1.2,1.6); 
 

 
// math 
 
mat3 fromEuler(vec3 ang) { 
 
\t vec2 a1 = vec2(sin(ang.x),cos(ang.x)); 
 
    vec2 a2 = vec2(sin(ang.y),cos(ang.y)); 
 
    vec2 a3 = vec2(sin(ang.z),cos(ang.z)); 
 
    mat3 m; 
 
    m[0] = vec3(a1.y*a3.y+a1.x*a2.x*a3.x,a1.y*a2.x*a3.x+a3.y*a1.x,-a2.y*a3.x); 
 
\t m[1] = vec3(-a2.y*a1.x,a1.y*a2.y,a2.x); 
 
\t m[2] = vec3(a3.y*a1.x*a2.x+a1.y*a3.x,a1.x*a3.x-a1.y*a3.y*a2.x,a2.y*a3.y); 
 
\t return m; 
 
} 
 
float hash(vec2 p) { 
 
\t float h = dot(p,vec2(127.1,311.7)); \t 
 
    return fract(sin(h)*43758.5453123); 
 
} 
 
float noise(in vec2 p) { 
 
    vec2 i = floor(p); 
 
    vec2 f = fract(p); \t 
 
\t vec2 u = f*f*(3.0-2.0*f); 
 
    return -1.0+2.0*mix(mix(hash(i + vec2(0.0,0.0)), 
 
        hash(i + vec2(1.0,0.0)), u.x), 
 
       mix(hash(i + vec2(0.0,1.0)), 
 
        hash(i + vec2(1.0,1.0)), u.x), u.y); 
 
} 
 

 
// lighting 
 
float diffuse(vec3 n,vec3 l,float p) { 
 
    return pow(dot(n,l) * 0.4 + 0.6,p); 
 
} 
 
float specular(vec3 n,vec3 l,vec3 e,float s) {  
 
    float nrm = (s + 8.0)/(3.1415 * 8.0); 
 
    return pow(max(dot(reflect(e,n),l),0.0),s) * nrm; 
 
} 
 

 
// sky 
 
vec3 getSkyColor(vec3 e) { 
 
    e.y = max(e.y,0.0); 
 
    vec3 ret; 
 
    ret.x = pow(1.0-e.y,2.0); 
 
    ret.y = 1.0-e.y; 
 
    ret.z = 0.6+(1.0-e.y)*0.4; 
 
    return ret; 
 
} 
 

 
// sea 
 
float sea_octave(vec2 uv, float choppy) { 
 
    uv += noise(uv);   
 
    vec2 wv = 1.0-abs(sin(uv)); 
 
    vec2 swv = abs(cos(uv));  
 
    wv = mix(wv,swv,wv); 
 
    return pow(1.0-pow(wv.x * wv.y,0.65),choppy); 
 
} 
 

 
float map(vec3 p) { 
 
    float freq = SEA_FREQ; 
 
    float amp = SEA_HEIGHT; 
 
    float choppy = SEA_CHOPPY; 
 
    vec2 uv = p.xz; uv.x *= 0.75; 
 
    
 
    float d, h = 0.0;  
 
    for(int i = 0; i < ITER_GEOMETRY; i++) {   
 
    \t d = sea_octave((uv+SEA_TIME)*freq,choppy); 
 
    \t d += sea_octave((uv-SEA_TIME)*freq,choppy); 
 
     h += d * amp;   
 
    \t uv *= octave_m; freq *= 1.9; amp *= 0.22; 
 
     choppy = mix(choppy,1.0,0.2); 
 
    } 
 
    return p.y - h; 
 
} 
 

 
float map_detailed(vec3 p) { 
 
    float freq = SEA_FREQ; 
 
    float amp = SEA_HEIGHT; 
 
    float choppy = SEA_CHOPPY; 
 
    vec2 uv = p.xz; uv.x *= 0.75; 
 
    
 
    float d, h = 0.0;  
 
    for(int i = 0; i < ITER_FRAGMENT; i++) {   
 
    \t d = sea_octave((uv+SEA_TIME)*freq,choppy); 
 
    \t d += sea_octave((uv-SEA_TIME)*freq,choppy); 
 
     h += d * amp;   
 
    \t uv *= octave_m; freq *= 1.9; amp *= 0.22; 
 
     choppy = mix(choppy,1.0,0.2); 
 
    } 
 
    return p.y - h; 
 
} 
 

 
vec3 getSeaColor(vec3 p, vec3 n, vec3 l, vec3 eye, vec3 dist) { 
 
    float fresnel = 1.0 - max(dot(n,-eye),0.0); 
 
    fresnel = pow(fresnel,3.0) * 0.65; 
 
     
 
    vec3 reflected = getSkyColor(reflect(eye,n));  
 
    vec3 refracted = SEA_BASE + diffuse(n,l,80.0) * SEA_WATER_COLOR * 0.12; 
 
    
 
    vec3 color = mix(refracted,reflected,fresnel); 
 
    
 
    float atten = max(1.0 - dot(dist,dist) * 0.001, 0.0); 
 
    color += SEA_WATER_COLOR * (p.y - SEA_HEIGHT) * 0.18 * atten; 
 
    
 
    color += vec3(specular(n,l,eye,60.0)); 
 
    
 
    return color; 
 
} 
 

 
// tracing 
 
vec3 getNormal(vec3 p, float eps) { 
 
    vec3 n; 
 
    n.y = map_detailed(p);  
 
    n.x = map_detailed(vec3(p.x+eps,p.y,p.z)) - n.y; 
 
    n.z = map_detailed(vec3(p.x,p.y,p.z+eps)) - n.y; 
 
    n.y = eps; 
 
    return normalize(n); 
 
} 
 

 
float heightMapTracing(vec3 ori, vec3 dir, out vec3 p) { 
 
    float tm = 0.0; 
 
    float tx = 1000.0;  
 
    float hx = map(ori + dir * tx); 
 
    if(hx > 0.0) return tx; 
 
    float hm = map(ori + dir * tm);  
 
    float tmid = 0.0; 
 
    for(int i = 0; i < NUM_STEPS; i++) { 
 
     tmid = mix(tm,tx, hm/(hm-hx));     
 
     p = ori + dir * tmid;     
 
    \t float hmid = map(p); 
 
\t \t if(hmid < 0.0) { 
 
     \t tx = tmid; 
 
      hx = hmid; 
 
     } else { 
 
      tm = tmid; 
 
      hm = hmid; 
 
     } 
 
    } 
 
    return tmid; 
 
} 
 

 
void main() { 
 
\t vec2 uv = gl_FragCoord.xy/iResolution.xy; 
 
    uv = uv * 2.0 - 1.0; 
 
    uv.x *= iResolution.x/iResolution.y;  
 
    float time = iGlobalTime * 0.3 + iMouse.x*0.01; 
 
     
 
    // ray 
 
    vec3 ang = vec3(sin(time*3.0)*0.1,sin(time)*0.2+0.3,time);  
 
    vec3 ori = vec3(0.0,3.5,time*5.0); 
 
    vec3 dir = normalize(vec3(uv.xy,-2.0)); dir.z += length(uv) * 0.15; 
 
    dir = normalize(dir) * fromEuler(ang); 
 
    
 
    // tracing 
 
    vec3 p; 
 
    heightMapTracing(ori,dir,p); 
 
    vec3 dist = p - ori; 
 
    vec3 n = getNormal(p, dot(dist,dist) * EPSILON_NRM); 
 
    vec3 light = normalize(vec3(0.0,1.0,0.8)); 
 
       
 
    // color 
 
    vec3 color = mix(
 
     getSkyColor(dir), 
 
     getSeaColor(p,n,light,dir,dist), 
 
    \t pow(smoothstep(0.0,-0.05,dir.y),0.3)); 
 
     
 
    // post 
 
\t gl_FragColor = vec4(pow(color,vec3(0.75)), 1.0); 
 
\t } 
 
</script>