Пользовательский шейдер работает для SkinnedMesh в three.js

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

Как я понимаю, я должен добавить эти ShaderChunks:

все они в вершинном шейдере.

#include <skinning_pars_vertex> выше основной функции.

И эти три в основной функции:

#include <skinbase_vertex>, #include <skinnormal_vertex>, #include <skinning_vertex>

НоЯ не знаю, как мне инициализировать форму skinning_pars_vertex и использовать их параметры в моем шейдере.