ThreeJS Example Webgl_materials_matcap MatCap Shader parsing

Threejs.org/examples/?q…

• Exr file loader

function handleEXR( event ) {
        const contents = event.target.result;
        const loader = new EXRLoader();
        loader.setDataType( THREE.UnsignedByteType ); // default: FloatType
        const texData = loader.parse( contents );
        const texture = new THREE.DataTexture();
        texture.image.width = texData.width;
        texture.image.height = texData.height;
        texture.image.data = texData.data;
        texture.format = texData.format;
        texture.type = texData.type;
        switch ( texture.type ) {
                case THREE.UnsignedByteType:
                        texture.encoding = THREE.RGBEEncoding;
                        texture.minFilter = THREE.NearestFilter;
                        texture.magFilter = THREE.NearestFilter;
                        texture.generateMipmaps = false;
                        texture.flipY = false;
                        break;
                case THREE.FloatType:
                case THREE.HalfFloatType:
                        texture.encoding = THREE.LinearEncoding;
                        texture.minFilter = THREE.LinearFilter;
                        texture.magFilter = THREE.LinearFilter;
                        texture.generateMipmaps = false;
                        texture.flipY = false;
                        break;
        }
        updateMatcap( texture );
}
Copy the code

• Exr files are parsed out of RGBA as matcap

const manager = new THREE.LoadingManager( render );
const loaderEXR = new EXRLoader( manager )
        .setDataType( THREE.UnsignedByteType ); // default: FloatType
const matcap = loaderEXR.load( 'textures/matcaps/040full.exr' );
Copy the code

• normalMap

const loader = new THREE.TextureLoader( manager );
const normalmap = loader.load( 'models/gltf/LeePerrySmith/Infinite-Level_02_Tangent_SmoothUV.jpg' );
Copy the code

• glb

mesh.material = new THREE.MeshMatcapMaterial( {
        color: new THREE.Color().setHex( API.color ).convertSRGBToLinear(),
        matcap: matcap,
        normalMap: normalmap
} );
Copy the code

• shader

void main() {
    #if 0 > 0
        vec4 plane;
        #if 0 < 0
            bool clipped = true;
            if ( clipped ) discard;
        #endif
    #endif
    vec4 diffuseColor = vec4( diffuse, opacity ); // Diffuse is [1, 1, 1]
    #if defined( USE_LOGDEPTHBUF ) && defined( USE_LOGDEPTHBUF_EXT )
        gl_FragDepthEXT = vIsPerspective == 0.0 ? gl_FragCoord.z : log2( vFragDepth ) * logDepthBufFC * 0.5;
    #endif
    // No textures used
    #ifdef USE_MAP 
        vec4 texelColor = texture2D( map, vUv );
        texelColor = mapTexelToLinear( texelColor );
        diffuseColor *= texelColor;
    #endif
    // Custom colors
    #ifdef USE_COLOR
        diffuseColor.rgb *= vColor;
    #endif
    //ALPHAMAP uses g channel
    #ifdef USE_ALPHAMAP
        diffuseColor.a *= texture2D( alphaMap, vUv ).g;
    #endif
    // Here is the Venus A test
    #ifdef ALPHATEST
        if ( diffuseColor.a < ALPHATEST ) discard;
    #endif
    // Heads or tails
    float faceDirection = gl_FrontFacing ? 1.0 : - 1.0;
    / / Flat shading
    #ifdef FLAT_SHADED
        vec3 fdx = vec3( dFdx( vViewPosition.x ), dFdx( vViewPosition.y ), dFdx( vViewPosition.z ) );
        vec3 fdy = vec3( dFdy( vViewPosition.x ), dFdy( vViewPosition.y ), dFdy( vViewPosition.z ) );
        vec3 normal = normalize( cross( fdx, fdy ) );
    #else
        vec3 normal = normalize( vNormal ); // Vnormal should be passed in
        // Both directions
        #ifdef DOUBLE_SIDED
            normal = normal * faceDirection;
        #endif
        // Tangent space
        #ifdef USE_TANGENT
            vec3 tangent = normalize( vTangent );
            vec3 bitangent = normalize( vBitangent );
            #ifdef DOUBLE_SIDED
                tangent = tangent * faceDirection;
                bitangent = bitangent * faceDirection;
            #endif
            #if defined( TANGENTSPACE_NORMALMAP ) || defined( USE_CLEARCOAT_NORMALMAP )
                mat3 vTBN = mat3( tangent, bitangent, normal );
            #endif
        #endif
    #endif
    vec3 geometryNormal = normal;
    // Object space normal vectors should be used in 2D
    #ifdef OBJECTSPACE_NORMALMAP
        normal = texture2D( normalMap, vUv ).xyz * 2.0 - 1.0; // Normal map redefines normal
        #ifdef FLIP_SIDED
            normal = - normal;
        #endif
        #ifdef DOUBLE_SIDED
            normal = normal * faceDirection;
        #endif
        normal = normalize( normalMatrix * normal ); //normalMatrix is a unit vector
    // The tangent vector is used
    #elif defined( TANGENTSPACE_NORMALMAP )
        vec3 mapN = texture2D( normalMap, vUv ).xyz * 2.0 - 1.0;
        mapN.xy *= normalScale;
        #ifdef USE_TANGENT // Generally byte computations
            normal = normalize( vTBN * mapN );
        #else
            normal = perturbNormal2Arb( -vViewPosition, normal, mapN, faceDirection );
        #endif
    // Use bump map to make vector
    #elif defined( USE_BUMPMAP ) 
        normal = perturbNormalArb( -vViewPosition, normal, dHdxy_fwd(), faceDirection );
    #endif
    The uv / / calculation
    // Vertex shader vViewPosition = -mvPosition.xyz;
    // This part is not understood
    vec3 viewDir = normalize( vViewPosition );
    vec3 x = normalize( vec3( viewDir.z, 0.0, - viewDir.x ) );
    vec3 y = cross( viewDir, x );
    vec2 uv = vec2( dot( x, normal ), dot( y, normal ) ) * 0.495 + 0.5;
    //matcap
    #ifdef USE_MATCAP
        vec4 matcapColor = texture2D( matcap, uv );
        matcapColor = matcapTexelToLinear( matcapColor );
    #else
        vec4 matcapColor = vec4( 1.0 );
    #endif
    vec3 outgoingLight = diffuseColor.rgb * matcapColor.rgb;
    gl_FragColor = vec4( outgoingLight, diffuseColor.a );
    #if defined( TONE_MAPPING )
        gl_FragColor.rgb = toneMapping( gl_FragColor.rgb );
    #endif
    gl_FragColor = linearToOutputTexel( gl_FragColor );
    // Fog two calculation methods
    #ifdef USE_FOG
        #ifdef FOG_EXP2
            float fogFactor = 1.0 - exp( - fogDensity * fogDensity * fogDepth * fogDepth );
        #else
            float fogFactor = smoothstep( fogNear, fogFar, fogDepth );
        #endif
        gl_FragColor.rgb = mix( gl_FragColor.rgb, fogColor, fogFactor ); // Mix it together
    #endif
    Take a / /
    #ifdef PREMULTIPLIED_ALPHA
        gl_FragColor.rgb *= gl_FragColor.a;
    #endif
    // Jitter is usually not used
    #ifdef DITHERING
        gl_FragColor.rgb = dithering( gl_FragColor.rgb );
    #endif
}

Copy the code

• RGBEtolinner

vec4 matcapTexelToLinear( vec4 value ) {
    return RGBEToLinear( value );
}
vec4 RGBEToLinear( in vec4 value ) { // Another tonemap way
    return vec4( value.rgb * exp2( value.a * 255.0 - 128.0 ), 1.0 );
}
vec4 linearToOutputTexel( vec4 value ) {
    return LinearTosRGB( value );
}
Copy the code