세 개의 j에서 사용자 정의 셰이더에 반사 맵을 사용하여 반사를 만드는 방법은 무엇입니까?

Question

나는 Three.JS를 사용하여 WebGL에 지구를 만들고 있는데, 지금까지 나는 밤낮으로 질감과 분위기가있는 지구를 가지고있다. 이제 끝내기 위해 물 섹션에만 나타나는 내 땅에 반사를 추가하고 싶습니다. 자, 저는 이미 이것을위한 specular map을 가지고 있습니다 만, 그것을 함께 모으는 것처럼 보일 수는 없습니다.

earth/night/atmosphere-thingy 때문에 커스텀 쉐이더에서 모든 작업을하고 있고, Three.JS가 여러 쉐이더를 쌓을 수 없기 때문에이 계산식에 반사 계산을 포함시켜야한다는 것을 읽었습니다. .

이

내 쉐이더, 그리고 난 단지 반사 부분에 붙어있어 :

<script id="earthFragmentShader" type="x-shader/x-fragment"> 
    uniform sampler2D dayTexture; 
    uniform sampler2D nightTexture; 
    uniform sampler2D specularTexture; 
    uniform vec3 sunDirection; 
    varying vec3 vNormal; 
    varying vec2 vUv; 
    void main() { 
     // Textures for day and night: 
     vec3 dayColor  = texture2D(dayTexture, vUv).xyz; 
     vec3 nightColor  = texture2D(nightTexture, vUv).xyz; 

     // compute cosine sun to normal so -1 is away from sun and +1 is toward sun. 
     float cosineAngleSunToNormal = dot(normalize(vNormal), sunDirection); 

     // sharpen the edge beween the transition 
     cosineAngleSunToNormal = clamp(cosineAngleSunToNormal * 3.0, -1.0, 1.0); 

     // convert to 0 to 1 for mixing 
     float mixAmount = cosineAngleSunToNormal * 0.5 + 0.5; 

     // Atmosphere: 
     float intensity = 1.09 - dot(vNormal, vec3(0.0,0.0, 1.0)); 
     vec3 atmosphere = vec3(1,1,1) * pow(intensity, 2.0); 

     // Select day or night texture based on mixAmount. 
     vec3 color = mix(nightColor, dayColor + atmosphere, mixAmount); 

     // Specular: 
     vec3 specularAmount = texture2D(specularTexture, vUv).xyz; 
     vec3 specularColor = vec3(1,1,1) * specularAmount; 

     color = mix(color, specularColor, mixAmount); 

     // Set the color 
     gl_FragColor = vec4(color, 1.0); 
    } 
</script> 

지금까지 그냥 땅에 질감으로 반사 맵을 추가하지만 내가 언급처럼, 내가 원하는 이 BW 이미지를 사용하여 일종의 반사를 표시합니다. 아무도 올바른 방향으로 나를 가리킬 수 있습니까?

는 편집 :

알려줘야, 나는 다음과 같은 코드로 전체 매핑 일을 달성 :

// Specular: 
vec3 specularAmount = texture2D(specularTexture, vUv).xyz; 
vec3 specularColor = vec3(1,1,1); 

float c = 0.35; 
float p = 3.0; 

float mixAmountSpecular = pow(c * dot(normalize(vNormal), sunDirection), p) * specularAmount.z; 

// Select day or night texture based on mixAmount. 
vec3 color = mix(dayColor, specularColor, mixAmountSpecular); 
color = mix(nightColor, color + atmosphere, mixAmount); 

현재 남아있는 유일한 것은 반사 지점 작은 ... 어떤 생각을 얻는 방법이다 이에?

편집 2 :

좋아, 내가 마지막으로 몇 가지 매개 변수를 조정하여 달성 : 참고로

float c = 0.035; 
float p = 30.0; 
float mixAmountSpecular = pow(c * dot(normalize(vNormal), specularDirection), p) * (specularAmount.z * 0.5); 

, 내 sunDirection는 0.8, 1 -2 내 specularDirection -15입니다, 10, 22.5.

Answer 1

내 2 편집을 사용하는 최종 쉐이더를 요약 :

<script id="earthFragmentShader" type="x-shader/x-fragment"> 
    uniform sampler2D dayTexture; 
    uniform sampler2D nightTexture; 
    uniform sampler2D specularTexture; 
    uniform vec3 sunDirection; 
    uniform vec3 specularDirection; 
    varying vec3 vNormal; 
    varying vec2 vUv; 
    void main() { 
     // Textures for day and night: 
     vec3 dayColor  = texture2D(dayTexture, vUv).xyz; 
     vec3 nightColor  = texture2D(nightTexture, vUv).xyz; 

     // compute cosine sun to normal so -1 is away from sun and +1 is toward sun. 
     float cosineAngleSunToNormal = dot(normalize(vNormal), sunDirection); 

     // sharpen the edge beween the transition 
     cosineAngleSunToNormal = clamp(cosineAngleSunToNormal * 3.0, -1.0, 1.0); 

     // convert to 0 to 1 for mixing 
     float mixAmount = cosineAngleSunToNormal * 0.5 + 0.5; 

     // Atmosphere: 
     float intensity = 1.09 - dot(vNormal, vec3(0.0,0.0, 1.0)); 
     vec3 atmosphere = vec3(1,1,1) * pow(intensity, 2.0); 

     // Specular: 
     vec3 specularAmount = texture2D(specularTexture, vUv).xyz; 
     vec3 specularColor = vec3(1,1,1); 

     // Play with these parameters to adjust the specular: 
     float c = 0.035; // Size, I guess... 
     float p = 30.0;  // Blur 
     float mixAmountSpecular = pow(c * dot(normalize(vNormal), specularDirection), p) * (specularAmount.z * 0.5); 

     // Select day or night texture based on mixAmount. 
     vec3 color = mix(dayColor, specularColor, mixAmountSpecular); 
     color = mix(nightColor, color + atmosphere, mixAmount); 

     // Set the color 
     gl_FragColor = vec4(color, 1.0); 
    } 
</script>