看Threejs好玩示例,学习创新与技术(二)

news/2024/9/19 0:09:02/ 标签: 学习

本文接上篇内容,继续挖掘应用ThreeJS的一些创新算法。

本文理解难度比较大,可以先看一些概念,在难的地方培养一些意识即可。

1、扭曲的自然

下面图本身是矩形的,为何它可以这么扭曲呢?它在随机处带有一定的规律,跟股票一样,开始难以捉摸。

图片

这个效果是基于Poisson Disk Sampling(泊松圆盘采样)。该算法可以生成二维或三维空间中生成均匀分布的点集的算法。它的主要特点是确保生成的点之间保持一定的最小距离,从而避免点的聚集。这种方法在计算机图形学、游戏开发、物理模拟等领域中非常有用,尤其是在需要生成自然分布的对象(如树木、石头等)时。

接下来,每行采用多个正弦波叠加对左右前后进行裁剪。如果不进行裁剪,那么效果如下(初步的锯齿感是因为矩形内采样的结果)。水平裁剪函数为Math.sin(y * 3) * Math.sin(y * 2) * Math.sin(y * 4.7) * 0.5 - 0.5) * 0.7.

图片

2、如何给每个方块投影纹理

这是本文名称的由来--Project Texture。

在上面那副图中,聪明的你一定初步猜到了每个方块的纹理是怎么得到的。对,正如你猜的那样,在每个方块要静止时候记录所在位置。在代码里,每个方块用savedModelMatrix存储了居中静止时候的矩阵。在着色器代码里面重算uv即可。

//顶点着色器vWorldPosition = savedModelMatrix * vec4(position, 1.0);vTexCoords = projectionMatrixCamera * viewMatrixCamera * vWorldPosition;
//片元着色器vec2 uv = (vTexCoords.xy / vTexCoords.w) * 0.5 + 0.5;uv.x = map(uv.x, 0.0, 1.0, 0.5 - widthScaled / 2.0, 0.5 + widthScaled / 2.0);uv.y = map(uv.y, 0.0, 1.0, 0.5 - heightScaled / 2.0, 0.5 + heightScaled / 2.0);
vec4 color = texture2D(texture, uv);

为啥这么复杂呢,为啥不开始存储每个方块的UV呢?这个原因我也尝试了。下面代码的vTexCoords(=savedModelMatrix,已修改)记录方块所在的位置,vWorldPosition表示方块中像素的偏移。得到的效果如下。效果比较差是因为没有归一化。

vec2 uv =vec2((vTexCoords.x+vWorldPosition.x)/3.8+0.5,(vTexCoords.y+vWorldPosition.y)/5.8+0.5);

图片

其他小代码:
问:var t={a:3,b:4} var {a} =t。这是什么写法 答:这是 JavaScript 中的

对象解构赋值(Destructuring Assignment)

语法。具体来说,代码的作用是从对象 t 中提取属性 a 的值并将其赋值给变量 a


http://www.ppmy.cn/news/1525650.html

相关文章

Android - NDK:在Jni中打印Log信息

在Jni中打印Log信息 1、在配置CMakeLists.txt find_library( # Sets the name of the path variable.log-lib# Specifies the name of the NDK library that# you want CMake to locate.log)# Specifies libraries CMake should link to your target library. You # can link…

laravel 资源show方法问题

有张admin_users表,但是在控制器的show方法返回的数据时空。 路由 Route::resource(adminuser, \App\Http\Controllers\AdminUserController::class)->except([create, edit]); 解决: 把路由adminuser 改成 admin-user Route::resource(admin-user, …

深度学习:怎么看pth文件的参数

.pth 文件是 PyTorch 模型的权重文件,它通常包含了训练好的模型的参数。要查看或使用这个文件,你可以按照以下步骤操作: 1. 确保你有模型的定义 你需要有创建这个 .pth 文件时所用的模型的代码。这意味着你需要有模型的类定义和架构。 2. …

【刷题】Day4--密码检查

Hi! 今日刷题,小白一枚,欢迎指导 ~ 【链接】 密码检查_牛客题霸_牛客网 【思路】 依次根据规则判断密码是否合格。while里嵌套个for循环,来进行密码的多组输入,for循环进行一次代表判断一个密码串;规则…

灌区信息化发展趋势展望

灌区信息化作为现代农业发展的重要组成部分,正逐渐成为提升水资源管理效率、保障粮食安全与促进农业可持续发展的关键途径。随着信息技术的飞速进步和智能化技术的广泛应用,灌区信息化的未来发展趋势展现出多维度、深层次的变革与创新,其发展…

【我的 PWN 学习手札】Unlink Attack

目录 前言 一、Unlink介绍 二、保护和限制 (1)FD->bk P AND BK->fd P (2)chunksize(P) prev_size(next_chunk(P)) (3)largebin chunk 三、适用场景 四、利用与绕过 (1&#…

R语言xlsx,txt文件处理:以《书摘》00年-10年资源合集整理为例

偶然间读到一篇文章,分享06年《书摘》的内容,今天来看都不过时,所以起了找下这本老杂志合集的心思。 傅佩荣先生《哲学与人生》选段 “如果有人觉得活着很辛苦,面对自己又感觉无聊乏味,那么他应该多接触自然界。我有个…

Grafana面板-linux主机详情(使用标签过滤主机监控)

1. 采集器添加labels标签区分业务项目 targets添加labels (模板中使用的project标签) … targets: [‘xxxx:9100’] labels: project: app2targets: [‘xxxx:9100’] labels: project: app1 … 2. grafana面板套用 21902 模板 演示

JS 扩展运算符有哪些使用场景?

你好,我是沐爸,欢迎点赞、收藏、评论和关注。 扩展运算符有哪些使用场景?直接进入正题 一、复制数组 const a1 [1, 2];// 写法一 const a2 [...a1]; // 写法二 const [...a2] a1;二、合并数组 const part1 [1, 2, 3]; const part2 …

7. 探究模型参数与显存的关系以及不同精度造成的影响

这篇文章将探讨两个重点: 模型参数与显存(GPU 内存)之间的关系不同精度的导入方式,以及它们对显存和性能的影响 理解这些概念会让你在模型的选择上更加游刃有余。 文章目录 模型参数与显存的关系模型参数量与内存占用GPU 显存需求…

Camera2 预览旋转方向、拍照、录像成像旋转

文章目录 前言一、思考问题二、基础补充、资源参考架构图了解Camera相关专栏零散知识了解部分相机源码参考,学习API使用,梳理流程,偏应用层Camera2 系统相关 三、核心问题:预览方向不对【图片、视频】、成像存储不对、拉伸问题预览…

类型参数传值问题

一、基本数据类型传参问题 public static void main(String[] args) throws Exception {Integer number null;method01(number);}private static void method01(int number){System.out.println("number " number);}Ps: 基于int基本数据类型传参的时候&#xff0c…

Linux操作系统入门(二)

完成了前篇所进行的VMware下载安装,并在其内配置了CentOS7的linux操作系统之后,我们得以正式进入了Linux的世界。 一.安装FinalShell 在本篇中,为了更好的在Windows系统上对虚拟机中的linux操作系统进行操作,我们需要下载一款新…

基于I2S的音频ADC_DAC的_FPGA的驱动

前言 这是博主自己原创的成果,如要转载或者引用,请标明出处,具体的视频讲解见我的bili视频讲解,先附链接 引出目的 课题项目需求做一个基于FPGA的相控扬声器后面进行数字滤波器的设计与实现后期FPGA算法的实现 整体模块框图 驱…

java重点学习-线程池的使用和项目案例

十一 线程池的使用场景 你们项目哪里用到了多线程 批量导入:使用了线程池CountDownLatch批量把数据库中的数据导入到了ES(任意)中,避免OOM数据汇总:调用多个接口来汇总数据,如果所有接口(或部分接口)的没有依赖关系,就可以使用线程池future来…

基于APISIX实现API网关案例分享

一、APISIX介绍 1、定义 Apache APISIX 是一个动态、实时、高性能的云原生 API 网关。它构建于 NGINX + ngx_lua 的技术基础之上,充分利用了 LuaJIT 所提供的强大性能。 2、软件架构 2.1、架构图 APISIX 主要分为两个部分: APISIX 核心:包括 Lua 插件、多语言插件运行时…

Opencv实现提取卡号(数字识别)

直接开始 实行方法 解析命令行参数:使用argparse库来解析命令行输入,确保用户提供了输入图像和模板图像的路径。 读取模板图像:使用cv2.imread()函数读取模板图像的路径,并显示原始图像。 图像预处理: 将图像转换为…

Java面试篇基础部分-Java中的集合类

Java集合是面试中经常被问到的一块内容,很多人在这个地方被面试官吊打。Java集合类被定义在java.util包中,主要有四种集合,分别是List、Queue、Set和Map,每种集合分类如下图所示 List集合 List是一种在开发中比较常用的集合类,作为有序的Collection的典范,分别有如下的…

ubuntu20.4安装Qt5.15.2

ubantu20.4镜像下载地址: https://releases.ubuntu.com/focal/ubuntu-20.04.6-desktop-amd64.iso Qt5.15.2下载地址: https://download.qt.io/official_releases/online_installers/ 安装步骤 1、进入地址后选择对应安装包,我这是ubuntu…

redis基本数据结构-string

文章目录 1. redis的string数据结构2. 常见的业务场景2.1 缓存功能案例讲解背景优势解决方案代码实现 2.2 计数器案例讲解背景优势解决方案代码实现 2.3 分布式锁案例讲解背景优势解决方案代码实现 2.4 限流案例讲解背景优势解决方案代码实现 2.5 共享session案例讲解背景优势解…