javascript THREEjs正常着色器,将与controlnet一起工作

owfi6suc  于 2023-03-06  发布在  Java
关注(0)|答案(1)|浏览(103)

我怎样才能写这个正常的着色器,使它绕过controlnet https://jsfiddle.net/lunchie/mpuanxL3/4/的预处理器

skinnedMesh.material = new THREE.ShaderMaterial( {
        vertexShader: [
              '#include <skinning_pars_vertex>',
              'varying vec3 vNormal;',
    
              'void main() {',
    
                '#include <skinbase_vertex>',
                '#include <begin_vertex>',
                '#include <skinning_vertex>',
                '#include <project_vertex>',
    
                'mat4 skinMatrix = boneMatX * skinWeight.x + boneMatY * skinWeight.y + boneMatZ * skinWeight.z + boneMatW * skinWeight.w;',
                'vNormal = (skinMatrix * vec4(normal, 0.0)).xyz;',
              '}'
               ].join( '\n' ),
               fragmentShader: [
                 'varying vec3 vNormal;',
                 'void main() {',
                 '       gl_FragColor = vec4(abs(vNormal), 1.0);',
                 '}'
               ].join( '\n' ),
             skinning: true
        } );

它看起来和controlnet用于法线的格式不一样,它给出的图像像

a9wyjsp7

a9wyjsp71#

Three.js和大多数3D渲染器显示法线的方式是将范围从[-1, 1]移动到[0, 1]的可见颜色范围。

gl_FragColor = vec4(vNormal * 0.5 + 0.5, 1.0);

或者,有时蒙皮网格可能会拉伸法线,因此您希望将其缩小到长度为1,其中:

gl_FragColor = vec4(normalize( vNormal ) * 0.5 + 0.5, 1.0);

这应该是您的结果,就像MeshNormalMaterial一样:

相关问题