threejs後期處理的基本使用方法之加特效
前言
後期處理:簡單的說就是先渲染一張圖存起來,在這張圖上面"添油加醋",處理完後再渲染到屏幕上。這一過程three進行瞭封裝,使用現成的可以更快實現需求
基本代碼
// 引入後期處理基本的對象 import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js' import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js' ... // 因為是介紹後期渲染,省略場景初始化等代碼 // 初始化效果組合器 this.EffectComposer = new EffectComposer(this.renderer) // 添加基本的渲染通道 this.RenderPass = new RenderPass(this.scene, this.camera) // 把通道加入到組合器 this.EffectComposer.addPass(this.RenderPass) // 渲染方法,不斷調用render() _animate() { requestAnimationFrame(this._animate.bind(this)) // 組合器執行渲染 this.EffectComposer.render() }
基本流程
- 初始化一個效果組合器
- 把需要用的若幹通道(也就是要進行的操作)依次添加到組合器中
- 組合器會按順序執行各通道內的操作,上一通道的操作結果會傳遞給下一通道,直至最後都操作完,然後渲染到屏幕上
核心函數介紹
EffectComposer 效果組合器
作用:管理瞭後期處理的過程,根據通道的插入順序,來執行通道內的代碼(主要為著色器代碼)
構造函數
需要傳入平時初始化three場景時的渲染器WebGLRenderer, 用來後續渲染場景
// 引入 import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js' this.EffectComposer = new EffectComposer(渲染器)
重要方法:
addPass
this.EffectComposer.addPass(通道)
給EffectComposer添加後期處理通道,可以添加多個,依次執行
render
this.EffectComposer.render()
渲染,循環調用通道的render()方法
RenderPass 渲染通道
構造函數
需要傳入初始化場景時生成的場景對象跟相機對象
this.RenderPass = new RenderPass(this.scene, this.camera)
RenderPass通道的作用是把場景和相機作為參數傳入,獲得場景的渲染結果,不對渲染結果做特定處理。
簡單說就是RenderPass用來生成第一張原始圖,用來傳給後面通道使用,所以一般RenderPass會作為第一個通道
重要屬性:
renderToScreen
默認值是false,true將處理的結果保存到幀緩沖區,false直接顯示在canvas畫佈上面。
ShaderPass 著色器通道
需要傳入自定義的著色器代碼,控制渲染
const effectCopyPass = new ShaderPass(著色器代碼)
著色器代碼格式可以參照CopyShader.js
three/examples/jsm/shaders/CopyShader.js
官方案例
鏈接
threejs.org/examples/?q…
官方有很多封裝好的通道,可以拿來直接使用
通道相關代碼位置
three/examples/jsm/postprocessing/
案例演示
電脈沖故障風效果
代碼
// 引入 import { GlitchPass } from 'three/examples/jsm/postprocessing/GlitchPass.js' // 初始化通道 const Pass = new GlitchPass() // 將此通道結果渲染到屏幕 Pass.renderToScreen = true // 把通道加入到組合器 this.EffectComposer.addPass(Pass)
描邊效果
代碼
// 傳入長寬、場景、相機 const Pass = new OutlinePass(new THREE.Vector2(this.width, this.height), this.scene, this.camera) // 將此通道結果渲染到屏幕 Pass.renderToScreen = true // OutlinePass相關屬性設置 Pass.visibleEdgeColor = new THREE.Color(76, 148, 156) // 可見邊緣的顏色 Pass.hiddenEdgeColor = new THREE.Color(0, 1, 0) // 不可見邊緣的顏色 Pass.edgeGlow = 1.0 // 發光強度 Pass.usePatternTexture = false // 是否使用紋理圖案 Pass.edgeThickness = 2.0 // 邊緣濃度 Pass.edgeStrength = 2.0 // 邊緣的強度,值越高邊框范圍越大 Pass.pulsePeriod = 0 // 閃爍頻率,值越大頻率越低 // 一般生產環境中會配合鼠標事件,來改變selectedObjects,使選中的物體描邊 Pass.selectedObjects = [需要添加外邊框的網格模型] // 將通道加入組合器 this.EffectComposer.addPass(Pass)
泛光效果
BloomPass的參數
- strength 泛光效果的強度,值越高明亮區域越明顯,較暗區域的亮度也會變高
- kernelSize 泛光效果的偏移量
- sigma 銳利程度,值越高,泛光越模糊
- resolution 泛光效果的解析圖,值太低方塊化就會加重
代碼
// 引入 import { BloomPass } from 'three/examples/jsm/postprocessing/BloomPass.js' import { CopyShader } from 'three/examples/jsm/shaders/CopyShader.js' import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js' // 參數默認值strength = 1, kernelSize = 25, sigma = 4, resolution = 256 const Pass = new BloomPass(2.5, 25, 0.1, this.width) // 加入到組合器 this.EffectComposer.addPass(Pass) // BloomPass通道不能通過renderToScreen=true將結果渲染到屏幕上, // 所以需要再加一個通道effectCopyPass來完成輸出結果這一步 // effectCopyPass通道沒有任何特殊效果, 隻是輸出結果 const effectCopyPass = new ShaderPass(CopyShader) effectCopyPass.renderToScreen = true // 加入到組合器 this.EffectComposer.addPass(effectCopyPass)
總結
此文隻介紹瞭幾個案例的基本使用,隻要掌握使用的流程,其他的案例也可以很好的上手
到此這篇關於threejs後期處理的基本使用方法之加特效的文章就介紹到這瞭,更多相關threejs後期加特效內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- Three.js中實現Bloom效果及完整示例
- Three.js 中的屏幕空間環境光遮蔽SSAO
- Three.js+React實現3D文字懸浮效果
- threeJs實現波紋擴散及光標浮動效果詳解
- React + Threejs + Swiper 實現全景圖效果的完整代碼