首页 > 其他分享 >水渲染

水渲染

时间:2023-08-21 19:12:15浏览次数:31  
标签:贴图 渲染 模型 矢量 灰度 顶点 位移

凹凸纹理贴图(Bump Mapping)

作为一个早期的水体模拟方案,凹凸纹理贴图主要是通过扰动光照计算的法向量,再通过纹理的随时间移动来模拟海浪移动。它并没有改变顶点位置,就能通过视觉效果来让人觉得模型本身是凹凸不平的。这个技术常常用来模拟水面垂直方向上的凹凸感,可以通过生成对应的法线贴图来改变水面和光的交互。

分形噪声法(Fractal Noise)

用分形噪声来模拟水面的思想是用不同频率和振幅的Perlin噪声、或者其他类型的噪声进行叠加出一个新的噪声图,从而来构建出海面高度场。具体构建方法和上文提到的通过bump灰度图构造水面的原理一致。

矢量位移贴图(Vector Displacement Map)

与法线贴图不同的是,他们得到的都是“假位移”,就是他们是通过改变光照效果来达到想要的视觉偏移,而矢量位移贴图(Vector Displacement Map)/位移贴图(Displacement map)是通过“真位移”,也就是通过改变具体的顶点位置来达到顶点偏移的效果。位移贴图比凹凸贴图需要更多的顶点、更高的网格精度(可能需要曲面细分),这就使得Displacement map处理起来会更慢和会有更多的性能消耗。

位移贴图和矢量位移贴图区别:
我们可以看到上图位移贴图和矢量位移贴图的对比,他们的原理和使用方法也不一样。位移贴图是灰度图,使用灰度映射使用低模的模型UV坐标(灰度图)来编码高模和低模之间的差异。也就是说在原模型的基础上,使用一张灰度图,取该图的r/g/b值(灰度图的r=g=b值),在原先的模型的法线方向上,对应每个顶点构造一个新的对应高度。

而矢量位移贴图其实也用类似的手段,但是它是使用高模模型的UV坐标(模型)来制作对应关系。其实就是用矢量位移贴图的RGB值来对应模型顶点在3D空间内的偏移。这意味着我们可以用除法线以外的方向来偏移顶点,这能给我们更高的精度来移动网格顶点,这也让矢量位移贴图的精度接近了原始的高多边形顶点位置(模型)。

流型图(Flow Map)

标签:贴图,渲染,模型,矢量,灰度,顶点,位移
From: https://www.cnblogs.com/ultramanX/p/17646815.html

相关文章

  • Avalonia 实现聊天消息渲染、图文混排(支持Windows、Linux、信创国产OS)
      在实现即时通讯软件或聊天软件时,渲染文字表情、图文混排是一项非常繁琐的工作,再加上还要支持GIF动图、引用消息、撤回消息、名片等不同样式的消息渲染时,就更加麻烦了。    好在我们可以使用ESFramework提供的IChatRender组件,使用它我们就能轻松实现类似于微信......
  • HarmonyOS/OpenHarmony应用开发-ArkTS语言渲染控制if/else条件渲染
    ArkTS提供了渲染控制的能力。条件渲染可根据应用的不同状态,使用if、else和elseif渲染对应状态下的UI内容。说明:从APIversion9开始,该接口支持在ArkTS卡片中使用。一、使用规则支持if、else和elseif语句。if、elseif后跟随的条件语句可以使用状态变量。允许在容器组件内使用,通过......
  • Vue 实现动态渲染 Element组件 Menu
    前言在学习Vue时,我们都会写关于管理系统的项目,在管理项目中,我们必然会处理菜单模块,通常我们会使用Element这个UI框架,但官方案例是静态数据,而在实际项目需求中,我们经常会实现多级菜单的动态渲染,今天我们实现这一需求,实现Vue动态菜单的渲染。正文部分一、动态数据格式动态......
  • Systrace看GPU渲染花费时间之Fence
    一、前言如上图所示的Systrace中,VSYNC-app基本上没有什么变化,但是VSYNC-sf却一直在更新有可能是什么原因?VSYNC-app的作用通知app去开始进行绘制渲染更新UI了,DispSync按照屏幕的刷新率的速率去通知app,因此app会以跟屏幕刷新率匹配的速率去绘制渲染更新UI。而在手......
  • 了解WebGL:在浏览器中实现高性能3D图形渲染的基础知识
    WebGL是一种基于OpenGLES2.0标准的3D图形渲染技术,它可以在浏览器中实现高性能的3D图形渲染。本文将介绍WebGL的基础知识,包括其应用场景、工作原理和常见的编程工具。应用场景WebGL可以用于创建各种类型的3D图形应用程序,例如游戏、可视化效果、建筑模型等。WebGL还可以与其他W......
  • 三维模型OSGB格式轻量化技术在大规模场景的加载和渲染的作用分析
    三维模型OSGB格式轻量化技术在大规模场景的加载和渲染的作用分析  在移动设备上,大规模场景的加载和渲染是一个不容忽视的问题。对于OSGB格式轻量化处理来说,大规模场景的加载和渲染也是其中一项重要的任务。本文将重点分析OSGB格式轻量化处理在大规模场景的加载和渲染中发挥......
  • 从零开始实现一个玩具版浏览器渲染引擎
    前言浏览器渲染原理作为前端必须要了解的知识点之一,在面试中经常会被问到。在一些前端书籍或者培训课程里也会经常被提及,比如MDN文档中就有渲染原理的相关描述。作为一名工作多年的前端,我对于渲染原理自然也是了解的,但是对于它的理解只停留在理论知识层面。所以我决定自己动手......
  • 浏览器渲染原理
     渲染:将html字符串经过复杂的逻辑处理,最终转化为屏幕上的像素点信息。   如何解析html:1.首先生成对象结构树,包括css样式树css  om,dom节点树  至于为什么主线程遇到js时,必须暂停等带下载执行完毕再继续,是因为当前js可能会修改之前生成的dom,所以dom树的生成必须......
  • electron渲染进程与主进程之间通信
    首先main.js中通过preload进行预加载脚本__dirname字符串指向当前正在执行的脚本的路径const{app,BrowserWindow}=require('electron');//引入electronconstpath=require('path');letwin;letwindowConfig={width:300,height:600,minWidth:300,we......
  • 关于3x手机渲染问题
    iOS中利用通过setFrame来固定一个view的位置,例如下面代码:letdView=UIView()dView.frame=CGRect(x:100,y:100,width:100,height:70.8)dView.backgroundColor=.orangeview.addSubview(dView)通过Xcode的DebugViewHierarchy看到,dView的frame也确......