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和指针》笔记16:赋值容易出现的误区: 赋值截短

在下面的语句中,认为a和x被赋予相同的值的说法是不正确的: a x y 3;它等价于 a (x y 3);如果x是一个字符型变量,那么y3的值就会被截去一段,以便容纳于字符类型的变量中。那么a所赋的值就是这个被截短后的值。在下面这个常…

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

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

Effective C++条款20——宁以pass-by-reference-to-const替换pass-by-value(设计与声明)

缺省情况下C以by value方式(一个继承自C的方式)传递对象至(或来自)函数。除非你另外指定,否则函数参数都是以实际实参的复件(副本)为初值,而调用端所获得的亦是函数返回值的一个复件。这些复件&…

浅谈单例模式在游戏开发中的应用

前言 如果在外部想在不同的时间结点、不同的位置访问某类中的成员且想要保持访问时,成员地址唯一。那么可以考虑将该类声明为静态类,但若是成员中包含公共的数据类型,此时便可以考虑将该类做成一个单例。 单例模式 由于类中的数据&#x…

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调用时机 只…

C中字符串转16禁止数组指令

当上位机用字符串的形式下发16进制通讯指令给到下位机时的指令解析: 方法一&#xff1a;查表法 size_t charToHex(const char *data, uint8_t *result) {size_t size 0;uint8_t i 0, j 0, k 0, n 0;char listA[] {"0123456789abcdef"};uint8_t mid[256];for …

C/C++学习——单例模式(懒汉模式与饿汉模式)

C/C学习——单例模式 一、什么是单例模式&#xff1f;二、单例模式应用三、单例模式的特点注意&#xff1a;静态成员变量的使用示例代码&#xff1a; 四、单例模式C代码示例&#xff08;饿汉模式&#xff09;五、单例模式C示例代码&#xff08;懒汉模式&#xff09; 一、什么是…

记一个有趣的bug:修改结构体中的切片不生效

问题描述&#xff1a;有一个interface类型的变量&#xff0c;把一个struct赋值给了它&#xff0c;类似下面这样 package mainimport "fmt"type ResData struct {Type stringSrcid stringSearchRes interface{} }type Data struct {name []string }func mai…

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

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

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

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

多模态知识学习

问题背景 海量多模态数据&#xff0c;人类认知事物也是多模态的深度学习为多模态联合学习奠定基础感知智能->认知智能多模态学习case&#xff1a;微软小冰、视频平台“只看TA”&#xff08;服务特定明星粉丝等&#xff1a;优酷、爱奇艺等&#xff09;需求&#xff1a;多模态…

实验室的服务器和本地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 …

P5738 【深基7.例4】歌唱比赛

题目描述 n ( n ≤ 100 ) n(n\le 100) n(n≤100) 名同学参加歌唱比赛&#xff0c;并接受 m ( m ≤ 20 ) m(m\le 20) m(m≤20) 名评委的评分&#xff0c;评分范围是 0 0 0 到 10 10 10 分。这名同学的得分就是这些评委给分中去掉一个最高分&#xff0c;去掉一个最低分&#x…