一、react-three/postprocessing--處理效果的庫(kù)

簡(jiǎn)而言之：包裝效果 該庫(kù)提供了一個(gè) EffectPass，可自動(dòng)組織和合并任何給定的效果組合。這最大限度地減少了渲染操作的數(shù)量，并且可以組合許多效果，而不會(huì)受到傳統(tǒng)傳遞鏈接的性能損失。此外，每個(gè)效果都可以選擇自己的混合功能。 后處理還支持開箱即用的 srgb 編碼，以及 WebGL2 MSAA（多樣本抗鋸齒），這是 react-postprocessing 的默認(rèn)設(shè)置，您可以獲得高性能的清晰結(jié)果，而不會(huì)出現(xiàn)鋸齒狀邊緣。

二、提供的組件

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

效果處理器，包裹添加的效果組件，比如光照效果Light 景深組件等等

參數(shù)：

<EffectComposer
  enabled?: boolean
  children: JSX.Element | JSX.Element[]
  depthBuffer?: boolean  /** 深度緩沖區(qū) 。深度緩沖區(qū)記錄著屏幕對(duì)應(yīng)的每個(gè)像素的深度值。
通過(guò)深度緩沖區(qū)，可以進(jìn)行深度測(cè)試，從而確定像素的遮擋關(guān)系，保證渲染正確。這是深度緩沖最主要的作用。*/
  disableNormalPass?: boolean  /**是否禁用NormalPass，NormalPass可以在已經(jīng)渲染出來(lái)的影像中中創(chuàng)建模擬反射環(huán)境光的效果 */
  stencilBuffer?: boolean //模板緩沖區(qū)
  autoClear?: boolean //自動(dòng)clear
  multisampling?: number
  frameBufferType?: TextureDataType
  /** For effects that support DepthDownsamplingPass */
  resolutionScale?: number //分辨率尺cun
  renderPriority?: number  //渲染優(yōu)先級(jí)
  camera?: THREE.Camera
  scene?: THREE.Scene
>

<DepthOfField />景深效果組件

作用："景深"是指當(dāng)焦距對(duì)準(zhǔn)某一點(diǎn)時(shí)，其前后都仍可清晰的范圍。拍照時(shí)景深越大，景深范圍內(nèi)所有畫面的輪廓依然清晰，從近到遠(yuǎn)全部清晰，相反景深值小了清晰的單位就小，前景背景是模糊的 貼兩個(gè)對(duì)比圖

參數(shù)

官網(wǎng)示例：<DepthOfField focusDistance={0} focalLength={0.02} bokehScale={2} height={480} />

• focusDistance:對(duì)焦距離
• focalLength: 焦距 ，關(guān)于對(duì)焦距離和焦距的區(qū)別看文末補(bǔ)充介紹就好
• bokehScale: 虛化比例
• height :高度
• width:寬度
• blur：number：模糊度
• depthTexture:{texture: Texture; packing: number;};：紋理

<Bloom /> 光暈效果組件

參數(shù)

官網(wǎng)示例 <Bloom luminanceThreshold={0} luminanceSmoothing={0.9} height={300} />

• luminanceThreshold： 亮度閾值 默認(rèn)0.9 在[0,1]之間取值
• luminanceSmoothing：亮度平滑 默認(rèn)00.025 在[0,1]之間取值
• height：高度
• width: 寬度
• intensity: 強(qiáng)度 默認(rèn)是 1
• kernelSize: 內(nèi)核大小 一般用不上
• opacity: 不透明度，指定了一個(gè)元素后面的背景的被覆蓋程度。

<Noise /> 噪點(diǎn)效果組件

官網(wǎng)示例 <Noise opacity={0.02} />

作用：類似于“顆粒”效果，俗話說(shuō)給一個(gè)圖片降噪，就是設(shè)置這個(gè)組件并添加參數(shù)值 參數(shù)

• premultiply：boolean 默認(rèn)false 噪點(diǎn)的預(yù)乘功能 噪聲是否應(yīng)與輸入顏色相乘。 比如有了亮度 設(shè)置它為true，圖片會(huì)更亮
• opacity: 不透明度，指定了一個(gè)元素后面的背景的被覆蓋程度。

<Vignette /> 暈影，虛化效果組件

官網(wǎng)示例

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

參數(shù)

• eskil Boolean 默認(rèn)false 如果offset值大于1，那么這里必須設(shè)置為true，不然圖片可能會(huì)有個(gè)黑洞
• blendFunction BlendFunction 默認(rèn)BlendFunction.NORMAL.
• offset Number 默認(rèn)0.5 偏移量
• darkness Number 默認(rèn)0.5 好比一個(gè)圖片，設(shè)置了虛化，這個(gè)值越大，圖片的四個(gè)角的黑色越大

<ToneMapping/> 一種色調(diào)映射效果組件

示例及參數(shù)：

<ToneMapping
    //blendFunction={BlendFunction.NORMAL} // blend mode
    adaptive={true} // 切換自適應(yīng)亮度圖用法 默認(rèn)為true
    resolution={256} // texture 亮度的分辨率。默認(rèn)256。
    middleGrey={0.6} // 中間灰色值 默認(rèn)0.6
    maxLuminance={16.0} // 最大亮度  默認(rèn)16
    averageLuminance={1.0} // 平均亮度 默認(rèn)1
    adaptationRate={1.0} // 亮度適應(yīng)率  默認(rèn)1
  />

<HueSaturation />色彩飽和度

示例：

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

參數(shù)

• hue：色調(diào)，色調(diào)偏移，弧度 默認(rèn)是0
• saturation： 飽和度數(shù) 飽和度值，單位為弧度，默認(rèn)是0

<Grid/>網(wǎng)格效果組件

示例及參數(shù)

<Grid
   // blendFunction={BlendFunction.OVERLAY} // blend mode
    scale={1.0} // 網(wǎng)格圖案比例 默認(rèn)1
    lineWidth={0.0} // 網(wǎng)格圖案的線寬 默認(rèn)0
    size={{ width, height }} // 覆蓋默認(rèn)的通道(pass)的寬度和高度 無(wú)默認(rèn)
  />

<GodRays>輻射線

示例及默認(rèn)參數(shù)及參數(shù)默認(rèn)值

 <GodRays
    sun={sunRef} //光源。必須不寫深度，并且必須被標(biāo)記為透明。
    blendFunction={BlendFunction.Screen} // 這種效果的混合功能。
    samples={60} // 每個(gè)像素的樣本數(shù)。
    density={0.96} //  光線的密度。
    decay={0.9} // 衰變 照明衰減系數(shù)
    weight={0.4} // 光線權(quán)重
    exposure={0.6} // 曝光  一個(gè)曝光系數(shù)。
    clampMax={1} // 整體效果的飽和度的上限。
    width={Resizer.AUTO_SIZE} // Render width.
    height={Resizer.AUTO_SIZE} // Render height.
    kernelSize={KernelSize.SMALL} // 模糊的內(nèi)核大小。如果模糊功能被禁用，則沒(méi)有影響。
    blur={true} // 霧化效果的光照是否應(yīng)該被模糊化以減少偽影。
  />

補(bǔ)充：下面介紹下對(duì)焦距離和焦距

對(duì)焦距離和焦距

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

到此這篇關(guān)于react-three/postprocessing庫(kù)的參數(shù)中文含義使用總結(jié)的文章就介紹到這了,更多相關(guān)react中文含義使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論