本文继续对《UnityShader入门精要》——冯乐乐 第十五章 使用噪声 进行学习
参考第15章 使用噪声
很多时候,向规则的事物里添加一些“杂乱无章”的效果往往会有意想不到的效果。而这些“杂乱无章”的效果来源就是噪声。在本章中,我们将会学习如何使用噪声来模拟各种看似“神奇”的特效。
- 在15.1 节中,我们将使用一张噪声纹理来模拟火焰的消融效果。
- 15.2 节则把噪声应用在模拟水面的波动上,从而产生波光粼粼的视觉效果。
- 在15.3 节中,我们会回顾13.3 节中实现的全局雾效,并向其中添加噪声来模拟不均匀的飘渺雾效。
一、消融效果
图15.1 箱子的消融效果要实现图15.1 中的效果,原理非常简单,概括来说就是噪声纹理+透明度测试。我们使用对噪声纹理采样的结果和某个控制消融程度的阀值比较,如果小于阔值,就使用clip 函数把它对应的像素裁剪掉,这些部分就对应了图中被“烧毁”的区域。而镂空区域边缘的烧焦效果则是将两种颜色混合,再用pow 函数处理后,与原纹理颜色混合后的结果。
1.Properties
Shader "Unity Shaders Book/Chapter 15/Dissolve" {
Properties {
_BurnAmount ("Burn Amount", Range(0.0, 1.0)) = 0.0
_LineWidth("Burn Line Width", Range(0.0, 0.2)) = 0.1
_MainTex ("Base (RGB)", 2D) = "white" {}
_BumpMap ("Normal Map", 2D) = "bump" {}
_BurnFirstColor("Burn First Color", Color) = (1, 0, 0, 1)
_BurnSecondColor("Burn Second Color", Color) = (1, 0, 0, 1)
_BurnMap("Burn Map", 2D) = "white"{}
}
- _BurnAmount 属性用于控制消融程度,当值为0 时,物体为正常效果,当值为1 时,物体会完全消融。
- _LineWidth 属性用于控制模拟烧焦效果时的线宽,它的值越大,火焰边缘的蔓延范围越广。
- _MainTex 和 _BumpMap 分别对应了物体原本的漫反射纹理和法线纹理。
- _BurnFirstColor 和 _BurnSecondColor 对应了火焰边缘的两种颜色值。
- _BurnMap 则是关键的噪声纹理。
2.其它参数
Tags { "RenderType"="Opaque" "Queue"="Geometry"}
Pass {
Tags { "LightMode"="ForwardBase" }
Cull Off
CGPROGRAM
#include "Lighting.cginc"
#include "AutoLight.cginc"
#pragma multi_compile_fwdbase
为了得到正确的光照,我们设置了Pass 的LightMode 和 multi_compile_ fwdbase 的编译指令。值得注意的是,我们还使用Cull 命令关闭了该Shader 的面片剔除,也就是说,模型的正面和背面都会被渲染。这是因为,消融会导致裸露模型内部的构造,如果只渲染正面会出现错误的结果。
3.顶点着色器
struct v2f {
float4 pos : SV_POSITION;
float2 uvMainTex : TEXCOORD0;
float2 uvBumpMap : TEXCOORD1;
float2 uvBurnMap : TEXCOORD2;
float3 lightDir : TEXCOORD3;
float3 worldPos : TEXCOORD4;
SHADOW_COORDS(5)
};
v2f vert(a2v v) {
v2f o;
o.pos = UnityObjectToClipPos(v.vertex);
o.uvMainTex = TRANSFORM_TEX(v.texcoord, _MainTex);
o.uvBumpMap = TRANSFORM_TEX(v.texcoord, _BumpMap);
o.uvBurnMap = TRANSFORM_TEX(v.texcoord, _BurnMap);
TANGENT_SPACE_ROTATION;
o.lightDir = mul(rotation, ObjSpaceLightDir(v.vertex)).xyz;
o.worldPos = mul(unity_ObjectToWorld, v.vertex).xyz;
TRANSFER_SHADOW(o);
return o;
}
顶点着色器的代码很常规。我们使用宏TRANSFORM_TEX 计算了三张纹理对应的纹理坐标,再把光源方向从模型空间变换到了切线空间。最后,为了得到阴影信息,计算了世界空间下的顶点位置和阴影纹理的采样坐标(使用了TRANSFER_SHADOW 宏〉。具体原理可参见9.4 节。
4.片元着色器
fixed4 frag(v2f i) : SV_Target {
fixed3 burn = tex2D(_BurnMap, i.uvBurnMap).rgb;
clip(burn.r - _BurnAmount);
float3 tangentLightDir = normalize(i.lightDir);
fixed3 tangentNormal = UnpackNormal(tex2D(_BumpMap, i.uvBumpMap));
fixed3 albedo = tex2D(_MainTex, i.uvMainTex).rgb;
fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz * albedo;
fixed3 diffuse = _LightColor0.rgb * albedo * max(0, dot(tangentNormal, tangentLightDir));
fixed t = 1 - smoothstep(0.0, _LineWidth, burn.r - _BurnAmount);
fixed3 burnColor = lerp(_BurnFirstColor, _BurnSecondColor, t);
burnColor = pow(burnColor, 5);
UNITY_LIGHT_ATTENUATION(atten, i, i.worldPos);
fixed3 finalColor = lerp(ambient + diffuse * atten, burnColor, t * step(0.0001, _BurnAmount));
return fixed4(finalColor, 1);
}
我们首先对l噪声纹理进行采样,并将采样结果和用于控制消融程度的属性 _BumAmount 相减,传递给clip 函数。当结果小于0 时, 该像素将会被剔除,从而不会显示到屏幕上。如果通过了测试,则进行正常的光照计算。我们首先根据漫反射纹理得到材质的反射率 albedo,并由此计算得到环境光照,进而得到漫反射光照。
然后,我们计算了烧焦颜色bumColor。我们想要在宽度为_LineWidth 的范围内模拟一个烧焦的颜色变化,第一步就使用了smoothstep 函数来计算混合系数 t。当t 值为1 时, 表明该像素位于消融的边界处, 当t 值为0 时, 表明该像素为正常的模型颜色,而中间的插值则表示需要模拟一个烧焦效果。我们首先用t 来混合两种火焰颜色_BurnFirstColor 和 _BurnSecondColor,为了让效果更接近烧焦的痕迹,我们还使用pow 函数对结果进行处理。然后,我们再次使用t 来混合正常的光照颜色〈环境光+漫反射)和烧焦颜色。我们这里又使用了step 函数来保证当 _BumAmount 为0 时,不显示任何消融效果。最后,返回混合后的颜色值 finalColor。
step 函数接受两个参数,第一个参数是参考值,第二个参数是待比较的数值。如果第二个参数大于等于第一个参数,则返回1 ,否则返回0 。
5.投射阴影的Pass
与之前的实现不同,我们在本例中还定义了一个用于投射阴影的Pass。正如我们在9.4.5节中的解释一样,使用透明度测试的物体的阴影需要特别处理,如果仍然使用普通的阴影Pass,那么被剔除的区域仍然会向其他物体投射阴影,造成“穿帮”。为了让物体的阴影也能配合透明度测试产生正确的效果,我们需要自定义一个投射阴影的Pass:
// Pass to render object as a shadow caster
Pass {
Tags { "LightMode" = "ShadowCaster" }
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#pragma multi_compile_shadowcaster
在Unity 中,用于投射阴影的Pass 的LightMode 需要被设置为ShadowCaster,同时,还需要使用
#pragma multi_compile_shadowcaster
指明它需要的编译指令。顶点着色器和片元着色器的代码很简单:
struct v2f {
V2F_SHADOW_CASTER;
float2 uvBurnMap : TEXCOORD1;
};
v2f vert(appdata_base v) {
v2f o;
TRANSFER_SHADOW_CASTER_NORMALOFFSET(o)
o.uvBurnMap = TRANSFORM_TEX(v.texcoord, _BurnMap);
return o;
}
fixed4 frag(v2f i) : SV_Target {
fixed3 burn = tex2D(_BurnMap, i.uvBurnMap).rgb;
clip(burn.r - _BurnAmount);
SHADOW_CASTER_FRAGMENT(i)
}
阴影投射的重点在于我们需要按正常Pass 的处理来剔除片元或进行顶点动画,以便阴影可以和物体正常渲染的结果相匹配。在自定义的阴影投射的Pass 中,我们通常会使用Unity 提供的内置宏V2F_SHADOW_CASTER、TRANSFER_SHADOW_CASTER_NORMALOFFSET ( 旧版本中会使用TRANSFER_SHADOW_CASTER )和
SHADOW_CASTER_FRAGMENT 来帮助我们计算阴影投射时需要的各种变量,而我们可以只关注自定义计算的部分。
在上面的代码中,我们首先在v2f 结构体中利用V2F_SHADOW_CASTER 来定义阴影投射需要定义的变量。随后, 在顶点着色器中,我们使 用TRANSFER_SHADOW_CASTER_NORMALOFFSET 来填充V2F_SHADOW_CASTER 在背后声明的一些变量,这是由Unity 在背后为我们完成的。我们需要在顶点着色器中 关注自定义的计算部分,这里指的就是我们需要计算噪声纹理的采样坐标 uvBurnMap。 在片元着 色器中,我们首先按之前的处理方法使用噪声纹理的采样结果来剔除片元, 最后再利用 SHADOW_CASTER_FRAGMENT 来让Unity 为我们完成阴影投射的部分,把结果输出到深度图 和阴影映射纹理中。
通过Unity 提供的这3 个内置宏(在UnityCG.cginc 文件中被定义〉,我们可以方便地自定义需要的阴影投射的Pass,但由于这些宏需要使用一些特定的输入变量, 因此我们需要保证为它们提供了这些变量。例如, TRANSFER_SHADOW_CASTER_NORMALOFFSET 会使用名称v 作为输入结构体, v 中需要包含顶点位置v.vertex 和顶点法线v.normal的信息,我们可以直接使用内置的appdata_base 结构体,它包含了这些必需的顶点变量。如果我们需要进行顶点动画,可以在顶点着色器中直接修改v.vertex ,再传递给TRANSFER_SHADOW_CASTER_NORMALOFFSET 即可(可参见11.3.3 节〉。
在本例中,我们使用的噪声纹理(对应本书资源的 Assets/Textures/Chapter 15/Burn_Noise.png )如图15.2 所示 。
图15.2 消融效果使用的噪声纹理
把它 拖曳到材质的_BurnMap 属性上,再调整材质的 _BurnAmount 属 性,就可以看到木箱逐渐消融的效果。在本书资源的实现中,我 们实现了一个辅助脚本,用来随时间调整材质的 _BurnAmount 值,因此,当读者单击运行后,也可以看到消融的动画效果。
使用不同的噪声和纹理属性〈即材质面板上纹理的Tiling 和Offset 值〉都会得到不同的消融效果。因此,要想得到好的消融效果,也需要美术人员提供合适的噪声纹理来配合。
二、水波效果
在模拟实时水面的过程中,我们往往也会使用噪声纹理。此时,噪声纹理通常会用作一个高度图,以不断修改水面的法线方向。为了模拟水不断流动的效果,我们会使用和时间相关的变量来对噪声纹理进行采样,当得到法线信息后,再进行正常的反射+折射计算,得到最后的水面波动效果。
在本节中,我们将会使用一个由噪声纹理得到的法线贴图,实现一个包含菲涅耳反射(详见10.1.5 节〉的水面效果,如图15.3 所示。
图15.3 包含菲涅耳反射的水面波动效果。在左图中,视角方向和水面法线的夹角越大,反射效果越强。在右图中,视角方向和水面法线的夹角越大,折射效果越强
我们曾在10.2.2 节介绍过如何使用反射和折射来模拟一个透明玻璃的效果。本节使用的Shader 和10.2.2 节中的实现基本相同。我们使用一张立方体纹理(Cubemap )作为环境纹理,模拟反射。为了模拟折射效果,我们使用GrabPass 来获取当前屏幕的渲染纹理,并使用切线空间下的法线方向对像素的屏幕坐标进行偏移,再使用该坐标对渲染纹理进行屏幕采样,从而模拟近似的折射效果。与10.2.2 节中的实现不同的是,水波的法线纹理是由一张噪声纹理生成而得,而且会随着时间变化不断平移,模拟波光粼粼的效果。除此之外,我们没有使用一个定值来混合反射和折射颜色,而是使用之前提到的菲涅耳系数来动态决定混合系数。我们使用如下公式来计算菲涅耳系数:
image.png
其中,v 和n 分别对应了视角方向和法线方向。它们之间的夹角越小,fresnel 值越小,反射越弱,折射越强。菲涅耳系数还经常会用于边缘光照的计算中。
1.Properties
Shader "Unity Shaders Book/Chapter 15/Water Wave" {
Properties {
_Color ("Main Color", Color) = (0, 0.15, 0.115, 1)
_MainTex ("Base (RGB)", 2D) = "white" {}
_WaveMap ("Wave Map", 2D) = "bump" {}
_Cubemap ("Environment Cubemap", Cube) = "_Skybox" {}
_WaveXSpeed ("Wave Horizontal Speed", Range(-0.1, 0.1)) = 0.01
_WaveYSpeed ("Wave Vertical Speed", Range(-0.1, 0.1)) = 0.01
_Distortion ("Distortion", Range(0, 100)) = 10
}
- _Color 用于控制水面颜色;
- _MainTex 是水面波纹材质纹理,默认为白色纹理:
- _WaveMap 是一个由噪声纹理生成的法线纹理;
- _Cubemap 是用于模拟反射的立方体纹理;
- _Distortion 则用于控制模拟折射时图像的扭曲程度;
- _WaveXSpeed 和_WaveYSpeed 分别用于控制法线纹理在X 和Y 方向上的平移速度
2.定义相应的渲染队列, 并使用GrabPass 来获取屏幕图像
SubShader {
// We must be transparent, so other objects are drawn before this one.
Tags { "Queue"="Transparent" "RenderType"="Opaque" }
// This pass grabs the screen behind the object into a texture.
// We can access the result in the next pass as _RefractionTex
GrabPass { "_RefractionTex" }
我们首先在SubShader 的标签中将渲染队列设置成Transparent, 并把后面的RenderType 设置为Opaque。把Queue 设置成Transparent 可以确保该物体渲染时,其他所有不透明物体都已经被渲染到屏幕上了, 否则就可能无法正确得到“透过水面看到的图像”。而设置RenderType 则是为了在使用着色器替换( Shader Replacement)时,该物体可以在需要时被正确渲染。这通常发生在我们需要得到摄像机的深度和法线纹理时, 这在第13 章中介绍过。随后,我们通过关键词GrabPass 定义了一个抓取屏幕图像的Pass 。在这个Pass 中我们定义了一个字符串,该字符串内部的名称决定了抓取得到的屏幕图像将会被存入哪个纹理中(可参见10 .2.2 节〉。
3.定义渲染水面所需的Pass
为了在Shader 中访问各个属性, 我们首先需要定义它们对应的变量:
fixed4 _Color;
sampler2D _MainTex;
float4 _MainTex_ST;
sampler2D _WaveMap;
float4 _WaveMap_ST;
samplerCUBE _Cubemap;
fixed _WaveXSpeed;
fixed _WaveYSpeed;
float _Distortion;
sampler2D _RefractionTex;
float4 _RefractionTex_TexelSize;
需要注意的是,我们还定义了 _RefractionTex 和 _RefractionTex_TexelSize 变量,这对应了在使用GrabPass 时,指定的纹理名称。_RefractionTex_TexelSize 可以让我们得到该纹理的纹素大小,例如一个大小为256 × 512 的纹理,它的纹素大小为( 1/256, 1/512)。我们需要在对屏幕图像的采样坐标进行偏移时使用该变量。
4.顶点着色器
struct v2f {
float4 pos : SV_POSITION;
float4 scrPos : TEXCOORD0;
float4 uv : TEXCOORD1;
float4 TtoW0 : TEXCOORD2;
float4 TtoW1 : TEXCOORD3;
float4 TtoW2 : TEXCOORD4;
};
v2f vert(a2v v) {
v2f o;
o.pos = UnityObjectToClipPos(v.vertex);
o.scrPos = ComputeGrabScreenPos(o.pos);
o.uv.xy = TRANSFORM_TEX(v.texcoord, _MainTex);
o.uv.zw = TRANSFORM_TEX(v.texcoord, _WaveMap);
float3 worldPos = mul(unity_ObjectToWorld, v.vertex).xyz;
fixed3 worldNormal = UnityObjectToWorldNormal(v.normal);
fixed3 worldTangent = UnityObjectToWorldDir(v.tangent.xyz);
fixed3 worldBinormal = cross(worldNormal, worldTangent) * v.tangent.w;
o.TtoW0 = float4(worldTangent.x, worldBinormal.x, worldNormal.x, worldPos.x);
o.TtoW1 = float4(worldTangent.y, worldBinormal.y, worldNormal.y, worldPos.y);
o.TtoW2 = float4(worldTangent.z, worldBinormal.z, worldNormal.z, worldPos.z);
return o;
}
在进行了必要的顶点坐标变换后, 我们通过调用ComputeGrabScreenPos 来得到对应被抓取屏幕图像的采样坐标。读者可以在UnityCG.cginc 文件中找到它的声明,它的主要代码和 ComputeScreenPos 基本类似, 最大的不同是针对平台差异造成的采样坐标问题〈见5.6.1 节〉进行了处理。接着,我们计算了 _MainTex 和 _BumpMap 的采样坐标,并把它们分别存储在一个float4类型变量的xy 和zw 分量中。由于我们需要在片元着色器中把法线方向从切线空间(由法线纹理来样得到〉变换到世界空间下,以便对Cubemap 进行采样, 因此,我们需要在这里计算该顶点对应的从切线空间到世界空间的变换矩阵, 并把该矩阵的每一行分别存储在TtoW0、TtoW1 和 TtoW2 的 xyz 分量中。这里面使用的数学方法就是,得到切线空间下的3 个坐标轴( x 、y、z 轴分别对应了切线、副切线和法线的方向〉在世界空间下的表示,再把它们依次按列组成一个变换矩阵即可。
TtoW0 等值的w 分量同样被利用起来,用于存储世界空间下的顶点坐标。
5.片元着色器
fixed4 frag(v2f i) : SV_Target {
float3 worldPos = float3(i.TtoW0.w, i.TtoW1.w, i.TtoW2.w);
fixed3 viewDir = normalize(UnityWorldSpaceViewDir(worldPos));
float2 speed = _Time.y * float2(_WaveXSpeed, _WaveYSpeed);
// Get the normal in tangent space
fixed3 bump1 = UnpackNormal(tex2D(_WaveMap, i.uv.zw + speed)).rgb;
fixed3 bump2 = UnpackNormal(tex2D(_WaveMap, i.uv.zw - speed)).rgb;
fixed3 bump = normalize(bump1 + bump2);
// Compute the offset in tangent space
float2 offset = bump.xy * _Distortion * _RefractionTex_TexelSize.xy;
i.scrPos.xy = offset * i.scrPos.z + i.scrPos.xy;
fixed3 refrCol = tex2D( _RefractionTex, i.scrPos.xy/i.scrPos.w).rgb;
// Convert the normal to world space
bump = normalize(half3(dot(i.TtoW0.xyz, bump), dot(i.TtoW1.xyz, bump), dot(i.TtoW2.xyz, bump)));
fixed4 texColor = tex2D(_MainTex, i.uv.xy + speed);
fixed3 reflDir = reflect(-viewDir, bump);
fixed3 reflCol = texCUBE(_Cubemap, reflDir).rgb * texColor.rgb * _Color.rgb;
fixed fresnel = pow(1 - saturate(dot(viewDir, bump)), 4);
fixed3 finalColor = reflCol * fresnel + refrCol * (1 - fresnel);
return fixed4(finalColor, 1);
}
我们首先通过TtoW0 等变量的w 分量得到世界坐标,并用该值得到该片元对应的视角方向。除此之外,我们还使用内置的 _Time.y 变量和 _WaveXSpeed 、_WaveYSpeed 属性计算了法线纹理的当前偏移量,并利用该值对法线纹理进行两次采样(这是为了模拟两层交叉的水面波动的效果〉,对两次结果相加并归一化后得到切线空间下的法线方向。
然后,和10.2.2 节中的处理一样,我们使用该值和 _Distortion 属性以及 _RefractionTex_TexeISize 来对屏幕图像的采样坐标进行偏移,模拟折射效果。Distortion 值越大,偏移量越大,水面背后的物体看起来变形程度越大。在这里,我们选择使用切线空间下的法线方向来进行偏移,是因为该空间下的法线可以反映顶点局部空间下的法线方向。需要注意的是,在计算偏移后的屏幕坐标时,我们把偏移量和l屏幕坐标的z 分量 相乘,这是为了模拟深度越大、折射程度越大的效果。如果读者不希望产生这样的效果,可以直接把偏移值叠加到屏幕坐标上。随后,我们对scrPos 进行了透视除法, 再使用该坐标对抓取的屏幕图像 _RefractionTex 进行采样,得到模拟的折射颜色。
之后,我们把法线方向从切线空间变换到了世界空间下(使用变换矩阵的每一行,即TtoW0、TtoW1 和 TtoW2 ,分别和法线方向点乘,构成新的法线方向),并据此得到视角方向相对于法线方向的反射方向。随后,使用反射方向对Cubemap 进行采样,并把结果和主纹理颜色相乘后得到反射颜色。我们也对主纹理进行了纹理动画,以模拟水波的效果。
为了混合折射和反射颜色,我们随后计算了菲涅耳系数。我们使用之前的公式来计算菲涅耳系数,并据此来混合折射和反射颜色,作为最终的输出颜色。
在本例中,我们使用的噪声纹理(对应本书资源的Assets/Textures/Chapter15/Water_Noise.png) 如图15.5 左图所示。
图15.5 水波效果使用的噪声纹理。左图:噪声纹理的灰度图。右图:由左图生成的法线纹理由于在本例中,我们需要的是一张法线纹理,因此我们可以从该噪声纹理的灰度值中生成需要的法线信息,这是通过在它的纹理面板中把纹理类型设置为 Normal map , 并选中 Create from grayscale 来完成的。最后生成的法线纹理如图15.5 右图所示。我们把生成的法线纹理拖曳到材质的 _WaveMap 属性上, 再单击运行后,就可以看到水面波动的效果了。
三、再谈全局雾效
我们在13.3 节讲到了如何使用深度纹理来实现一种基于屏幕后处理的全局雾效。我们由深度纹理重建每个像素在世界空间下的位置,再使用一个基于高度的公式来计算雾效的混合系数,最后使用该系数来混合雾的颜色和原屏幕颜色。13.3 节的实现效果是一个基于高度的均匀雾效,即在同一个高度上, 雾的浓度是相同的,如图15.6 左图所示。然而, 一些时候我们希望可以模拟一种不均匀的雾效,同时让雾不断飘动,使雾看起来更加飘渺,如图15.6 右图所示。而这就可以通过使用一张噪声纹理来实现。
图15.6 左图:均匀雾效。右图:使用噪声纹理后的非均匀雾效
本节的实现非常简单,绝大多数代码和13.3节中的完全一样,我们只是添加了噪声相关的参数和属性,并在Shader 的片元着色器中对高度的计算添加了噪声的影响。为了完整性,我们会给出本节使用的脚本和Shader 的实现,但其中使用的原理不再赘述,读者可参见13.3 节。
四、扩展阅读
读者在阅读本章时,可能会有一个疑问:这些噪声纹理都是如何构建出来的?这些噪声纹理可以被认为是一种程序纹理(Procedure Texture),它们都是由计算机利用某些算法生成的。
Perlin 噪声(https://en.wikipedia.org/wiki/Perlin_noise)和Worley 噪声(https://en.wikipedia.org/wiki/Worley_noise)是两种最常使用的噪声类型,例如我们在15.3 节中使用的噪声纹理由Perlin 噪声生成而来。Perlin噪声可以用于生成更自然的噪声纹理,而Worley 噪声则通常用于模拟诸如石头、水、纸张等多孔噪声。
现代的图像编辑软件,如Photoshop 等,往往提供了类似的功能或插件,以帮助美术人员生成需要的噪声纹理,但如果读者想要更加自由地控制噪声纹理的生成,可能就需要了解它们的生成原理。
读者可以在这个博客(http://flafla2.github.io/2014/08/09/perlinnoise.html )中找到一篇关于理解Perlin 噪声的非常好的文章,在文章的最后,作者还给出了很多其他出色的参考链接。
关于Worley 噪声,读者可以在作者Worley1998 年发表的论文[1] 中找到它的算法和实现细节。在另一个非常好的博客(http://scrawkblog.com/category/procedural-noise/)中,博主给出了很多程序噪声在Unity 中的实现,并包含了实现源码。
网友评论