react-three/postprocessing库的参数中文含义使用解析

目录
  • 一、react-three/postprocessing--处理效果的库
  • 二、提供的组件
    • <DepthOfField />景深效果组件
      • 参数
    • <Bloom /> 光晕效果组件
      • 参数
    • <Noise /> 噪点效果组件
    • <Vignette /> 晕影,虚化效果组件
      • 参数
    • <ToneMapping/> 一种色调映射效果组件
      • 示例及参数:
    • <HueSaturation />色彩饱和度
      • 参数
    • <Grid/>网格效果组件
      • 示例及参数
    • <GodRays>辐射线
      • 示例及默认参数及参数默认值

一、react-three/postprocessing--处理效果的库

简而言之:包装效果 该库提供了一个 EffectPass,可自动组织和合并任何给定的效果组合。这最大限度地减少了渲染操作的数量,并且可以组合许多效果,而不会受到传统传递链接的性能损失。此外,每个效果都可以选择自己的混合功能。 后处理还支持开箱即用的 srgb 编码,以及 WebGL2 MSAA(多样本抗锯齿),这是 react-postprocessing 的默认设置,您可以获得高性能的清晰结果,而不会出现锯齿状边缘。

二、提供的组件

<EffectComposer>//...//</EffectComposer>

效果处理器,包裹添加的效果组件,比如光照效果Light 景深组件等等

参数:

<EffectComposer
  enabled?: boolean
  children: JSX.Element | JSX.Element[]
  depthBuffer?: boolean  /** 深度缓冲区 。深度缓冲区记录着屏幕对应的每个像素的深度值。
通过深度缓冲区,可以进行深度测试,从而确定像素的遮挡关系,保证渲染正确。这是深度缓冲最主要的作用。*/
  disableNormalPass?: boolean  /**是否禁用NormalPass,NormalPass可以在已经渲染出来的影像中中创建模拟反射环境光的效果 */
  stencilBuffer?: boolean //模板缓冲区
  autoClear?: boolean //自动clear
  multisampling?: number
  frameBufferType?: TextureDataType
  /** For effects that support DepthDownsamplingPass */
  resolutionScale?: number //分辨率尺cun
  renderPriority?: number  //渲染优先级
  camera?: THREE.Camera
  scene?: THREE.Scene
>

<DepthOfField />景深效果组件

作用:"景深"是指当焦距对准某一点时,其前后都仍可清晰的范围。拍照时景深越大,景深范围内所有画面的轮廓依然清晰,从近到远全部清晰,相反景深值小了清晰的单位就小,前景背景是模糊的 贴两个对比图

参数

官网示例:<DepthOfField focusDistance={0} focalLength={0.02} bokehScale={2} height={480} />

  • focusDistance:对焦距离
  • focalLength: 焦距 ,关于对焦距离和焦距的区别看这篇文章就好
  • bokehScale: 虚化比例
  • height :高度
  • width:宽度
  • blur:number:模糊度
  • depthTexture:{texture: Texture; packing: number;};:纹理

<Bloom /> 光晕效果组件

参数

官网示例 <Bloom luminanceThreshold={0} luminanceSmoothing={0.9} height={300} />

  • luminanceThreshold: 亮度阈值 默认0.9 在[0,1]之间取值
  • luminanceSmoothing:亮度平滑 默认00.025 在[0,1]之间取值
  • height:高度
  • width: 宽度
  • intensity: 强度 默认是 1
  • kernelSize: 内核大小 一般用不上
  • opacity: 不透明度,指定了一个元素后面的背景的被覆盖程度。

<Noise /> 噪点效果组件

官网示例 <Noise opacity={0.02} />

作用:类似于“颗粒”效果,俗话说给一个图片降噪,就是设置这个组件并添加参数值 参数

  • premultiply:boolean 默认false 噪点的预乘功能 噪声是否应与输入颜色相乘。 比如有了亮度 设置它为true,图片会更亮
  • opacity: 不透明度,指定了一个元素后面的背景的被覆盖程度。

<Vignette /> 晕影,虚化效果组件

官网示例

Vignette eskil={false} offset={0.1} darkness={1.1} />

参数

  • eskil Boolean 默认false 如果offset值大于1,那么这里必须设置为true,不然图片可能会有个黑洞
  • blendFunction BlendFunction 默认BlendFunction.NORMAL.
  • offset Number 默认0.5 偏移量
  • darkness Number 默认0.5 好比一个图片,设置了虚化,这个值越大,图片的四个角的黑色越大

<ToneMapping/> 一种色调映射效果组件

示例及参数:

<ToneMapping
    //blendFunction={BlendFunction.NORMAL} // blend mode
    adaptive={true} // 切换自适应亮度图用法 默认为true
    resolution={256} // texture 亮度的分辨率。默认256。
    middleGrey={0.6} // 中间灰色值 默认0.6
    maxLuminance={16.0} // 最大亮度  默认16
    averageLuminance={1.0} // 平均亮度 默认1
    adaptationRate={1.0} // 亮度适应率  默认1
  />

<HueSaturation />色彩饱和度

示例:

<HueSaturation hue={0} saturation={0}
  />

参数

  • hue:色调,色调偏移,弧度 默认是0
  • saturation: 饱和度数 饱和度值,单位为弧度,默认是0

<Grid/>网格效果组件

示例及参数

<Grid
   // blendFunction={BlendFunction.OVERLAY} // blend mode
    scale={1.0} // 网格图案比例 默认1
    lineWidth={0.0} // 网格图案的线宽 默认0
    size={{ width, height }} // 覆盖默认的通道(pass)的宽度和高度 无默认
  />

<GodRays>辐射线

示例及默认参数及参数默认值

 <GodRays
    sun={sunRef} //光源。必须不写深度,并且必须被标记为透明。
    blendFunction={BlendFunction.Screen} // 这种效果的混合功能。
    samples={60} // 每个像素的样本数。
    density={0.96} //  光线的密度。
    decay={0.9} // 衰变 照明衰减系数
    weight={0.4} // 光线权重
    exposure={0.6} // 曝光  一个曝光系数。
    clampMax={1} // 整体效果的饱和度的上限。
    width={Resizer.AUTO_SIZE} // Render width.
    height={Resizer.AUTO_SIZE} // Render height.
    kernelSize={KernelSize.SMALL} // 模糊的内核大小。如果模糊功能被禁用,则没有影响。
    blur={true} // 雾化效果的光照是否应该被模糊化以减少伪影。
  />

到此这篇关于react-three/postprocessing库的参数中文含义使用总结的文章就介绍到这了,更多相关react中文含义使用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Three.js+React实现3D开放世界小游戏

    目录 背景 效果 设计 实现 加载资源 页面结构 数据初始化 场景初始化 创建世界 创建星空 创建地形 加载进度管理 创建基地模型 创建阿狸模型 控制阿狸运动 动画更新 页面缩放适配 添加游戏逻辑 毛玻璃效果 总结 背景 2545光年之外的开普勒1028星系,有一颗色彩斑斓的宜居星球 ,星际移民必须穿戴基地发放的防辐射服才能生存.阿狸驾驶星际飞行器降临此地,快帮它在限定时间内使用轮盘移动找到基地获取防辐射服吧! 本文使用 Three.js + React + CANNON 技术栈,实现通过滑动屏

  • 使用 React 和 Threejs 创建一个VR全景项目的过程详解

    最近我在学习使用 React 配合 Three.js 来搭建一个可以浏览720全景图片的项目 实现的是加载一张 2:1 的720全景 分享一下我的创建过程 一.搭建框架并安装需要的插件 npx create-react-app parano // 创建一个 React 项目 npm install -S typescript // 安装 typescript,这个是类型辅助插件,与全景项目关系不大 npm install -S @types/three // 安装 typescript 支持的

  • react-three/postprocessing库的参数中文含义使用解析

    目录 一.react-three/postprocessing--处理效果的库 二.提供的组件 <DepthOfField />景深效果组件 参数 <Bloom /> 光晕效果组件 参数 <Noise /> 噪点效果组件 <Vignette /> 晕影,虚化效果组件 参数 <ToneMapping/> 一种色调映射效果组件 示例及参数: <HueSaturation />色彩饱和度 参数 <Grid/>网格效果组件 示例及

  • 从零搭建react+ts组件库(封装antd)的详细过程

    目录 整体需求 开发与打包工具选型 使用webpack作为打包工具 使用babel来处理typescript代码 使用less-loader.css-loader等处理样式代码 项目搭建思路 整体结构 方案思路 项目搭建实施 初始化 Babel引入 了解Babel webpack的基于babel-loader的处理流程 引入React相关库(externals方式) 编写组件代码 编译打包组件库 效果演示 处理样式(less编译与css导出) 依赖引入 配置webpack 编写样式代码 编译组件

  • 详解使用React进行组件库开发

    最近针对日常业务需求使用react封装了一套[组件库], 大概记录下整个开发过程中的心得.由于篇幅原因,在这里只对开发过程中比较纠结的选型和打包等进行讨论,后续再对具体组件的封装进行讨论. 概述 我们都知道,组件化的开发模式对于我们的开发效率有着极大的提升,针对我们日常使用的基本组件进行封装,可以大量的简化我们对于基本UI的关注度,让我们的工作聚焦在业务逻辑上,很好的分离业务与基础UI的代码,使得整个项目更有调理,这也是我们要进行本组件库开发的原因. 然而现有React开源组件有很多,像ant-

  • React通过classnames库添加类的方法

    React添加Class的方式 在vue中添加class是一件非常简单的事情: 你可以通过传入一个对象, 通过布尔值决定是否添加类: <button :class="{ active: isFlag, aaa: true}">按钮</button> 你也可以传入一个数组: <!-- 1.基本使用 --> <h2 :class="['aaa', 'bbb']">Hello Vue</h2> <!-- 2

  • React中classnames库使用示例

    目录 classnames的引入 引入 使用 Node.js, Browserify, or webpack: classnames函数的使用 数组的形式 ES6中使用动态类名 结合React一起使用 总结: classnames的引入 从名字上可以看出,这个库是和类名有关的.官方的介绍就是一个简单的支持动态多类名的工具库. 支持使用 npm, Bower, or Yarn 使用 npm安装 npm install classnames 使用 Bower安装 bower install clas

  • 浅谈安装ORACLE时在Linux上设置内核参数的含义

    前两天看到一篇Redhat官方的Oracle安装文档,对于Linux内核参数的修改描述的非常清晰. 安装Oracle之前,除了检查操作系统的硬件和软件是否满足安装需要之外,一个重点就是修改内核参数,其中最主要的是和内存相关的参数设置. SHMMAX参数:Linux进程可以分配的单独共享内存段的最大值.一般设置为内存总大小的一半.这个值的设置应该大于SGA_MAX_TARGET或MEMORY_MAX_TARGET的值,因此对于安装Oracle数据库的系统,shmmax的值应该比内存的二分之一大一些

  • 对django2.0 关联表的必填on_delete参数的含义解析

    一对多(ForeignKey) class ForeignKey(ForeignObject): def __init__(self, to, on_delete, related_name=None, related_query_name=None, limit_choices_to=None, parent_link=False, to_field=None, db_constraint=True, **kwargs): super().__init__(to, on_delete, fro

  • 浅谈Pytorch中的自动求导函数backward()所需参数的含义

    正常来说backward( )函数是要传入参数的,一直没弄明白backward需要传入的参数具体含义,但是没关系,生命在与折腾,咱们来折腾一下,嘿嘿. 对标量自动求导 首先,如果out.backward()中的out是一个标量的话(相当于一个神经网络有一个样本,这个样本有两个属性,神经网络有一个输出)那么此时我的backward函数是不需要输入任何参数的. import torch from torch.autograd import Variable a = Variable(torch.Te

  • Nginx配置参数中文说明详解(负载均衡与反向代理)

    PS:最近在看<<高性能Linux服务器构建实战>>的Nginx章节,对其nginx介绍的非常详细,现把经常用到的Nginx配置参数中文说明摘录和nginx做负载均衡的本人真实演示实例抄录下来以便以后查看! Nginx配置参数中文详细说明 #定义Nginx运行的用户和用户组 user www www; # #nginx进程数,建议设置为等于CPU总核心数. worker_processes 8; # #全局错误日志定义类型,[ debug | info | notice | war

  • Java线程池7个参数的含义

    目录 参数1:corePoolSize 参数2:maximumPoolSize 参数3:keepAliveTime 参数4:TimeUnit 参数5:BlockingQueue 参数6:ThreadFactory 参数7:RejectedExecutionHandler 总结 所谓的线程池的 7 大参数是指,在使用 ThreadPoolExecutor 创建线程池时所设置的 7 个参数, 如以下源码所示: public ThreadPoolExecutor(int corePoolSize, i

随机推荐