ThreeJS 物理材质shader源码分析(像素着色器)
像素着色器(meshphysical_frag.glsl)
#define PHYSICAL
uniform vec3 diffuse; // 漫反射颜色
uniform vec3 emissive; // 自发光颜色
uniform float roughness; // 粗糙度
uniform float metalness; // 金属性
uniform float opacity; // 透明度
#ifndef STANDARD
uniform float clearCoat; //
uniform float clearCoatRoughness;
#endif
varying vec3 vViewPosition; // 摄像机空间的坐标
#ifndef FLAT_SHADED
varying vec3 vNormal; // 摄像机空间的法线
#endif
#include <common> // 包含着色器公共模块(包含常用的数学工具函数以及一些常量定义什么的)
#include <packing> // 数据编码解码功能函数
#include <dithering_pars_fragment> // 抖动处理的定义
#include <color_pars_fragment> // 颜色处理的定义
#include <uv_pars_fragment> // uv相关处理的定义
#include <uv2_pars_fragment> // uv2相关处理的定义
#include <map_pars_fragment> // map贴图相关处理的定义
#include <alphamap_pars_fragment> // alphamap贴图的处理定义
#include <aomap_pars_fragment> // aomap贴图的处理定义
#include <lightmap_pars_fragment> // lighmap贴图处理定义
#include <emissivemap_pars_fragment> // emissivemap贴图处理的定义
#include <envmap_pars_fragment> // envmap贴图处理的定义
#include <fog_pars_fragment> // 雾化需要的定义
#include <bsdfs> // brdf相关的功能函数
#include <cube_uv_reflection_fragment> // cubemap反射相关
#include <lights_pars_begin> // 灯光相关定义
#include <lights_pars_maps> // 灯光贴图相关
#include <lights_physical_pars_fragment> // 灯光相关物理运算
#include <shadowmap_pars_fragment> // shadowmap影子相关运算定义
#include <bumpmap_pars_fragment> // bumpmap相关运算的定义
#include <normalmap_pars_fragment> // normalmap相关运算的定义
#include <roughnessmap_pars_fragment> // roughnessmap相关运算的定义
#include <metalnessmap_pars_fragment> // metalnessmap相关运算的定义
#include <logdepthbuf_pars_fragment> // logdepth相关运算的定义
#include <clipping_planes_pars_fragment> // clipplane裁剪平面相关的定义
void main() {
#include <clipping_planes_fragment> // 裁剪平面裁剪
vec4 diffuseColor = vec4( diffuse, opacity );// 合成rgba四通道漫反射颜色
ReflectedLight reflectedLight = ReflectedLight( vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ) );
vec3 totalEmissiveRadiance = emissive;
#include <logdepthbuf_fragment> // logdepth运算
#include <map_fragment> // map通道颜色采样
#include <color_fragment> // color参与计算
#include <alphamap_fragment> // alphamap通道颜色采样
#include <alphatest_fragment> // alpha测试
#include <roughnessmap_fragment> // 粗糙贴图采样
#include <metalnessmap_fragment> // 金属性贴图采样
#include <normal_fragment_begin> // 法线贴图基本运算
#include <normal_fragment_maps> // 法线通过法线贴图运算
#include <emissivemap_fragment> // 自发光贴图采样
// accumulation
#include <lights_physical_fragment> // 物理光照基础运算
#include <lights_fragment_begin> // 计算各种灯光入射光和反射光信息
#include <lights_fragment_maps> // 从环境光和光照贴图获取辐射
#include <lights_fragment_end> // 根据辐射光取得反射信息
// modulation
#include <aomap_fragment> // 根据AO贴图调整反射光照强度
// 反射光直接漫反射+间接漫反射+直接高光+间接高光+自发光 = 输出光照颜色
vec3 outgoingLight = reflectedLight.directDiffuse + reflectedLight.indirectDiffuse + reflectedLight.directSpecular + reflectedLight.indirectSpecular + totalEmissiveRadiance;
gl_FragColor = vec4( outgoingLight, diffuseColor.a );
#include <tonemapping_fragment>// tonemap进行曝光
#include <encodings_fragment> // 颜色编码
#include <fog_fragment> // 雾化颜色运算
#include <premultiplied_alpha_fragment> // 颜色预乘alpha
#include <dithering_fragment> // 颜色随机抖动
}
我将这个fragmentshader提取了关于物理材质着色的核心算法方便理解代码如下:
核心算法只包含直接照明产生的漫反射颜色和高光颜色,直接照明只计算了点光源(没有计算距离衰减),去掉了各种贴图采样数据以最简化shader代码
// 由vertexshader传递过来的法线,位置,uv
varying vec3 vNormal;
varying vec3 vPosition;
varying vec2 vUv; // 材质参数
uniform vec3 diffuse; // 漫反射
uniform float metallic; // 金属性
uniform float roughness; // 粗糙度 #if NUM_POINT_LIGHTS > 0
// 点光源信息
struct PointLight {
vec3 position;
vec3 color;
float distance;
float decay;
};
uniform PointLight pointLights[ NUM_POINT_LIGHTS ];
#endif
#if NUM_DIR_LIGHTS > 0
struct DirectionalLight {
vec3 direction;
vec3 color;
};
uniform DirectionalLight directionalLights[ NUM_DIR_LIGHTS ];
#endif
float pow2( const in float x ) { return x*x; }
const float PI = 3.14159265359;
#define EPSILON 1e-6
#define MAXIMUM_SPECULAR_COEFFICIENT 0.16
#define DEFAULT_SPECULAR_COEFFICIENT 0.04
#define RECIPROCAL_PI 0.31830988618
// 光照反射信息(直接光的漫反射和高光色)
struct ReflectedLight {
vec3 directDiffuse;
vec3 directSpecular;
vec3 indirectDiffuse;
};
// 入射光照信息(颜色和方向)
struct IncidentLight {
vec3 color;
vec3 direction;
};
// 几何信息(位置,法线,视角方向)
struct GeometricContext {
vec3 position;
vec3 normal;
vec3 viewDir;
};
// 物理材质信息
struct PhysicalMaterial {
vec3 diffuseColor;
float specularRoughness;
vec3 specularColor;
}; vec3 F_Schlick( const in vec3 specularColor, const in float dotLH ) {
float fresnel = exp2( ( -5.55473 * dotLH - 6.98316 ) * dotLH );
return ( 1.0 - specularColor ) * fresnel + specularColor;
}
float G_GGX_SmithCorrelated( const in float alpha, const in float dotNL, const in float dotNV ) {
float a2 = pow2( alpha );
float gv = dotNL * sqrt( a2 + ( 1.0 - a2 ) * pow2( dotNV ) );
float gl = dotNV * sqrt( a2 + ( 1.0 - a2 ) * pow2( dotNL ) );
return 0.5 / max( gv + gl, EPSILON );
}
float D_GGX( const in float alpha, const in float dotNH ) {
float a2 = pow2( alpha );
float denom = pow2( dotNH ) * ( a2 - 1.0 ) + 1.0;
return RECIPROCAL_PI * a2 / pow2( denom );
}
vec3 BRDF_Specular_GGX_Environment( const in GeometricContext geometry, const in vec3 specularColor, const in float roughness ) {
float dotNV = saturate( dot( geometry.normal, geometry.viewDir ) );
const vec4 c0 = vec4( - , - 0.0275, - 0.572, 0.022 );
const vec4 c1 = vec4( , 0.0425, 1.04, - 0.04 );
vec4 r = roughness * c0 + c1;
float a004 = min( r.x * r.x, exp2( - 9.28 * dotNV ) ) * r.x + r.y;
vec2 AB = vec2( -1.04, 1.04 ) * a004 + r.zw;
return specularColor * AB.x + AB.y;
}
vec3 BRDF_Specular_GGX( in GeometricContext geometry, in IncidentLight directLight,const in vec3 specularColor, const in float roughness) {
float alpha = pow2( roughness );
vec3 halfDir = normalize( directLight.direction + geometry.viewDir );
float dotNL = saturate( dot( geometry.normal, directLight.direction ) );
float dotNV = saturate( dot( geometry.normal, geometry.viewDir ) );
float dotNH = saturate( dot( geometry.normal, halfDir ) );
float dotLH = saturate( dot( directLight.direction, halfDir ) );
vec3 F = F_Schlick( specularColor, dotLH );
float G = G_GGX_SmithCorrelated( alpha, dotNL, dotNV );
float D = D_GGX( alpha, dotNH );
return F * ( G * D );
}
vec3 BRDF_Diffuse_Lambert( const in vec3 diffuseColor ) {
return RECIPROCAL_PI * diffuseColor;
}
float clearCoatDHRApprox( const in float roughness, const in float dotNL ) {
return DEFAULT_SPECULAR_COEFFICIENT + ( 1.0 - DEFAULT_SPECULAR_COEFFICIENT ) * ( pow( 1.0 - dotNL, 5.0 ) * pow( 1.0 - roughness, 2.0 ) );
}
void RE_Direct_Physical(in GeometricContext geometry,in PhysicalMaterial material, in IncidentLight directLight,inout ReflectedLight reflectedLight ) { float dotNL = saturate( dot( geometry.normal,directLight.direction ) );// lambert漫反射因子
vec3 irradiance = dotNL * directLight.color; // 辐射
irradiance *= PI; // * PI reflectedLight.directDiffuse += irradiance * BRDF_Diffuse_Lambert( material.diffuseColor );
// 重点就是这里了,高光算法和blinn-phong差距巨大
reflectedLight.directSpecular += irradiance * BRDF_Specular_GGX( geometry,directLight,material.specularColor,material.specularRoughness); }
void RE_IndirectDiffuse_Physical( const in vec3 irradiance, const in GeometricContext geometry, const in PhysicalMaterial material, inout ReflectedLight reflectedLight ) {
reflectedLight.indirectDiffuse += irradiance * BRDF_Diffuse_Lambert( material.diffuseColor );
}
vec3 getAmbientLightIrradiance( const in vec3 ambientLightColor ) {
vec3 irradiance = ambientLightColor;
irradiance *= PI;
return irradiance;
}
#define RE_IndirectDiffuse RE_IndirectDiffuse_Physical
void main() {
// 存放几何数据
GeometricContext geometry;
geometry.position = vPosition;
geometry.normal = normalize(vNormal);
geometry.viewDir = normalize(-vPosition); // 因为是相机空间只需要对位置坐标取反0-vPosition
// 存放物理材质信息
PhysicalMaterial material;
material.diffuseColor = diffuse * ( 1.0 - metallic ); // 金属性越强漫反射颜色越小
material.specularRoughness = clamp( roughness, 0.04, 1.0 ); // 粗燥度
material.specularColor = mix( vec3( DEFAULT_SPECULAR_COEFFICIENT ), diffuse.rgb, metallic ); // 这里做了个mix 金属性为0高光颜色也不至于是黑色 // 初始化光照反射
ReflectedLight reflectedLight = ReflectedLight( vec3( 0.0 ), vec3( 0.0 ),vec3(0.0) ); IncidentLight directLight;// 直接入射光照
#if NUM_POINT_LIGHTS > 0
for(int i = ; i < NUM_POINT_LIGHTS; ++i)
{
directLight.color = pointLights[i].color; // 入射光颜色
directLight.direction = normalize(pointLights[i].position - vPosition); // 入射光的方向
RE_Direct_Physical(geometry,material,directLight,reflectedLight); // 计算直接光产生的反射光信息
}
#endif
#if NUM_DIR_LIGHTS > 0
for(int i = ; i < NUM_DIR_LIGHTS; ++i)
{
directLight.color = directionalLights[i].color; // 入射光颜色
directLight.direction = directionalLights[i].direction;
RE_Direct_Physical(geometry,material,directLight,reflectedLight); // 计算直接光产生的反射光信息
}
#endif vec3 irradiance = getAmbientLightIrradiance( vec3(0.13) );
RE_IndirectDiffuse( irradiance, geometry, material, reflectedLight );
// 反射光信息加合为最后颜色
vec3 color = reflectedLight.directDiffuse + reflectedLight.directSpecular+reflectedLight.indirectDiffuse; // HDR tonemapping
color = saturate(color/(color+vec3(1.0)));
// gamma correct
color = pow(color, vec3(1.0/2.0)); gl_FragColor = vec4(color, 1.0);
}
下面是一个点光源和一个方向光的效果(从左到右粗糙度加强,从下到上金属性加强):
ThreeJS 物理材质shader源码分析(像素着色器)的更多相关文章
- ThreeJS 物理材质shader源码分析(顶点着色器)
再此之前推荐一款GLTF物理材质在线编辑器https://tinygltf.xyz/ ThreeJS 物理材质shader源码分析(顶点着色器) Threejs将shader代码分为ShaderLib ...
- springMVC源码分析--HandlerInterceptor拦截器调用过程(二)
在上一篇博客springMVC源码分析--HandlerInterceptor拦截器(一)中我们介绍了HandlerInterceptor拦截器相关的内容,了解到了HandlerInterceptor ...
- WPF 像素着色器入门:使用 Shazzam Shader Editor 编写 HLSL 像素着色器代码
原文:WPF 像素着色器入门:使用 Shazzam Shader Editor 编写 HLSL 像素着色器代码 HLSL,High Level Shader Language,高级着色器语言,是 Di ...
- springMVC源码分析之拦截器
一个东西用久了,自然就会从仅使用的层面上升到探究其原理的层面,在javaweb中springmvc更是如此,越是优秀的框架,其底层实现代码更是复杂,而在我看来,一个优秀程序猿就相当于一名武林高手,不断 ...
- springMVC源码分析--HandlerInterceptor拦截器(一)
对SpringMVC有所了解的人肯定接触过HandlerInterceptor拦截器,HandlerInterceptor接口给我们提供了3个方法: (1)preHandle: 在执行controll ...
- JVM源码分析--ClassLoader类加载器
本人原创,转载请注明出处:https://www.cnblogs.com/javallh/p/10224187.html 1.JDK已有类加载器: BootStrap ClassLoader (启动类 ...
- AirTest源码分析之运行器
from: https://blog.csdn.net/u012897401/article/details/82900562 使用:根据airtest文档说明,可以通过命令行来启动air脚本,需要传 ...
- java8学习之Collector源码分析与收集器核心
之前已经对流在使用上已经进行了大量应用了,也就是说对于它的应用是比较熟悉了,但是比较欠缺的是对于它底层的实现还不太了解,所以接下来准备大量通过阅读官方的javadoc反过来加深对咱们已经掌握这些知识更 ...
- Spark源码分析之分区器的作用
最近因为手抖,在Spark中给自己挖了一个数据倾斜的坑.为了解决这个问题,顺便研究了下Spark分区器的原理,趁着周末加班总结一下~ 先说说数据倾斜 数据倾斜是指Spark中的RDD在计算的时候,每个 ...
随机推荐
- CP策略含有中文字符提交失败故障解决
硬件平台:CP5600 系统版本:R80.10 补丁版本:TAKE103 故障现象:提交新增策略失败,日志显示 if the problem persists contact Checkpoint S ...
- boostrap-非常好用但是容易让人忽略的地方【3】:clearfix
代码 显示结果 代码 结果
- 苹果笔记本修改pycharm for mac 修改字体大小
实在是隐藏的太深了,无语
- github 项目搜索技巧-让你更高效精准地搜索项目
目录 github 搜索技巧 案例 普通搜 搭配技巧搜 限定词 查找某个用户或组织的项目 辅助限定词 还没搞懂的(关于 forks.mirror.issues) 排序(放的是官网的链接) 使用指南 练 ...
- 最近邻分类器,K近邻分类器,线性分类器
转自:https://blog.csdn.net/oldmao_2001/article/details/90665515 最近邻分类器: 通俗来讲,计算测试样本与所有样本的距离,将测试样本归为距离最 ...
- Curator实现zookeeper分布式锁的基本原理
一.写在前面 之前写过一篇文章(<拜托,面试请不要再问我Redis分布式锁的实现原理>),给大家说了一下Redisson这个开源框架是如何实现Redis分布式锁原理的,这篇文章再给大家聊一 ...
- 嗨,让我带你逐行剖析Vue.js源码
本项目受到了阮一峰老师的肯定,已刊登在阮一峰老师微信公众号的科技爱好者周刊第87期,同时也被多个微博大V转发,短短一个月时间内在github上star数量就已经突破2k! Hello,大家好,我最近在 ...
- 看完知乎上500条答案,我为大家整理了这21个B站学习类UP主
原文之前发在我的知乎,转载请注明出处. 虽然,今天算法文章还没更新┏(゜ロ゜;)┛,但还是溜过来跑个题~ 之前看到了博客上有小伙伴在分享自己的B站资源,才突然意识到自己其实也积攒了很多优秀UP的资 ...
- 从零开始のcocos2dx生活(八)ParticleSystemQuad
https://learnopengl-cn.github.io/01%20Getting%20started/04%20Hello%20Triangle/#_1 写的真的非常好-最近没时间拜读,只看 ...
- Spring命令行参数
一般我们通过java -jar xxx.jar的方式启动应用,其实除了启动应用我们还能在命令中指定应用的参数,比如java -jar xxx.jar --server.port=1234,直接以命令行 ...