在ThreeJS

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。还有我的材料代码。

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但在开放GL方面没有任何知识。

感谢任何帮助。

谢谢。

Answer 1

顶点和片段着色器是你与GPU交谈的方式，并且合并两个字符串不会产生任何结果，直到你真正理解它背后的机制。

所以Phong Shading是你在镜片着色器中读取要应用的顶点集的镜面+漫反射+环境的方法。

[来源：维基]

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

[来源：Link]

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

我已经为子表面散射创建了解决方案，您可以结帐表单 Git。这是基于深度图的SSS。

代码来自pixelnerve。

简而言之，你想要合并THREE.Phong和Subsurface Scattering，你可以为你的环境扩展相同的示例代码，写下自定义片段着色器（你可以直接使用顶点）。