Kombinieren von THREE.ShaderLib.phong und Subsurface Streuung in ThreeJS

Question

Ich habe ein Mesh, in dem ich ein ShaderMaterial verwende und ich verwende THREE.ShaderLib.phong Uniformen. Ich habe die Karte verbunden, bump & säkular Karten Textur auch und alles funktioniert gut. Unten ist mein Code.

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

unten ist das Ergebnis, das ich bekommen.

Ich habe getrennten Subsurface Scattering-Code für das Netz. Unten ist mein Code.

<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> 

Ziemlich einfach Code fand ich hier Shader - Simple SSS lighting issue. Und mein Materialcode.

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

Unten ist das Ergebnis, das ich mit der Subsurface Streuung bekomme. Jetzt

, Ich versuche, diese beiden zu kombinieren. Ich habe THREE.UniformsUtils.merge ausprobiert, um beide Uniformen zusammenzuführen, und ich bin mir ziemlich sicher, dass die Art und Weise, wie ich die Vertex- und Fragment-Shader-Codes kombiniere, falsch ist. Da es sich um eine Zeichenfolge handelt, kopiere ich einfach beide in Skript-Tags und bin mir nicht sicher, ob das der richtige Weg ist. Ist das überhaupt möglich? Wenn ja, kann mir jemand dabei helfen. Ich habe ziemlich viel Wissen mit Javascript und fing an, einen Hang von threeJS, aber habe kein Wissen, wenn es darum geht, GL zu öffnen.

Jede Hilfe wird geschätzt.

Vielen Dank.

Answer 1

Vertex- und Fragment-Shader sind die Art und Weise, wie Sie mit Ihnen sprechen GPU-Pipeline und das Zusammenführen der beiden Zeichenfolge wird nichts ergeben, bis Sie wirklich den Mechanismus dahinter verstehen.

Also Phong Shading ist Weg, wo Sie in Ihrem Fragment Shader specular + diffused + ambient für die Menge der Scheitelpunkte, auf die Sie anwenden möchten, lesen.

[Quelle: wiki]

Jetzt Subsurface Scattering ist Art und Weise, mit der Sie die Licht-Wechselwirkung in das Material überlegen, wo als man sogar die Licht-Wechselwirkung mit Material

lesen

[Quelle: Link]

Sie können die Chapter-16 Nvidia lesen, die alle mathematischen Probleme für Ihre Lösung lösen.

Ich habe Ihre Lösung für die Subsurface Scattering Sie können zur Kasse Formular Git erstellt werden. Dies ist ein Tiefenkartenbasiertes SSS.

Der Code ist von der pixelnerve inspirieren.

Kurz gesagt, was Sie versuchen, DREI zu verschmelzen.Mit Phong und Subsurface Scattering können Sie denselben Beispielcode für Ihre Umgebung erweitern, indem Sie den benutzerdefinierten Fragment-Shader aufschreiben (Vertex können Sie direkt übernehmen).