我想在 Three.js 中使用允许一些光线通过的 ShaderMaterial。正如我最近了解到的，我需要的效果称为“次表面散射”。我找到了几个例子，但只有少数允许实时计算（没有额外的映射）。此代码段中显示了最接近的一个：
var container;
var camera, scene, renderer;
var sssMesh;
var lightSourceMesh;
var sssUniforms;
var clock = new THREE.Clock();
init();
animate();
function init() {
container = document.getElementById('container');
camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 3000);
camera.position.z = 4;
camera.position.y = 2;
camera.rotation.x = -0.45;
scene = new THREE.Scene();
var boxGeometry = new THREE.CubeGeometry(0.75, 0.75, 0.75);
var lightSourceGeometry = new THREE.CubeGeometry(0.1, 0.1, 0.1);
sssUniforms = {
u_lightPos: {
type: "v3",
value: new THREE.Vector3()
}
};
var sssMaterial = new THREE.ShaderMaterial({
uniforms: sssUniforms,
vertexShader: document.getElementById('vertexShader').textContent,
fragmentShader: document.getElementById('fragment_shader').textContent
});
var lightSourceMaterial = new THREE.MeshBasicMaterial();
sssMesh = new THREE.Mesh(boxGeometry, sssMaterial);
sssMesh.position.x = 0;
sssMesh.position.y = 0;
scene.add(sssMesh);
lightSourceMesh = new THREE.Mesh(lightSourceGeometry, lightSourceMaterial);
lightSourceMesh.position.x = 0;
lightSourceMesh.position.y = 0;
scene.add(lightSourceMesh);
renderer = new THREE.WebGLRenderer();
container.appendChild(renderer.domElement);
onWindowResize();
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize(event) {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
var delta = clock.getDelta();
var lightHeight = Math.sin(clock.elapsedTime * 1.0) * 0.5 + 0.7;
lightSourceMesh.position.y = lightHeight;
sssUniforms.u_lightPos.value.y = lightHeight;
sssMesh.rotation.y += delta * 0.5;
renderer.render(scene, camera);
} body {
color: #ffffff;
background-color: #050505;
margin: 0px;
overflow: hidden;
} <script src="http://threejs.org/build/three.min.js"></script>
<div id="container"></div>
<script id="fragment_shader" type="x-shader/x-fragment">
varying vec3 v_fragmentPos;
varying vec3 v_normal;
uniform vec3 u_lightPos;
void main(void)
{
vec3 _LightColor0 = vec3(1.0,0.5,0.5);
float _LightIntensity0 = 0.2;
vec3 translucencyColor = vec3(0.8,0.2,0.2);
vec3 toLightVector = u_lightPos - v_fragmentPos;
float lightDistanceSQ = dot(toLightVector, toLightVector);
vec3 lightDir = normalize(toLightVector);
float ndotl = max(0.0, dot(v_normal, lightDir));
float inversendotl = step(0.0, dot(v_normal, -lightDir));
vec3 lightColor = _LightColor0.rgb * ndotl / lightDistanceSQ * _LightIntensity0;
vec3 subsurfacecolor = translucencyColor.rgb * inversendotl / lightDistanceSQ * _LightIntensity0;
vec3 final = subsurfacecolor + lightColor;
gl_FragColor=vec4(final,1.0);
}
</script>
<script id="vertexShader" type="x-shader/x-vertex">
varying vec3 v_fragmentPos;
varying vec3 v_normal;
void main()
{
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
v_fragmentPos = (modelMatrix * vec4( position, 1.0 )).xyz;
v_normal = (modelMatrix * vec4( normal, 0.0 )).xyz;
gl_Position = projectionMatrix * mvPosition;
}
</script>上面的代码在简单的几何体（在本例中为立方体）上完美运行。但它会在更复杂的网格上绘制一些奇怪的黑色面。最终目标是“照亮”高度图地形，但应用相同的代码，我得到了：
正如你所看到的，“玻璃效果”在明亮区域非常好，但在较暗的区域（光线不能很好地到达）它会绘制一些全黑的脸，我不知道如何避免.
我认为自己是一个中等水平的 Three.js 用户，但这是我第一次玩着色器，公平地说，并不是那么容易。每次我更改着色器代码时，结果都是视觉垃圾。我唯一正确更改的是浅色（正面和背面）。我还尝试增加光照强度，但这不起作用，它只会“燃烧”更多的着色器，从而出现更多的黑色面孔。
谁能指出我正确的方向？这种效果首先被称为什么？我什至不知道如何在 WebGL 资源上搜索它。任何帮助，将不胜感激！
编辑：似乎使地形更厚（具有更高的 Z 比例）解决了这个问题。也许这与光线对面部的角度有关？当光线进入立方体时，这也发生在原始片段中（您可以在框架中看到全黑的脸）。或者我只是在胡说八道。这很容易成为我多年来遇到的最难的一段代码，而且只有 10 行！！我只想看到着色器在原始比例中看起来和在较厚的比例中看起来一样好。但是这些公式所涉及的物理复杂性超出了我的范围。
