ThreeJS BasicMaterial

原文

function Material() {

	Object.defineProperty( this, 'id', { value: materialId ++ } );

	this.uuid = MathUtils.generateUUID();

	this.name = '';
	this.type = 'Material';

	this.fog = true;

	this.blending = NormalBlending;
	this.side = FrontSide;
	this.vertexColors = false;

	this.opacity = 1;
	this.transparent = false;

	this.blendSrc = SrcAlphaFactor;
	this.blendDst = OneMinusSrcAlphaFactor;
	this.blendEquation = AddEquation;
	this.blendSrcAlpha = null;
	this.blendDstAlpha = null;
	this.blendEquationAlpha = null;

	this.depthFunc = LessEqualDepth;
	this.depthTest = true;
	this.depthWrite = true;

	this.stencilWriteMask = 0xff;
	this.stencilFunc = AlwaysStencilFunc;
	this.stencilRef = 0;
	this.stencilFuncMask = 0xff;
	this.stencilFail = KeepStencilOp;
	this.stencilZFail = KeepStencilOp;
	this.stencilZPass = KeepStencilOp;
	this.stencilWrite = false;

	this.clippingPlanes = null;
	this.clipIntersection = false;
	this.clipShadows = false;

	this.shadowSide = null;

	this.colorWrite = true;

	this.precision = null; // override the renderer's default precision for this material

	this.polygonOffset = false;
	this.polygonOffsetFactor = 0;
	this.polygonOffsetUnits = 0;

	this.dithering = false;

	this.alphaTest = 0;
	this.alphaToCoverage = false;
	this.premultipliedAlpha = false;

	this.visible = true;

	this.toneMapped = true;

	this.userData = {};
	this.version = 0;

}

• color: 材质的颜色，穿着布料的基本颜色， shader中color的定义和使用

// color的定义
#ifdef USE_COLOR
    attribute vec3 color;
#endif

// color的使用
#ifdef USE_COLOR
	vColor.xyz *= color.xyz;

• map: 材质的贴图，穿着布料上的图片，花纹

// map的定义
#ifdef USE_MAP
    uniform sampler2D map;
#endif

// map的使用
 #ifdef USE_MAP
     vec4 texelColor = texture2D( map, vUv );
     texelColor = mapTexelToLinear( texelColor ); //wss
     diffuseColor *= texelColor;
 #endif

vec4 mapTexelToLinear( vec4 value ) {
    return LinearToLinear( value );
}
vec4 LinearToLinear( in vec4 value ) {
    return value;
}

• aomap

// 定义
#if defined( USE_LIGHTMAP ) || defined( USE_AOMAP )
    attribute vec2 uv2;
    varying vec2 vUv2;
    uniform mat3 uv2Transform;
#endif


#if defined( USE_LIGHTMAP ) || defined( USE_AOMAP )
    vUv2 = ( uv2Transform * vec3( uv2, 1 ) ).xy;
#endif

// 使用
#ifdef USE_LIGHTMAP
    vec4 lightMapTexel = texture2D( lightMap, vUv2 );
    reflectedLight.indirectDiffuse += lightMapTexelToLinear( lightMapTexel ).rgb * lightMapIntensity;
#else
    reflectedLight.indirectDiffuse += vec3( 1.0 );
#endif
#ifdef USE_AOMAP
    float ambientOcclusion = ( texture2D( aoMap, vUv2 ).r - 1.0 ) * aoMapIntensity + 1.0;
    reflectedLight.indirectDiffuse *= ambientOcclusion;
    #if defined( USE_ENVMAP ) && defined( STANDARD )
        float dotNV = saturate( dot( geometry.normal, geometry.viewDir ) );
        reflectedLight.indirectSpecular *= computeSpecularOcclusion( dotNV, ambientOcclusion, material.specularRoughness );
    #endif
#endif

• envMap：环境贴图，就是整个环境在人身上的映射
• combine：就是环境光贴图与灯光之间计算的方式，有三种：add, mix，multiply，计算方式不同，最终输出结果自然不同

if ( parameters.envMap ) {
    switch ( parameters.combine ) {
    case MultiplyOperation:
            envMapBlendingDefine = 'ENVMAP_BLENDING_MULTIPLY';
            break;
    case MixOperation:
            envMapBlendingDefine = 'ENVMAP_BLENDING_MIX';
            break;
    case AddOperation:
            envMapBlendingDefine = 'ENVMAP_BLENDING_ADD';
            break;
    }
}

#ifdef ENVMAP_BLENDING_MULTIPLY
    outgoingLight = mix( outgoingLight, outgoingLight * envColor.xyz, specularStrength * reflectivity );
    #elif defined( ENVMAP_BLENDING_MIX )
        outgoingLight = mix( outgoingLight, envColor.xyz, specularStrength * reflectivity );
    #elif defined( ENVMAP_BLENDING_ADD )
        outgoingLight += envColor.xyz * specularStrength * reflectivity;
#endif