HT for Web (Hightopo) 使用心得(6)- 3D场景环境配置(天空球,雾化,辉光,景深)

在前一篇文章《Hightopo 使用心得(5)- 动画的实现》中,我们将一个直升机模型放到了3D场景中。同时,还利用动画实现了让该直升机围绕山体巡逻。在这篇文章中,我们将对上一篇的场景进行一些环境上的丰富与美化。让场景更真实一些。具体涉及到的知识点如下:

天空球
雾化
辉光
景深

这是最终效果:

使用 HT 开发的一个简单网页直升机巡逻动画(Hightopo 使用心得(6)- 3D场景环境配置)

天空球:

天空球(SkyBox)简单来说,就是用来在3D场景中模拟蓝天白云的效果。它是一个球形网格,完全包围3D场景,并填充了一张环形纹理作为天空背景。纹理通常是一个天空的全景图(例如星空、日落、云层等),通过在球形网格的表面上将纹理映射,呈现出一个连续的、无缝的天空效果。

HT for Web中,天空球可以通过g3d.setSkybox(node)来实现。需要注意的是,这里的nodeht.Node类型的节点,该节点当作天空球来用时,不会出现在dataModel列表当中。

/*** 设置天空球** @memberof Index3d*/addSkybox() {const node = this.skybox = new ht.Node();node.s({"shape3d": "sphere","shape3d.image": "./assets/skybox.jpg",});this.g3d.setSkybox(node);}

下面两张图片分别是设置天空球与未设置天空球的效果:
设置天空球
没有天空球
当然,我们也可以将蓝天白云换成夜间图片:

this.skybox.setStyle("shape3d.image", "./assets/skybox_dark.jpg");

夜间天空球

雾化:

雾化是一种常用的 3D 场景效果,可以让场景中的物体在远离摄像机的距离时变得模糊,像有一层白雾遮挡,从而增加深度感和真实感。在 HT 中,雾化效果可以通过设置场景的雾化属性来实现,代码如下:

/*** 雾化** @memberof Index3d*/addFog() {this.g3d.setFogDisabled(false);this.g3d.setFogMode('linear'); // 线性模式this.g3d.setFogFar(30000);// this.g3d.setFogMode('exp2'); // 标准模式// this.g3d.setFogDensity(0.00007); // 浓度this.g3d.setFogColor('green'); // 设置雾的颜色}

雾化分为两种模式:线性模式和标准模式

[线性模式]

线性模式下支持设置近端距离和远端距离,

  • 近端距离:默认为1,代表从该距离起物体开始受雾效果影响,可通过setFogNear设置雾化近端距离、getFogNear获取雾化近端距离。
  • 远端距离:默认为2000,代表从该距离之后物体完全看不清, 可通过setFogFar设置雾化远端距离、getFogFar获取雾化远端距离。
    在这里插入图片描述

[标准模式]

标准模式下雾化效果则会自动调整雾化效果,在该模式下,可通过setFogDensity设置雾化强度来调整雾化的效果, getFogDensity可以获取到雾化强度。
在这里插入图片描述
另外,我们还可通过g3d.setFogColor(color)设置雾化效果的颜色:
在这里插入图片描述

辉光:

辉光是一种用于增强场景中元素外观和吸引力的视觉效果,其主要实现的是让各个模型进行自发光。常用于如夜景中灯光、道路流光等元素。
道路流光

在HT中,可通过 g3d.enablePostProcessing('Bloom', true/false) 开启/关闭整个场景的辉光效果:

  /*** 开启辉光** @memberof Index3d*/enableBloom() {const {g3d} = this;g3d.enablePostProcessing("Bloom", true); // 开启辉光const module = this.bloom = g3d.getPostProcessingModule("Bloom");module.strength = 0.4; // 强度module.threshold = 0.33; // 阈值module.radius = 0.08; //范围g3d.setPostProcessingValue('Bloom', 'selective', true); // 开启辉光过滤g3d.iv(); // 刷新拓扑}disableBloom() {this.g3d.enablePostProcessing("Bloom", false); // 关闭辉光}// 为直升机单独使用辉光效果this.helicopterNode.s('bloom', true);this.propellerNode.s('bloom', true);

其中,enablePostProcessing('Bloom', true)表示开启 Bloom 效果;strength表示自发光亮度的强弱;threshold表示决定哪些颜色会发光;radius表示发光的范围。在代码的后半段,我们单独为直升机和螺旋桨开启了辉光效果。
在这里插入图片描述

景深:

景深(Depth of Field)可以用来突出画面中的主体元素。我们用单反相机或手机进行拍摄时,利用景深原理,通过聚焦到某一物体,可以使周围环境变得模糊,从而突出主要元素。就像下图一样:
在这里插入图片描述
如果要对于一个3D场景设置景深效果,在 HT 中,景深效果是使用特殊的贴图来模拟的。景深贴图一般使用黑色的透明png贴图实现,黑色部分为受景深影响的范围,透明部分不受景深影响。通过使用不同的景深贴图及参数,可以模拟出与现实一样的景深效果。
在这里插入图片描述具体开启和配置景深的代码如下:

  /*** 开启景深** @memberof Index3d*/enableDof() {const {g3d} = this;g3d.enablePostProcessing("Dof", true); // 开启景深const module = this.dof = g3d.getPostProcessingModule("Dof");module.aperture = 0.01; // 景深阀值module.image = "./assets/dof_all.png"; // 景深贴图g3d.iv(); // 刷新拓扑}disableDof() {this.g3d.enablePostProcessing("Dof", false); // 关闭景深}

其中,enablePostProcessing('Dof', true)表示开启景深效果;aperture表示孔径,代表中间空白区域的大小,取值范围是 0 ~ 10 代表没有景深效果,1 代表景深效果最明显;image表示景深使用的贴图。

背景音乐

背景音乐不属于3D可视化的范围。不过既然有了直升机和相关场景,增加一个直升机飞行的声音可以让场景更加逼真。

/*** 初始化螺旋桨旋转声音** @memberof Index3d*/initAudio() {this._audio = new Audio("./assets/helicopter.MP3");this._audio.loop = true; // 循环播放}

要播放音乐可以使用Audio。这里我们只需要找到一个螺旋桨的音频,然后对Audio进行初始化及简单配置,就可以在场景加载后循环播放直升机的声音。

需要注意的是,目前浏览器对于音频自动播放有限制,即不允许在用户没有交互的情况下自动播放音频文件。如果我们执行了playAudio(),在console里面会遇到这个错误:

Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.
在这里插入图片描述
要解决这个问题,我们可以在系统中增加一个监听函数,监听到某些事件后进行音频播放。常见的事件有如:

  • 触摸事件:touchstarttouchmovetouchendtouchcancel
  • 鼠标事件:mousedownmouseupclickdblclickmousemovemouseentermouseleavemouseovermouseout
  • 键盘事件:keydownkeyupkeypress
/*** 监听Document事件并播放音乐** @memberof Index3d*/addEventMonitor() {document.addEventListener("click", (event) => {this._audio.play();   });document.addEventListener("keydown", (event) => {this._audio.play();     });}

总结

作为一款国产自研图形渲染引擎,HT for Web3D场景的各自效果支持还是非常强大的。在3D场景(Graph3dView)中,可以通过设置天空球、雾化、辉光和景深等特效来增强场景的逼真度和美观度。其中,天空球可以通过设置ht.Node类型的节点来实现,雾化可以通过设置场景的雾化属性来实现,辉光可以使用g3d.enablePostProcessing()方法来实现,景深可以使用特殊的贴图来模拟。此外,为了让场景更加逼真,还可以根据需要添加背景音乐。
在下一章中,我计划再介绍一下其他的几种环境特效,例如:阴影,灯光,环境光等。有兴趣的同学们记得订阅。

附录

​Hightopo 使用心得(1)- 基本概念
Hightopo 使用心得(2)- 2D 图纸 GraphView,节点 Node, 连线 Edge,与基本动画 ht.Default.startAnim()
Hightopo 使用心得(3)- 吸附与锚点
Hightopo 使用心得(4)- 3D 场景 Graph3dView 与 Obj 模型
Hightopo 使用心得(5)- 动画的实现

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/59632.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【C语言基础】变量类型,Static关键字的使用

📢:如果你也对机器人、人工智能感兴趣,看来我们志同道合✨ 📢:不妨浏览一下我的博客主页【https://blog.csdn.net/weixin_51244852】 📢:文章若有幸对你有帮助,可点赞 👍…

Leetcode 易错题整理(一)5. 7. 11. 15. 33. 34

5. 最长回文子串 给你一个字符串 s,找到 s 中最长的回文子串。 如果字符串的反序与原始字符串相同,则该字符串称为回文字符串。 示例 1: 输入:s "babad" 输出:"bab" 解释:"aba&q…

几个nlp的小任务(生成任务(摘要生成))

几个nlp的小任务生成任务——摘要生成 安装库选择模型加载数据集展示数据集数据预处理 tokenizer注意特殊的 token处理组成预处理函数调用map,对数据集进行预处理微调模型,设置参数设置数据收集器,将处理好的数据喂给模型封装测评方法将参数传给 trainer,开始训练安装库 选…

vue uniapp 同意验证码滑块验证

前言 &#xff08;vue-puzzle-vcode&#xff09; 发送验证码以及登录的时候会做验证&#xff0c;防止机刷等 效果图 一、安装依赖 npm install vue-puzzle-vcode --save二、使用步骤 1.html使用 <Vcode :show"isShow" success"onSuccess"/>2.j…

C++day7

1. #include <iostream> #include <vector> #include <fstream> using namespace std; class Stu { public:string name;int id;int age;Stu(){}Stu(string n,int i,int a):name(n),id(i),age(a){}void show(){cout << "姓名&#xff1a; "…

Jmeter 如何才能做好接口测试?

现在对测试人员的要求越来越高&#xff0c;不仅仅要做好功能测试&#xff0c;对接口测试的需求也越来越多&#xff01; 所以也越来越多的同学问&#xff0c;怎样才能做好接口测试&#xff1f; 要真正的做好接口测试&#xff0c;并且弄懂如何测试接口&#xff0c;需要从如下几…

Vue2项目练手——通用后台管理项目第一节

Vue2项目练手——通用后台管理项目 知识补充yarn和npm区别npm的缺点&#xff1a;yarn的优点 npm查看镜像和设置镜像 项目介绍项目的技术栈 项目搭建文件目录 创建路由&#xff0c;引入element-uirouter/index.jsmain.jspages/Users.vuepages/Main.vuepages/Home.vuepages/Login…

启迪未来:学乐多光屏P90引领儿童智能学习革命

在当今数字化时代&#xff0c;教育方式正经历着巨大的变革&#xff0c;智能硬件为教育领域带来了前所未有的机遇和挑战。学乐多光屏学习机作为一款创新的教育智能硬件产品&#xff0c;以其独特的特点和优势&#xff0c;引领着学习机领域的发展潮流。 1. 多功能融合&#xff1a;…

Android 基础知识

一、Activity 1、onSaveInstanceState(),onRestoreInstanceState的调用时机 onSaveInstanceState 调用时机 从最近应用中选择运行其他程序时 但用户按下Home键时 屏幕方向切换时 按下电源案件时 从当前activity启动一个新的activity时 onRestorInstanceState调用时机 只…

【线程同步】AQS抽象排队同步器(AbstractQueuedSynchronizer)

AQS(AbstractQueuedSynchronizer)抽象排队同步器 AbstractQueuedSynchronizer AQS就是AbstractQueuedSynchronizer类 AQS其实就是JUC包下的一个基类&#xff0c;JUC下的很多内容都是基于AQS实现了部分功能&#xff0c;比如ReentrantLock&#xff0c;ThreadPoolExecutor&#…

用变压器实现德-英语言翻译【01/8】:嵌入层

一、说明 本文是“用变压器实现德-英语言翻译”系列的第一篇文章。它引入了小规模的嵌入来建立感知系统。接下来是嵌入层的变压器使用。下面简要概述了每种方法&#xff0c;然后是德语到英语的翻译。 二、技术背景 嵌入层的目标是使模型能够详细了解单词、标记或其他输入之间的…

实验室的服务器和本地pycharm怎么做图传

参考 远程调试 qt.qpa.xcb: could not connect to display, echo DISPLAY为空[已解决]_功夫小象的博客-CSDN博客 先安装x11 MobaXterm x11-forwarding_C--G的博客-CSDN博客 我是在容器中搞得 1&#xff0c;安装qt5 pip install PyQt5 -i https://pypi.douban.com/simple …

登录页面设计的7个小细节,帮你提升用户体验

移动 APP 登录页面的设计直接影响到用户体验&#xff0c;从而决定 APP 的成败。我们应该设计出令用户兴奋而不是沮丧的登录界面。下面就让我和你分享几个提升登录页面 UX 设计的技巧: 如果用户必须登录才能使用服务&#xff0c;那么需要仔细考虑登录表单。 在构建登录页面设计…

Nuxt3打包部署到Linux(node+pm2安装和运行步骤+nginx代理)

最近&#xff0c;我们项目组的工作接近尾声&#xff0c;需要把项目部署上线。由于前端第一次使用Nuxt3框架&#xff0c;后端也是第一次部署Nuxt3项目&#xff0c;所以刚开始出现了很多问题。在我上网搜索很多教程后&#xff0c;得到了基本的流程。 1.服务器安装node.js环境 N…

华为鲲鹏服务器

1.简介 鲲鹏通用计算平台提供基于鲲鹏处理器的TaiShan服务器、鲲鹏主板及开发套件。硬件厂商可以基于鲲鹏主板发展自有品牌的产品和解决方案&#xff1b;软件厂商基于openEuler开源OS以及配套的数据库、中间件等平台软件发展应用软件和服务&#xff1b;鲲鹏开发套件可帮助开发…

深入解析SNMP协议及其在网络设备管理中的应用

SNMP&#xff08;Simple Network Management Protocol&#xff0c;简单网络管理协议&#xff09;作为一种用于网络设备管理的协议&#xff0c;在实现网络设备的监控、配置和故障排除方面发挥着重要的作用。本文将深入解析SNMP协议的工作原理、重要概念和功能&#xff0c;并探讨…

C++自创题目——第一期

一、题目描述&#xff1a; 在一段时间内&#xff0c;到达港口的船有n艘&#xff0c;其中每艘船的信息包括:到达时间t(表示第t秒)&#xff0c;船上乘客数k&#xff0c;以及k名乘客的国籍。输出前3600s内每艘船上国籍种数&#xff0c;并输出国籍种数最少的船只的到达时间。 二、…

docker使用harbor进行镜像仓库管理演示以及部分报错解决

目录 一.安装harbor和docker-compose 1.下载 2.将该文件修改为这样&#xff0c;修改好自己的hostname和port&#xff0c;后文的用户和密码可以不改也可以改&#xff0c;用于登录 3.安装 二.修改daemon.json文件和/etc/hosts文件 三.使用powershell作windows端域名映射 四…

【ArcGIS Pro二次开发】(63):批量更改字段别名

在我工作中遇到的大多数图斑&#xff0c;字段名称一般是英文&#xff0c;字段别名是中文&#xff0c;使用起来是比较方便的。 但有时候也会遇到一些不一样的情况&#xff0c;不知是经过了怎样的处理&#xff0c;图斑的字段别名被修改成了和字段名称一样的英文&#xff0c;这样…

[JAVA学习笔记]常用类

String类&#xff1a; 一、存放位置&#xff1a; 字符串对象创建好后不能修改 String是引用数据类型&#xff0c;但是这里作为方法参数传递的时候&#xff0c;效果跟基本数据类型是一样的。也就是说在堆中创建出来的字符串”monkey”是不能被改变的&#xff0c;如果…