webgl 基础渲染demo_WebGL + ThreeJS 实现实时水下焦散 Part 1

v2-dcffb0ba43a8b1ac072a9b41de71f793_1440w.jpg?source=172ae18b
知乎视频​www.zhihu.com

采用 WebGL 和 ThreeJS 运行实时焦散运算,需要一点相关基础。本文主要介绍焦散的原理以及计算方法

原作者

https://github.com/martinRenou​github.com

代码和原文

https://github.com/martinRenou/threejs-caustics​github.com

由于本人的笔电还在维修中所以带中文注释的代码要后续补上了

什么是焦散 caustics

焦散是光从表面(在我们的情况下是空气/水界面)折射和反射时出现的光的模式。

由于在水波上发生反射和折射,水起了动态放大镜的作用,形成了这些光的图案。

v2-3f7c6d310f45f102b1d1c7f0cc46f4f3_b.jpg

本文中主要讨论由光的折射引起的焦散,主要是水下发生的事情。

为了能够得到稳定的 60 帧,使用 GLSL 编写的 shaders 在 GPU 上计算。

为了计算焦散,我们需要:

• 计算水面的折射光线(GLSL 中有内置函数)

• 求交算法,计算光线照射到环境的位置

• 通过检查光线会聚的位置来计算焦散强度

v2-38f3a694a587deee65a8bba80fee7f22_b.jpg

创建环境图

当涉及动态阴影计算时,一种众所周知的技术是阴影映射 shadow mapping。通常在视频游戏中使用,效果好且速度快。

阴影映射是一项两步运行的技术:

• 从光的角度看,3D 场景首先在纹理中渲染。 该纹理将包含所有片段的深度(光源和片段之间的距离),而不是包含片段的颜色。 此纹理称为阴影贴图 shadow map。

• 然后在渲染 3D 场景时使用阴影贴图。在屏幕上绘制片段时,我们可以从阴影图中知道光源和当前片段之间是否还有另一个片段。如果是这种情况,则该片段在阴影中,应该将其绘制得更暗一些。

可以对水体焦散运行类似的方法,首先在纹理中渲染水下环境,然后使用该纹理来计算光线与环境之间的交点。 除了渲染片段深度之外,还渲染了环境图中的片段位置,RGB 信道存储 XYZ 位置,alpha 信道存储深度:

v2-e8e6af5573f5f304597573cd9b7b9719_b.jpg

计算光线与环境的交点

现在有了水下环境图,需要计算折射光线与环境之间的交点。

算法如下:

1. 从光线与水面的交点开始

2. 使用折射函数计算折射

3. 从当前位置沿折射射线方向移动,环境图纹理的一个像素

4. 将存储在当前环境纹理像素中的环境深度与当前深度进行比较。如果环境深度大于当前深度,则意味着我们需要走得更远,因此我们再次运行步骤 3。如果环境深度小于当前深度,则意味着光线在您从中读取的位置击中了环境。

焦散纹理

一旦找到交点,就可以使用 Evan Wallace 在其文章中提到的技术来计算焦散强度(和焦散强度纹理)。 产生的纹理如下所示:

v2-ceb5f239ca2cb26c2f1909d6f3f2570c_b.jpg

该纹理包含 3D 空间每个点的光强度信息。当渲染最终场景时,我们可以从焦散纹理中读取此光强度,并得到以下结果:

v2-3d553ec26bb9b8a548c2479257ce80b1_b.jpg

其他

本文重点讨论焦散的计算,但此 demo 中还有其他技术。

关于水面渲染,使用了天空盒纹理和立方体贴图进行反射。还使用简单的屏幕空间折射(请参阅有关屏幕空间反射和折射的这篇文章)在水面上应用了折射,该技术在物理上不是正确的,但在视觉上吸引人且快速。 此外,添加了色差以提高真实感。


后续会介绍下前面焦散纹理的生成方法,以及简单解读下原代码以及 ThreeJS 的使用

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

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

相关文章

超硬核C++BestPractices翻译与阅读笔记

点击蓝字关注我们硬货开始这本书的副标题是:45ish Simple Rules with Specific Action items for better C ,这本书是由大佬推荐的, C学习有必要掌握一下这45条最佳实践, 可以很大程度上提升代码的可读性和健壮性, 而且这本书也不…

diskgenius单文件专业版_金蝶KIS专业版系列——系统工具六(业务套打工具)

导读:(一)问一问1.1.套打的作用1.2.举例(二)怎么进入套打设计器2.1.入口12.2.入口2(三)怎么使用套打设计器打开套打模板3.1.打开系统标准套打模板3.2.新建一个空白的套打模板3.3.保存套打模板3.…

面试常问的16个C语言问题,你全会吗?

点击蓝字关注我们金三银四不少小伙伴在找工作,这里我给大家分享一下面试中经常会遇到的一些嵌入式C语言问题,你看看能做到全会吗?1、用预处理指令#define 声明一个常数,用以表明1年中有多少秒(忽略闰年问题&#xff09…

高性能 高可用 可弹性伸缩_性能,可伸缩性和活力

高性能 高可用 可弹性伸缩本文是我们名为Java Concurrency Essentials的学院课程的一部分。 在本课程中,您将深入探讨并发的魔力。 将向您介绍并发和并发代码的基础知识,并学习诸如原子性,同步和线程安全性的概念。 在这里查看 !…

iptables命令_程序员最有用的linux命令汇总

总结程序员在工作中,最有用的linux命令如下:1、vi/vim 我们须要在服务器上代码一些代码时候,就用vi/vim命令就可以,vim是vi的升级,本色自带代码高亮工具,利于查看。dd 删除光标所在行o 向光标所在行向下增加…

详解C++异常

点击蓝字关注我们1、异常概念异常是一种处理错误的方式,当一个函数发现自己无法处理的错误时就可以抛出异常,让函数的直接或间接的调用者处理这个错误。throw: 当问题出现时,程序会抛出一个异常。这是通过使用 throw 关键字来完成的。catch: …

C语言基础知识:指针与数组的区别是什么

点击蓝字关注我们在C语言教程中我们使用通过数组名通过偏移和指针偏移都可以遍历数组,那么指针和数组到底有什么区别??由于数组中的数据在内存中都是连续存放的,数组名默认就是数组的首地址,也是一个特殊的指针&#x…

java java se_Java 8 SE可选,严格的方法

java java se大约两周前,Stephen Colebourne提出了使用Optional的实用方法 。 如果您阅读了它,您可能会从我以前的建议中猜到我不同意。 总览 我必须以免责声明开头,然后我将直接解释为什么我认为他的方法不那么理想。 所有不归因于他人的报…

std::thread 还有哪些使用“姿势”?

点击蓝字关注我们C11 线程创建每一个 C11 程序都包含一个主线程即 main() 函数。在 C11 中我们可以通过创建 std::thread 对象来创建新的线程。每个 std::thread 对象都可以与一个线程相关联。需要引用的头文件&#xff1a;1#include <thread>std::thread 的构造函数中接…

用python画皇冠_手把手教你用 Python 绘制酷炫的桑基图!

原标题&#xff1a;手把手教你用 Python 绘制酷炫的桑基图&#xff01;作者 | 周志鹏 责编 | 郭 芮 最近&#xff0c;不止一次收到小伙伴的截图追问&#xff1a;“这个图叫什么&#xff1f;&#xff1f;&#xff1f;” “这个图真好看&#xff01;&#xff01;&#xff01;怎么…

为啥电脑从C盘开始?A、B盘去哪了?

点击蓝字关注我们前些天硬盘坏了&#xff0c;幸好不是系统盘&#xff0c;不然那些软件安装配置会把我折腾坏&#xff0c;或许这也是在暗示我该换电脑了。重要的数据部分没有遭到损坏&#xff0c;数据是无价的&#xff0c;还是要勤备份。于是换上了一张新的硬盘&#xff0c;当时…

java 锁_Java之线程并发的各种锁、锁、锁

因为两周没更新了...也不是懒&#xff0c;这两周确实有些忙&#xff0c;赶项目进度赶的不亦乐乎...终于赶在工期前&#xff0c;可以进入内测了&#xff0c;我也有了些时间&#xff0c;可以更新啦...线程并发锁是很常见的问题&#xff0c;而且在Java中锁的类型、概念、使用场景等…

C语言编程中错误异常该如何统一处理?1.8万字总结

点击蓝字关注我们本文主要总结嵌入式系统C语言编程中&#xff0c;主要的错误处理方式。一、错误概念1.1 错误分类从严重性而言&#xff0c;程序错误可分为致命性和非致命性两类。对于致命性错误&#xff0c;无法执行恢复动作&#xff0c;最多只能在用户屏幕上打印出错消息或将其…

pycharm remote 远程项目 同步 本地_利器:PyCharm本地连接服务器搭建深度学习实验环境的三重境界...

作为实验室社畜&#xff0c;常需要在本地使用Pycharm写代码&#xff0c;然后将代码同步到服务器上&#xff0c;使用远程登录服务器并运行代码做实验。这其中有很多事情如果没有好的工具&#xff0c;做起来会非常麻烦。比如如何快速同步本地与服务器的代码&#xff1f;如何优雅地…

防御性编程技巧

点击蓝字关注我们在防御性编程的大框架之下&#xff0c;有许多常识性的规则。人们在想到防御性编程的时候&#xff0c;通常都会想到“断言”&#xff0c;这没有错。我们将在后面对此进行讨论。但是&#xff0c;还是有一些简单的编程习惯可以极大地提高代码的安全性。尽管看上去…

cookie无法读取bdstoken_第二章(第12节):cookie操作

有时候我们需要验证浏览器中 cookie 是否正确&#xff0c;因为基于真实 cookie 的测试是无法通过白盒和集成测试进行的。WebDriver 提供了操作 cookie 的相关方法&#xff0c;可以读取、添加和删除 cookie信息。WebDriver 操作 cookie 的方法&#xff1a;get_cookies()&#xf…

C++ 基本的输入输出

点击蓝字关注我们C 标准库虽然提供了一组丰富的输入/输出功能&#xff0c;但是本章只讨论 C 编程中最基本和最常见的 I/O 操作。C 的 I/O 发生在流中&#xff0c;流是字节序列。如果字节流是从设备&#xff08;如键盘、磁盘驱动器、网络连接等&#xff09;流向内存&#xff0c;…

http 和 https_HTTPS与HTTP区别

HTTPS与HTTP的认识&#xff1a;HTTP 加密 认证 完整性保护 HTTPSHTTP的全称是 Hypertext Transfer Protocol Vertion (超文本传输协议)HTTPS&#xff1a; HTTPS(Secure Hypertext Transfer Protocol)安全超文本传输协议。HTTPS和HTTP的区别&#xff1a;HTTPS协议需要到ca申…

C语言指针的自我介绍(你了解我吗?了解多少?)

点击蓝字关注我们hey! Ladies and Gentlemen.&#x1f601;欢迎大家来看望我&#xff0c;对&#xff0c;我就是指针(pointer)&#xff0c;被很多人吐槽&#x1f614;&#xff0c;也被人说好。我希望大家了解过我以后&#xff0c;能够爱上我&#x1f618;。大家在了解我之前 &am…

flex 解析json文件_使用 Python 处理 JSON 格式的数据 | Linux 中国

如果你不希望从头开始创造一种数据格式来存放数据&#xff0c;JSON 是一个很好的选择。如果你对 Python 有所了解&#xff0c;就更加事半功倍了。下面就来介绍一下如何使用 Python 处理 JSON 数据。-- Seth KenlonJSON 的全称是 JavaScript 对象表示法JavaScript Object Notati…