react-three/postprocessing庫的參數如何使用

這篇文章主要講解了“react-three/postprocessing庫的參數如何使用”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“react-three/postprocessing庫的參數如何使用”吧！

一、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-three/postprocessing庫的參數如何使用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！