javascript - 在 ThreeJS 中结合 THREE.ShaderLib.phong 和次表面散射

Question

我有一个网格，其中使用 ShaderMaterial 并使用 THREE.ShaderLib.phong 制服。我还链接了贴图、凹凸贴图和世俗贴图纹理，一切都很好。下面是我的代码。

defines = {};
defines[ "USE_MAP" ] = "";
defines[ "USE_BUMPMAP" ] = "";
defines["USE_SPECULARMAP"] = "";

    var uniforms = THREE.UniformsUtils.clone(THREE.ShaderLib.phong.uniforms);
    uniforms.map.value = THREE.ImageUtils.loadTexture('source/images/texture-pink.jpg');
    uniforms.bumpMap.value = THREE.ImageUtils.loadTexture('source/images/texture-pink-bump.jpg');
    uniforms.bumpScale.value = 0.02;
    uniforms.specularMap.value = THREE.ImageUtils.loadTexture('source/images/texture-pink-specular.jpg');

    var parameters = {
        fragmentShader:THREE.ShaderChunk["meshphong_frag"],
        vertexShader:THREE.ShaderChunk["meshphong_vert"], 
        defines: defines,
        uniforms: uniforms,
        lights: true,
        fog: false,
        side: THREE.DoubleSide,
        blending: THREE.NormalBlending,
        transparent: (uniforms.opacity.value < 1.0),
        derivatives : true
    };

    material = new THREE.ShaderMaterial(parameters);

下面是我得到的结果。

我有单独的网格次表面散射代码。下面是我的代码。

<script id="vertexShader" type="x-shader/x-vertex">
        varying vec3 v_fragmentPos;
        varying vec3 v_normal;

        void main() {

                vec4 mvPositions = modelViewMatrix * vec4( position, 1.0 );
                v_fragmentPos =  (modelMatrix * vec4( position, 1.0 )).xyz;
                v_normal =  (modelMatrix * vec4( normal, 0.0 )).xyz;
                gl_Position = projectionMatrix * mvPositions;
        }
    </script>

<script id="fragment_shader" type="x-shader/x-fragment">
        varying vec3 v_fragmentPos;
        varying vec3 v_normal;
        uniform vec3 u_lightPos;

        void main() {

                vec3 _LightColor0 = vec3(1.0,0.5,0.5);  
                float _LightIntensity0 = 2.5;
                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>

我在这里找到了非常基本的代码 Shader - Simple SSS lighting issue 。还有我的 Material 代码。

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,
 });

下面是我通过次表面散射得到的结果。

现在，我正在尝试将这两者结合起来。我尝试了 THREE.UniformsUtils.merge 来合并两个制服，我很确定我组合顶点和片段着色器代码的方式是错误的。由于它是一个字符串，我只是将其复制粘贴到脚本标记中，我不确定这是否是正确的方法。那么这首先可能吗？如果是的话，有人可以指导我。我对 javascript 有相当多的了解，并开始掌握 ThreeJS，但对 Open GL 的了解为零。

感谢任何帮助。

谢谢。

Answer 1

顶点和片段着色器是您与 GPU 管道对话的方式，在您真正理解其背后的机制之前，合并两个字符串不会产生任何结果。

所以Phong Shading这是您将镜面+漫反射+环境读取到片段着色器中以获取要应用的顶点集的方式。

[来源:维基百科]

现在，次表面散射是您考虑光与 Material 的相互作用的方式，通常您会阅读光与 Material 的相互作用

[来源:Link ]

您可以阅读Chapter-16 Nvidia这可以解决您的解决方案的所有数学问题。

我已经为您创建了次表面散射的解决方案，您可以查看表格 Git 。这是基于深度图的 SSS。

代码灵感来自 pixelnerve .

简而言之，您尝试合并 THREE.Phong 和次表面散射，您可以为您的环境扩展相同的示例代码，写下您的自定义片段着色器(您可以直接采用此顶点)。