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} // 霧化效果的光照是否應該被模糊化以減少偽影。
  />

補充：下面介紹下對焦距離和焦距

對焦距離和焦距

對焦距離：是指鏡頭最前端鏡片與拍攝物體的距離。
對焦距離：就是您的相機在拍攝物體的時候需要離被攝物體一定距離這樣相機才可以拍攝清楚，否則相機無法對焦。對焦距離近的話適合拍攝小物件，這就是為什麼有的鏡頭叫微距鏡頭，說的就是可以離被攝物體近，這樣拍攝的就會更清楚，最簡單容易理解就這樣解釋了。在選擇數碼相機的時候尤其是家用DC的時候會經常有寫微距拍攝距離，有的相機可以達到1cm 還有更厲害的相機可以達到0cm 也就是說可以貼在物體上拍攝了，當然是否有這個必要，就看在拍攝的時候你自己的興趣愛好了。
焦距：一般在相機的鏡頭上會有寫 XXmm或者 XX-XXXmm類似 變焦18-55mm ，28-200mm 還有就是定焦 50mm 焦距簡單的可以理解為拍攝畫面的遠近和角度範圍大小。人的眼睛視野範圍如果用鏡頭焦距來作為參考就是50mm的 所以為什麼管50mm的鏡頭稱為檔頭，就是符合人的眼睛視角範圍。這個數值越大說明可以拍的越遠，數值越小可以拍的越廣，所以小於或者等於28mm的一般都稱為廣角鏡頭 大於70mm以上的例如200mm都稱為長焦鏡頭，如果數值特小的一般都稱為魚眼鏡頭，魚眼鏡頭拍的更廣，所以在選擇鏡頭的時候經常會看到廠家一個引數鏡頭變焦範圍 28－105mm 就是說這個鏡頭廣角端可以到28mm的 長焦端可以到105mm 這個對於選擇相機是一個很重要的引數。數值變化越大說明拍攝範圍就越廣泛了。
焦距：相機的鏡頭是一組透鏡，當平行光線穿過透鏡時，會會聚到一點上，這個點叫做焦點，焦點到透鏡中心的距離，就稱為焦距。焦距固定的鏡頭，即定焦鏡頭；焦距可以調節變化的鏡頭，就是變焦鏡頭。

到此這篇關於react-three/postprocessing庫的引數中文含義使用總結的文章就介紹到這了,更多相關react中文含義使用內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！