尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

第39篇:水面效果-动态体积水——平面水面看腻了,这次让网格自己长出浪

第39篇:水面效果-动态体积水——平面水面看腻了,这次让网格自己长出浪 之前本猿聊过怎么在 Cesium 上铺一片"平面水面":#16 用 Fabric 材质手搓波纹,#17 直接吃内置 Water 材质,#30 更是把整个场景再渲一遍做出真倒影。它们有个共同点——水面都是一张"皮",贴在某条高度上,起伏全靠着色器在像素里假装。这次本猿换个方向,把那张皮换成真能鼓起来的网格:让一片水真的有厚度,还能透过半透明看到水下的地形。💡 本文涉及的全部代码均已开源,完整的仓库地址见文末,可自行取用、随意魔改。一、为什么叫"体积水"先给"体积"二字正个名。前面三篇水面,几何上都是一个平面(一个矩形或多边形 Region),差别只在"怎么给它上色":#16 / #17:平面 + 法线扰动,肉眼看到的浪是片元着色算出来的,顶点的 z 坐标一个都没动;#30:镜像相机 + FBO 反射,几何依旧是平面,只是额外渲了一层倒影。本篇(CASE_LIST #39,id: dynamic-volume-water,category: water,tag: 材质效果)走的是另一条路:几何真的动了。一片网格,每个顶点在顶点着色器里沿着法线被推上、拉下,波峰波谷是真三维的;半透明 + 深度测试(translucent: true,alpha默认 0.92,scene.globe.depthT
返回列表