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。そして私の材料コード。

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

以下は、地下散乱を伴う結果です。

今、私はこれらの2を結合しようとしています。私はTHREE.UniformsUtils.mergeを両方のユニフォームをマージしようとしましたが、私は頂点とフラグメントシェーダコードを結合した方法が間違っていると確信しています。その文字列から、私はスクリプトタグの両方を貼り付けてコピーします。それを行う正しい方法があるかどうかはわかりません。これは最初の場所で可能ですか？もしそうなら、誰かが私にこれを導くことができる。私はjavascriptに関するかなりの知識を持っていて、threeJSのハングアップを始めましたが、GLを開くときは知識がありません。

何か助けていただければ幸いです。

ありがとうございます。

Answer 1

頂点シェーダとフラグメントシェーダは、GPUパイプラインと話をして2つの文字列をマージする方法で、この背後にあるメカニズムを本当に理解するまでは何も起こりません。

したがってPhong Shadingは、適用する頂点のセットのフラグメントシェーダに鏡面+拡散+周囲を読み取る方法です。

[出典：ウィキ]

今地下散乱は、通常、あなたが材料

と 光の相互作用を読んでいるあなたは材料に 光の相互作用を検討したことにより、方法です

[ソース：Link]

Chapter-16 Nvidiaを読むと、解答の数学的問題がすべて解決されます。

チェックアウト可能なサブサーフェススキャッタリングのソリューションを作成しました Git。これは深度マップベースのSSSです。

コードはpixelnerveからインスピレーションを受けています。

あなたがマージしようとしているものは3つです。PhongとSubsurface Scatteringを使用する代わりに、同じサンプルコードを拡張して、カスタムフラグメントシェーダ（これを直接取ることができる頂点）を書き留めることができます。