three.js 中 meshbasic.glsl 文件中的片源着色器的主函数解析

2024-05-06 06:36

本文主要是介绍three.js 中 meshbasic.glsl 文件中的片源着色器的主函数解析,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1. three.js 中 meshbasic.glsl 文件中的片源着色器的主函数解析

他的具体代码如下

void main() {#include <uv_vertex>#include <color_vertex>#include <morphcolor_vertex>#if defined ( USE_ENVMAP ) || defined ( USE_SKINNING )#include <beginnormal_vertex>#include <morphnormal_vertex>#include <skinbase_vertex>#include <skinnormal_vertex>#include <defaultnormal_vertex>#endif#include <begin_vertex>  // 对顶点数据进行处理,将 position 值,赋值给 vPosition 这个变量#include <morphtarget_vertex> // 对顶点数据进行变形的处理#include <skinning_vertex> // 对骨骼数据进行处理。#include <project_vertex> // 顶点数据进行,投影转换,在这里,物体的位置就已经定下来了,下面的都是,对顶点数据处理,给片源着色器来使用#include <logdepthbuf_vertex> // 对数深度缓冲区,来解决两个面,很近的时候,分不清那个是前面,那个是后面#include <clipping_planes_vertex> // 裁剪平面#include <worldpos_vertex>#include <envmap_vertex> // 环境纹理,顶点#include <fog_vertex>}
`;export const fragment = /* glsl */`
void main() {#include <clipping_planes_fragment> // 裁剪空间vec4 diffuseColor = vec4( diffuse, opacity ); // 漫反射#include <logdepthbuf_fragment> // 对数缓冲区的计算,片源着色器的#include <map_fragment>#include <color_fragment>#include <alphamap_fragment>#include <alphatest_fragment>#include <alphahash_fragment>#include <specularmap_fragment>ReflectedLight reflectedLight = ReflectedLight( vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ) );// accumulation (baked indirect lighting only)#ifdef USE_LIGHTMAPvec4 lightMapTexel = texture2D( lightMap, vLightMapUv );reflectedLight.indirectDiffuse += lightMapTexel.rgb * lightMapIntensity * RECIPROCAL_PI;#elsereflectedLight.indirectDiffuse += vec3( 1.0 );#endif// modulation#include <aomap_fragment>reflectedLight.indirectDiffuse *= diffuseColor.rgb;vec3 outgoingLight = reflectedLight.indirectDiffuse;#include <envmap_fragment>#include <opaque_fragment>#include <tonemapping_fragment>#include <colorspace_fragment>#include <fog_fragment>#include <premultiplied_alpha_fragment>#include <dithering_fragment>}
`;

裁剪空间, 就是将不要的空间外的片源删除掉

#include <clipping_planes_fragment> // 裁剪空间

漫反射颜色

vec4 diffuseColor = vec4( diffuse, opacity ); // 漫反射

对片源进行对数缓冲区计算

#include <logdepthbuf_fragment> // 对数缓冲区的计算,片源着色器的
#if defined( USE_LOGDEPTHBUF ) && defined( USE_LOGDEPTHBUF_EXT )gl_FragDepthEXT = vIsPerspective == 0.0 ? gl_FragCoord.z : log2( vFragDepth ) * logDepthBufFC * 0.5;// vIsPerspective 表示当前相机是不是透视投影相机// 如果是就返回 log2( vFragDepth ) * logDepthBufFC * 0.5// 如果不是 gl_FragCoord.z#endif

纹理采样

#include <map_fragment>
#ifdef USE_MAPvec4 sampledDiffuseColor = texture2D( map, vMapUv );// 进行纹理采样, sampledDiffuseColor就是等到的结果#ifdef DECODE_VIDEO_TEXTURE// 如果使用的是视频纹理就,进行这样的操作// use inline sRGB decode until browsers properly support SRGB8_APLHA8 with video texturessampledDiffuseColor = vec4( mix( pow( sampledDiffuseColor.rgb * 0.9478672986 + vec3( 0.0521327014 ), vec3( 2.4 ) ), sampledDiffuseColor.rgb * 0.0773993808, vec3( lessThanEqual( sampledDiffuseColor.rgb, vec3( 0.04045 ) ) ) ), sampledDiffuseColor.w );#endif// 将得到的纹理颜色,跟漫反射的颜色,进行混合。diffuseColor *= sampledDiffuseColor;#endif
`;

片源顶点颜色处理

#include <color_fragment>
export default /* glsl */`
#if defined( USE_COLOR_ALPHA )// 如果使用是顶点颜色,有透明度的diffuseColor *= vColor;#elif defined( USE_COLOR )// 如果使用是顶点颜色,没有透明度的diffuseColor.rgb *= vColor;#endif
`;

透明纹理贴图

#include <alphamap_fragment>
export default /* glsl */`
#ifdef USE_ALPHAMAPdiffuseColor.a *= texture2D( alphaMap, vAlphaMapUv ).g;#endif
`;

他会对alphaMap 纹理进行,采样然后获取他的一个 g 值,来表示一个 强度;
在 alphatest 纹理进行处理

export default /* glsl */`
#ifdef USE_ALPHATESTif ( diffuseColor.a < alphaTest ) discard;#endif
`;

如果这个强度值,小于 alphaTest,那么这个就会把删除掉

高光纹理贴图

export default /* glsl */`
float specularStrength;#ifdef USE_SPECULARMAPvec4 texelSpecular = texture2D( specularMap, vSpecularMapUv );specularStrength = texelSpecular.r;#elsespecularStrength = 1.0;#endif
`;

也是对高光纹理贴图进行采样,然后再获取一个值,作为高光的强度,没有使用的话,默认就是 1的强度

这篇关于three.js 中 meshbasic.glsl 文件中的片源着色器的主函数解析的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/963652

相关文章

网页解析 lxml 库--实战

lxml库使用流程 lxml 是 Python 的第三方解析库,完全使用 Python 语言编写,它对 XPath表达式提供了良好的支 持,因此能够了高效地解析 HTML/XML 文档。本节讲解如何通过 lxml 库解析 HTML 文档。 pip install lxml lxm| 库提供了一个 etree 模块,该模块专门用来解析 HTML/XML 文档,下面来介绍一下 lxml 库

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

hdu1171(母函数或多重背包)

题意:把物品分成两份,使得价值最接近 可以用背包,或者是母函数来解,母函数(1 + x^v+x^2v+.....+x^num*v)(1 + x^v+x^2v+.....+x^num*v)(1 + x^v+x^2v+.....+x^num*v) 其中指数为价值,每一项的数目为(该物品数+1)个 代码如下: #include<iostream>#include<algorithm>

【C++】_list常用方法解析及模拟实现

相信自己的力量,只要对自己始终保持信心,尽自己最大努力去完成任何事,就算事情最终结果是失败了,努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一:什么是list? •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二:list常用接口 •🌰1.默认成员函数 🔥构造函数(⭐) 🔥析构函数 •🌰2.list对象

在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

1. 单例模式(Singleton Pattern) 确保一个类只有一个实例,并提供一个全局访问点。 示例代码: class Singleton {constructor() {if (Singleton.instance) {return Singleton.instance;}Singleton.instance = this;this.data = [];}addData(value)

Node.js学习记录(二)

目录 一、express 1、初识express 2、安装express 3、创建并启动web服务器 4、监听 GET&POST 请求、响应内容给客户端 5、获取URL中携带的查询参数 6、获取URL中动态参数 7、静态资源托管 二、工具nodemon 三、express路由 1、express中路由 2、路由的匹配 3、路由模块化 4、路由模块添加前缀 四、中间件

C++操作符重载实例(独立函数)

C++操作符重载实例,我们把坐标值CVector的加法进行重载,计算c3=c1+c2时,也就是计算x3=x1+x2,y3=y1+y2,今天我们以独立函数的方式重载操作符+(加号),以下是C++代码: c1802.cpp源代码: D:\YcjWork\CppTour>vim c1802.cpp #include <iostream>using namespace std;/*** 以独立函数

OWASP十大安全漏洞解析

OWASP(开放式Web应用程序安全项目)发布的“十大安全漏洞”列表是Web应用程序安全领域的权威指南,它总结了Web应用程序中最常见、最危险的安全隐患。以下是对OWASP十大安全漏洞的详细解析: 1. 注入漏洞(Injection) 描述:攻击者通过在应用程序的输入数据中插入恶意代码,从而控制应用程序的行为。常见的注入类型包括SQL注入、OS命令注入、LDAP注入等。 影响:可能导致数据泄

EasyPlayer.js网页H5 Web js播放器能力合集

最近遇到一个需求,要求做一款播放器,发现能力上跟EasyPlayer.js基本一致,满足要求: 需求 功性能 分类 需求描述 功能 预览 分屏模式 单分屏(单屏/全屏) 多分屏(2*2) 多分屏(3*3) 多分屏(4*4) 播放控制 播放(单个或全部) 暂停(暂停时展示最后一帧画面) 停止(单个或全部) 声音控制(开关/音量调节) 主辅码流切换 辅助功能 屏

从状态管理到性能优化:全面解析 Android Compose

文章目录 引言一、Android Compose基本概念1.1 什么是Android Compose?1.2 Compose的优势1.3 如何在项目中使用Compose 二、Compose中的状态管理2.1 状态管理的重要性2.2 Compose中的状态和数据流2.3 使用State和MutableState处理状态2.4 通过ViewModel进行状态管理 三、Compose中的列表和滚动