用于阴影着色器的three.js动画精灵/偏移纹理

时间:2013-09-20 09:53:48

标签: javascript opengl-es three.js shader shadow

我正在使用http://stemkoski.github.io/Three.js/作为动画精灵, 对于阴影,我正在使用这个着色器

    <script type="x-shader/x-fragment" id="fragmentShaderDepth">
        uniform sampler2D texture;
        varying vec2 vUV;
        vec4 pack_depth( const in float depth ) {
            const vec4 bit_shift = vec4( 256.0 * 256.0 * 256.0, 256.0 * 256.0, 256.0, 1.0 );
            const vec4 bit_mask  = vec4( 0.0, 1.0 / 256.0, 1.0 / 256.0, 1.0 / 256.0 );
            vec4 res = fract( depth * bit_shift );
            res -= res.xxyz * bit_mask;
            return res;
        }

        void main() {
            vec4 pixel = texture2D( texture, vUV );
            if ( pixel.a < 0.5 ) discard;
            gl_FragData[ 0 ] = pack_depth( gl_FragCoord.z );
        }
    </script>

    <script type="x-shader/x-vertex" id="vertexShaderDepth">
        varying vec2 vUV;

        void main() {
            vUV = 0.75 * uv;
            vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
            gl_Position = projectionMatrix * mvPosition;
        }

    </script>

获取juste一个精灵

    vec2 tailleA = vec2( taillex , tailley);  // 1/22 num sprite horiz  & 1/3 Vert 
    vUV = vec2( tailleA[0] * uv[0] , (tailleA[1] * uv[1]) );

如何从三维自动生成的着色器中获取纹理的偏移量? 如何获得动画阴影?

提前感谢您的帮助。

0 个答案:

没有答案