三个js不透明镜像

Question

我已经使用此处演示的技术实现了一个镜像： http://threejs.org/examples/webgl_mirror.html

我想让我的倒影稍微不透明，这样 'deeper' 进入倒影的东西看起来更暗。我正在考虑劫持片段着色器，但不确定什么是最好的属性用来创建这种关系。

目前我的镜像片段着色器：

vec4 color = texture2DProj(mirrorSampler, mirrorCoord);
color = vec4(blendOverlay(mirrorColor.r, color.r), blendOverlay(mirrorColor.g, color.g), blendOverlay(mirrorColor.b, color.b), 1.0);
vec3 outgoingLight = color.rgb;
${THREE.ShaderChunk[ "fog_fragment" ]}
gl_FragColor = vec4(outgoingLight,1.0);

Answer 1

您所描述的实际上并不是镜像的工作原理。但是，只需在您的初始通道上应用黑雾。

但是，您可能会通过跳过雾并应用 dot(Normal,View)（又名 "facing ratio"）的某些函数来获得您真正想要的结果反射项的亮度。 "Schlick approximation," 是菲涅尔方程的一个常见近似值，即 (pow((1.0-abs(dot(N,V))),5.0))——因此反射在掠射角处更强，但在 "deep" 直射角处较暗。这更像是许多真实的镜子。

三个js不透明镜像

Three js Opaque mirror

webgl

three.js