Question

我对Three.js确实很陌生，但是我是一名游戏开发人员（使用Unity）。

我想将角色展示柜添加到我的网站中，所以我想为此使用three.js。

我已经编写了一个着色器以应用于我的角色模型，但是在我的动画角色模型中看起来并不好，因此经过一些研究后，我发现我应该为着色器添加蒙皮支持，并且可以通过使用那些蒙皮的ShaderChunk来实现（s）。

这是我的着色器：

<script id='vertexShader' type="x-shader/x-vertex">
    varying vec2 vUv;

    void main() 
    { 
        vUv = uv;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
</script>
<script id='fragmentShader' type="x-shader/x-fragment">
    uniform sampler2D grayScaleTexture;
    uniform sampler2D maskTexture;
    uniform vec3 bottomRedChannelColor, topRedChannelColor,
                 bottomGreenChannelColor, topGreenChannelColor,
                 bottomBlueChannelColor, topBlueChannelColor;
    varying vec2 vUv;

    void main() 
    {
        vec4 c = texture2D(grayScaleTexture, vUv);
        vec4 m = texture2D(maskTexture, vUv);
        float grayscale = c.r;
        vec3 redChannelColor = mix(bottomRedChannelColor, topRedChannelColor, grayscale) * m.r;
        vec3 greenChannelColor = mix(bottomGreenChannelColor, topGreenChannelColor, grayscale) * m.g;
        vec3 blueChannelColor = mix(bottomBlueChannelColor, topBlueChannelColor, grayscale) * m.b;
        gl_FragColor = vec4(redChannelColor + greenChannelColor + blueChannelColor, 1.0);
    }  
</script>

var uniforms = {
    grayScaleTexture: {
        type: "t", value: textureLoader.load("textures/cube/Cube_Skin0.png", function (texture) {
            texture.encoding = THREE.sRGBEncoding;
            texture.flipY = false;
        })
    },
    maskTexture: {
        type: "t", value: textureLoader.load("textures/cube/Cube_Skin0_mask.png", function (texture) {
            texture.encoding = THREE.sRGBEncoding;
            texture.flipY = false;
        })
    },
    bottomRedChannelColor: { type: 'c', value: new THREE.Color("rgb(255, 0, 0)") },
    topRedChannelColor: { type: 'c', value: new THREE.Color("rgb(255, 128, 128)") },
    bottomGreenChannelColor: { type: 'c', value: new THREE.Color("rgb(0, 255, 0)") },
    topGreenChannelColor: { type: 'c', value: new THREE.Color("rgb(128, 255, 128)") },
    bottomBlueChannelColor: { type: 'c', value: new THREE.Color("rgb(0, 0, 255)") },
    topBlueChannelColor: { type: 'c', value: new THREE.Color("rgb(128, 128, 255)") }
}
var material = new THREE.ShaderMaterial({
    uniforms: uniforms,
    vertexShader: vertShader,
    fragmentShader: fragShader,
    skinning: true
});

据我了解，我应该添加这些ShaderChunk：

所有这些都在顶点着色器中。

#include <skinning_pars_vertex>上方。

这三个主要功能：

#include <skinbase_vertex>， #include <skinnormal_vertex>， #include <skinning_vertex>

但是我不知道如何初始化skinning_pars_vertex制服并在着色器中使用它们的哪些参数。

自定义着色器可用于three.js中的SkinnedMesh

0 个答案: