記錄--用three.js渲染真實的下雨效果

来源:https://www.cnblogs.com/smileZAZ/archive/2023/03/24/17252739.html
-Advertisement-
Play Games

這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 建模 首先我們需要一些貼圖素材 貼圖素材一般可以在3dtextures網站上找到，這裡我找了2份，包含了牆的法線貼圖和潮濕地面的法線、透明度、粗糙度貼圖 通過kokomi.AssetManager將貼圖素材一次性全部載入出來，將它們應用到 ...


這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

建模

首先我們需要一些貼圖素材

貼圖素材一般可以在3dtextures網站上找到，這裡我找了2份，包含了牆的法線貼圖和潮濕地面的法線、透明度、粗糙度貼圖

通過kokomi.AssetManager將貼圖素材一次性全部載入出來，將它們應用到Mesh上，加上基本的環境光照，即可完成最基本的建模

// 光照
const pointLight1 = new THREE.PointLight(config.color, 0.5, 17, 0.8);
pointLight1.position.set(0, 2, 0);
this.scene.add(pointLight1);
...

// 網格
const aspTex = am.items["asphalt-normal"];
aspTex.rotation = THREE.MathUtils.degToRad(90);
aspTex.wrapS = aspTex.wrapT = THREE.RepeatWrapping;
aspTex.repeat.set(5, 8);

const wallMat = new THREE.MeshPhongMaterial({
  color: new THREE.Color("#111111"),
  normalMap: aspTex,
  normalScale: new THREE.Vector2(0.5, 0.5),
  shininess: 200,
});

const wall = new THREE.Mesh(new THREE.BoxGeometry(25, 20, 0.5), wallMat);
this.scene.add(wall);
wall.position.y = 10;
wall.position.z = -10.3;
...

// 文字
const t3d = new kokomi.Text3D(this, config.text, font, {
  size: 3,
  height: 0.2,
  curveSegments: 120,
  bevelEnabled: false,
});
t3d.mesh.geometry.center();

const tm = new THREE.Mesh(
  t3d.mesh.geometry,
  new THREE.MeshBasicMaterial({
    color: config.color,
  })
);
this.scene.add(tm);
tm.position.y = 1.54;

積水地面

地面上的積水能反射出周圍的景色，因此我們將選用kokomi.Reflector來實現反射效果

const mirror = new kokomi.Reflector(new THREE.PlaneGeometry(25, 100));
mirror.position.z = -25;
mirror.rotation.x = -Math.PI / 2;

普通的反射器僅僅是一面鏡子，因此我們要自定義反射器的Shader

漣漪效果

之前逛shadertoy時看到了一個很棒的漣漪特效，就直接拿來用了

// https://www.shadertoy.com/view/4djSRW
float hash12(vec2 p){
    vec3 p3=fract(vec3(p.xyx)*.1031);
    p3+=dot(p3,p3.yzx+19.19);
    return fract((p3.x+p3.y)*p3.z);
}

vec2 hash22(vec2 p){
    vec3 p3=fract(vec3(p.xyx)*vec3(.1031,.1030,.0973));
    p3+=dot(p3,p3.yzx+19.19);
    return fract((p3.xx+p3.yz)*p3.zy);
}

// https://gist.github.com/companje/29408948f1e8be54dd5733a74ca49bb9
float map(float value,float min1,float max1,float min2,float max2){
    return min2+(value-min1)*(max2-min2)/(max1-min1);
}

vec2 rippleUv=75.*p*uTexScale;

vec2 p0=floor(rippleUv);

float rainStrength=map(uRainCount,0.,10000.,3.,.5);
if(rainStrength==3.){
    rainStrength=50.;
}

vec2 circles=vec2(0.);
for(int j=-MAX_RADIUS;j<=MAX_RADIUS;++j)
{
    for(int i=-MAX_RADIUS;i<=MAX_RADIUS;++i)
    {
        vec2 pi=p0+vec2(i,j);
        #if DOUBLE_HASH
        vec2 hsh=hash22(pi);
        #else
        vec2 hsh=pi;
        #endif
        vec2 p=pi+hash22(hsh);
        
        float t=fract(.8*iTime+hash12(hsh));
        vec2 v=p-rippleUv;
        float d=length(v)-(float(MAX_RADIUS)+1.)*t+(rainStrength*.1*t);
        
        float h=1e-3;
        float d1=d-h;
        float d2=d+h;
        float p1=sin(31.*d1)*smoothstep(-.6,-.3,d1)*smoothstep(0.,-.3,d1);
        float p2=sin(31.*d2)*smoothstep(-.6,-.3,d2)*smoothstep(0.,-.3,d2);
        circles+=.5*normalize(v)*((p2-p1)/(2.*h)*(1.-t)*(1.-t));
    }
}
circles/=float((MAX_RADIUS*2+1)*(MAX_RADIUS*2+1));

float intensity=.05*floorOpacity;
vec3 n=vec3(circles,sqrt(1.-dot(circles,circles)));

vec2 rainUv=intensity*n.xy;

與地面結合

光有漣漪效果也不夠，要將它與地面的貼圖相結合起來

這裡採用了自定義mipmap技術，利用kokomi.PackedMipMapGenerator生成了多個貼圖的mipmap

自定義mipmap除了能捆綁貼圖外，還有個好處就是可以動態控制貼圖的模糊程度

const mipmapper = new kokomi.PackedMipMapGenerator();
const mirrorFBO = mirror.getRenderTarget();
const mipmapFBO = new kokomi.FBO(this);
mirror.material.uniforms.tDiffuse.value = mipmapFBO.rt.texture;
this.update(() => {
  mipmapper.update(mirrorFBO.texture, mipmapFBO.rt, this.renderer);
});
vec2 p=vUv;
vec2 texUv=p*uTexScale;
texUv+=uTexOffset;
float floorOpacity=texture(uOpacityTexture,texUv).r;
vec3 floorNormal=texture(uNormalTexture,texUv).rgb*2.-1.;
floorNormal=normalize(floorNormal);
float roughness=texture(uRoughnessTexture,texUv).r;

vec2 finalUv=reflectionUv+floorNormal.xy*uDistortionAmount-rainUv;

float level=roughness*uBlurStrength;

vec3 col=packedTexture2DLOD(tDiffuse,finalUv,level,uMipmapTextureSize).rgb;

2.gif

下雨動畫

生成雨滴

雨滴數量會很多，因此要用到THREE.InstancedMesh來生成實例化網格對象

const rain = new THREE.InstancedMesh(new THREE.PlaneGeometry(), rainMat, count);
rain.instanceMatrix.needsUpdate = true;

const dummy = new THREE.Object3D();

for (let i = 0; i < rain.count; i++) {
  dummy.position.set(
    THREE.MathUtils.randFloat(-10, 10),
    0,
    THREE.MathUtils.randFloat(-20, 10)
  );
  dummy.scale.set(0.03, THREE.MathUtils.randFloat(0.3, 0.5), 0.03);
  dummy.updateMatrix();
  rain.setMatrixAt(i, dummy.matrix);
}
rain.rotation.set(-0.1, 0, 0.1);
rain.position.set(0, 4, 4);

這裡要註意一點：雨滴的方向是始終朝向用戶的，為了達成這點就要用billboard方案來實現

vec3 billboard(vec3 v,mat4 view){
    vec3 up=vec3(view[0][1],view[1][1],view[2][1]);
    vec3 right=vec3(view[0][0],view[1][0],view[2][0]);
    vec3 pos=right*v.x+up*v.y;
    return pos;
}

vec3 billboardPos=billboard(transformed,modelViewMatrix);
transformed=billboardPos;

下落動畫

我們可以給雨滴賦予隨機的高度和速度attribute，併在頂點著色器中讓它動起來

const progressArr = [];
const speedArr = [];

for (let i = 0; i < rain.count; i++) {
  ...

  progressArr.push(Math.random());
  speedArr.push(dummy.scale.y * 10);
}

rain.geometry.setAttribute(
  "aProgress",
  new THREE.InstancedBufferAttribute(new Float32Array(progressArr), 1)
);
rain.geometry.setAttribute(
  "aSpeed",
  new THREE.InstancedBufferAttribute(new Float32Array(speedArr), 1)
);
attribute float aProgress;
attribute float aSpeed;

uniform float uSpeed;
uniform float uHeightRange;

vec3 distort(vec3 p){
    float y=mod(aProgress-iTime*aSpeed*.25*uSpeed,1.)*uHeightRange-(uHeightRange*.5);
    p.y+=y;
    return p;
}

transformed=distort(transformed);

rain-2.gif

反射效果

創建背景的離屏渲染FBO，將其作為反射的主要材質

const bgFBO = new kokomi.FBO(this, {
  width: window.innerWidth * 0.1,
  height: window.innerHeight * 0.1,
});
rainMat.uniforms.uBgRt.value = bgFBO.rt.texture;

const fboCamera = this.camera.clone();

this.update(() => {
  rain.visible = false;
  this.renderer.setRenderTarget(bgFBO.rt);
  this.renderer.render(this.scene, fboCamera);
  this.renderer.setRenderTarget(null);
  rain.visible = true;
});

在頂點著色器中獲取屏幕空間vScreenspace

// https://github.com/Samsy/glsl-screenspace
vec2 screenspace(mat4 projectionmatrix,mat4 modelviewmatrix,vec3 position){
    vec4 temp=projectionmatrix*modelviewmatrix*vec4(position,1.);
    temp.xyz/=temp.w;
    temp.xy=(.5)+(temp.xy)*.5;
    return temp.xy;
}

vScreenspace=screenspace(projectionMatrix,modelViewMatrix,transformed);

在片元著色器中採樣反射材質

uniform sampler2D uNormalTexture;
uniform sampler2D uBgRt;
uniform float uRefraction;
uniform float uBaseBrightness;

varying vec2 vScreenspace;

void main(){
    vec2 p=vUv;
    
    vec4 normalColor=texture(uNormalTexture,p);
    
    if(normalColor.a<.5){
        discard;
    }
    
    vec3 normal=normalize(normalColor.rgb);
    
    vec2 bgUv=vScreenspace+normal.xy*uRefraction;
    vec4 bgColor=texture(uBgRt,bgUv);
    
    float brightness=uBaseBrightness*pow(normal.b,10.);
    
    vec3 col=bgColor.rgb+vec3(brightness);

    col=vec3(p,0.);
    
    gl_FragColor=vec4(col,1.);
}

這裡有一點要註意：積水地面中要把雨滴的反射去掉，不然會看著很亂

rainFloor.mirror.ignoreObjects.push(rain);

3.gif

燈光閃爍

用setInterval來間歇地設置文字和燈光材質的顏色即可

// flicker
const turnOffLight = () => {
  tm.material.color.copy(new THREE.Color("black"));
  pointLight1.color.copy(new THREE.Color("black"));
};

const turnOnLight = () => {
  tm.material.color.copy(new THREE.Color(config.color));
  pointLight1.color.copy(new THREE.Color(config.color));
};

let flickerTimer = null;

const flicker = () => {
  flickerTimer = setInterval(async () => {
    const rate = Math.random();
    if (rate < 0.5) {
      turnOffLight();
      await kokomi.sleep(200 * Math.random());
      turnOnLight();
      await kokomi.sleep(200 * Math.random());
      turnOffLight();
      await kokomi.sleep(200 * Math.random());
      turnOnLight();
    }
  }, 3000);
};

flicker();

4.gif

後期處理

為了讓文字燈光看上去更加明亮，可以用Bloom濾鏡來照亮文字

由於後期處理中原先renderer的抗鋸齒會失效，故用SMAA濾鏡來實現抗鋸齒

// postprocessing
const composer = new POSTPROCESSING.EffectComposer(this.renderer);
this.composer = composer;

composer.addPass(new POSTPROCESSING.RenderPass(this.scene, this.camera));

// bloom
const bloom = new POSTPROCESSING.BloomEffect({
  luminanceThreshold: 0.4,
  luminanceSmoothing: 0,
  mipmapBlur: true,
  intensity: 2,
  radius: 0.4,
});
composer.addPass(new POSTPROCESSING.EffectPass(this.camera, bloom));

// antialiasing
const smaa = new POSTPROCESSING.SMAAEffect();
composer.addPass(new POSTPROCESSING.EffectPass(this.camera, smaa));

5.gif

待優化

效果算是基本實現了，但也有很多待優化的點

  1. 添加現實中的雨聲
  2. 實現更棒的相機交互
  3. 添加更多的物體

本文轉載於:

https://juejin.cn/post/7200443454567137336

如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Kafka生產者
    生產者創建消息。在其他基於發佈與訂閱的消息系統中，生產者可能被稱為發佈者 或 寫入者。 一般情況下，一個消息會被髮布到一個特定的主題上。生產者在預設情況下把消息均衡地分佈到主題的所有分區上，而並不關心特定消息會被寫到哪個分區。不過，在某些情況下，生產者會把消息直接寫到指定的分區。這通常是通過消息鍵和 ...
  • 保姆級教程！玩轉 ChunJun 詳細指南
    ChunJun 是一款穩定、易用、高效、批流一體的數據集成框架，⽀持海量數據的同步與計算。ChunJun 既可以採集靜態的數據，比如 MySQL，HDFS 等，也可以採集實時變化的數據，比如 binlog，Kafka 等。同時 ChunJun 也是一個支持原生 FlinkSQL 所有語法和特性的計算 ...
  • 資料庫系統原理之資料庫設計
    資料庫設計 一、資料庫設計概述 資料庫的生命周期 從資料庫演變過程的角度來看，資料庫的生命周期可分為兩個階段： 資料庫分析與設計階段 需求分析 概念設計 邏輯設計 物理設計 資料庫實現與操作階段 資料庫的實現 操作與監督 修改與調整 資料庫設計的目標 滿足應用功能需求：主要是指用戶當前與可預知的將來 ...
  • ElasticSearch固然好用，但這些南牆不能撞
    一、管理方式 ElasticSearch作為最常用的搜索引擎組件，在系統架構中發揮極其重要的能力，可以極大的提升數據的載入和檢索效率；但不可否認的是，在長期的應用實踐中，也發現很多不好處理的流程和場景； 從直觀感覺上說，業務中對索引的使用主要涉及如圖的幾個流程，其核心也就是索引的結構維護與數據的流動 ...
  • 現有iOS工程引入flutter配置方式-記錄問題和經驗
    國際移動用戶識別碼（ IMSI） international mobile subscriber identity 國際上為唯一識別一個移動用戶所分配的號碼。 從技術上講，IMSI可以徹底解決國際漫游問題。但是由於北美目前仍有大量的AMPS系統使用MIN號碼，且北美的MDN和MIN採用相同的編號，系 ...
  • 使用 PC 端瀏覽器開發者工具對移動端真機環境 Web 頁面進行遠程調試
    Mac/Windows 瀏覽器開發者工具遠程調試 iPhone/Android 頁面 在移動端 Web 開發中，有時候只通過模擬器進行調試是不夠的，需要在真機環境下進行調試才能發現並解決一些問題。而移動端真機環境瀏覽器沒有開發者工具，在這種情況下，使用 PC 端瀏覽器開發者工具對移動端真機環境的 W ...
  • el-select的remote遠程搜索時，重新打開時，下拉選項為上一次查詢的結果
    問題描述 第一次搜索結果，沒有 選擇。關閉後再次打開 下拉框選項還是上一次的搜索結果。 這個現象能理解，但是也能被挑刺，遂修改——再次點擊的時候，展示全部 解決思路： 使用el-select的@visible-change方法，監聽下拉框打開關閉事件。 關閉時，將下拉選項的內容改為全部條件。 ...
  • eval有時候也可以用，而且有奇效
    eval，一個我曾經避之不及的函數，最近我對它產生了一點新的感觸：eval有時候也可以用，有奇效。 一般在使用js進行開發時，是不建議使用eval這類函數的。在JavaScript中，eval可以計算傳入的字元串，將其當作js代碼來執行。因為它可執行js代碼的特性，有可能被第三方利用，傳入惡意js代 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類