threejs 物理材质

莫石
377 阅读2分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，点击查看活动详情

因为项目的材质就是物理材质，所以我主要就看物理材质。 物理材质继承于标准材质，能实现更接近真实的效果。

一些属性

属性很多，我不会一个个阐明，我只说我略微研究了一下的。

image.png

image.png

emissive

自发光， 一般用物理材质就不会管这个属性， 默认是黑色 0 0 0，意思就是默认不发光。我们都知道，物理材质一般来说，要有光才能看得见，那是因为，他们本身不发光，只能反光或者折射。如果设置了这个属性，其实就可以算是一个光源了，但是估计这个光源的衰减会比较厉害。这个属性的色值不受光照影响，其实基础材质就可以理解只有自发光的材质，不反光。

自发光和反射光的混合就是简单的相加。 自发光没有alpha通道。

vec3 totalEmissiveRadiance = emissive;
vec3 outgoingLight = totalDiffuse + totalSpecular + totalEmissiveRadiance;

thickness

厚度，壁厚。 假设几何体是空心的，那么这个几何体有一定的容积。 增加厚度，不会增加几何体的体积，但是却会减小其容积。 文档说的是位于物体表面之下，应该就是这个意思。

从效果上看，它会影响光的偏移程度，因为光的折射。 主要用在tramsimission效果的计算中

 vec3 getVolumeTransmissionRay( const in vec3 n, const in vec3 v, const in float thickness, const in float ior, const in mat4 modelMatrix ) {
		vec3 refractionVector = refract( - v, normalize( n ), 1.0 / ior );
		vec3 modelScale;
		modelScale.x = length( vec3( modelMatrix[ 0 ].xyz ) );
		modelScale.y = length( vec3( modelMatrix[ 1 ].xyz ) );
		modelScale.z = length( vec3( modelMatrix[ 2 ].xyz ) );
		return normalize( refractionVector ) * thickness * modelScale;
	}

opacity

这个属性很简单，影响最终的alpha通道。但是，效果不一定是想当然的那样。因为 ，后面还有许多条件处理

比如，我们都知道的transparent 必须要开不然没效果， 还有alphatest,不透明度低于它的话就会完全透明。

disacrd 关键字 意为不渲染这个片元。

uniform float opacity;
vec4 diffuseColor = vec4( diffuse, opacity );

#ifdef USE_ALPHAMAP
	diffuseColor.a *= texture2D( alphaMap, vUv ).g;
#endif
#ifdef USE_ALPHATEST
	if ( diffuseColor.a < alphaTest ) discard;
#endif
#ifdef OPAQUE
diffuseColor.a = 1.0;
#endif
#ifdef OPAQUE
diffuseColor.a = 1.0;
#endif
#ifdef USE_TRANSMISSION
diffuseColor.a *= transmissionAlpha + 0.1;
#endif

从最后两个条件编译语句可以看出，如果不开启transparent ，opacity最终为1 .

但是，如果开启了trasmission 就要以transmissionAlpha为准。

这样似乎，开启了transimission 之后，opacity就无效了，但是实际调试发现，并非如此。

今日水文结束，明天继续。

avatar
文章
阅读
粉丝