How Repeat ThreeJS Matcap use fragmentShader Texture

492 Views Asked by At

here is vertex and fragmentshader material :

material = new THREE.ShaderMaterial( {

uniforms: {
    textureMap: { type: 't', value: THREE.ImageUtils.loadTexture( 'img/matcap/green.jpg' ) },
    normalMap: { type: 't', value: THREE.ImageUtils.loadTexture( 'img/normalmap/stamp.jpg' ) },
    normalScale: { type: 'f', value: 0.5 },
    texScale: { type: 'f', value: 5 },
    useSSS: { type: 'f', value: 10 },
    useScreen: { type: 'f', value: 0 },
    color: { type: 'c', value: new THREE.Color( 0, 0, 0 ) }
},
vertexShader: document.getElementById( 'vertexShader' ).textContent,
fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
side: THREE.DoubleSide

} );

I want repeat texture use like this

material.uniforms.textureMap.value.wrapS = material.uniforms.textureMap.value.wrapT = 
THREE.ClampToEdgeWrapping;

material.uniforms.normalMap.value.wrapS = material.uniforms.normalMap.value.wrapT = 
THREE.RepeatWrapping;
material.uniforms.normalMap.value.repeat.set( 20, 20 );

but not work in three.js why? how fix it thanks all friends!

1

There are 1 best solutions below

0
Ajit kohir On

By default the texture are Clamp To Edge means no wrapping to zero. Your main texture is Clamp TO Edge repeat and normal texture is Repeat Wrapping probably you normal map texture quality is not so bright to make a difference try to revert the thing or texture ( means make some bright normal map texture or dull texture map any).

your approach is correct it seems. One more thing which you can do to increase readability:

            var textureMap = THREE.ImageUtils.loadTexture( 'img/matcap/green.jpg' );
            var normalMap = THREE.ImageUtils.loadTexture( 'img/normalmap/stamp.jpg' )
            textureMap.repeat.set(20,20);
            normalMap.repeat.set(10,10);
            //then shader code