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

news2024/10/13 20:19:10

给图像加一点噪声效果,可以起到朦胧背景的效果,比如下面这幅画。

除了普通的图片外,我们可以把这个效果应用到地图或其他方面,比如超过范围不允许用户了解更详细的内容。当然,也可以采用雾Fog效果,但后处理的效率会好很多。

图1 地图除了中心范围,其他都用噪声掩盖 

 1、噪声算法

噪声函数上回也提到了,可以采用SimplexNoise算法。文章为《看Threejs好玩示例,学习创新与技术(ProjectTexture合集)-CSDN博客》。今天给的噪声算法就给出源码,可以直接引用。当然也可以查找《GitHub - ashima/webgl-noise: Procedural Noise Shader Routines compatible with WebGL》 和《GitHub - stegu/webgl-noise: GLSL procedural noise functions compatible with WebGL》这两篇内容。

ec3 mod289(vec3 x) {
  return x - floor(x * (1.0 / 289.0)) * 289.0;
}

vec2 mod289(vec2 x) {
  return x - floor(x * (1.0 / 289.0)) * 289.0;
}

vec3 permute(vec3 x) {
  return mod289(((x*34.0)+10.0)*x);
}

float snoise(vec2 v)
  {
  const vec4 C = vec4(0.211324865405187,  // (3.0-sqrt(3.0))/6.0
                      0.366025403784439,  // 0.5*(sqrt(3.0)-1.0)
                     -0.577350269189626,  // -1.0 + 2.0 * C.x
                      0.024390243902439); // 1.0 / 41.0
// First corner
  vec2 i  = floor(v + dot(v, C.yy) );
  vec2 x0 = v -   i + dot(i, C.xx);

// Other corners
  vec2 i1;
  //i1.x = step( x0.y, x0.x ); // x0.x > x0.y ? 1.0 : 0.0
  //i1.y = 1.0 - i1.x;
  i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
  // x0 = x0 - 0.0 + 0.0 * C.xx ;
  // x1 = x0 - i1 + 1.0 * C.xx ;
  // x2 = x0 - 1.0 + 2.0 * C.xx ;
  vec4 x12 = x0.xyxy + C.xxzz;
  x12.xy -= i1;

// Permutations
  i = mod289(i); // Avoid truncation effects in permutation
  vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 ))
		+ i.x + vec3(0.0, i1.x, 1.0 ));

  vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);
  m = m*m ;
  m = m*m ;

// Gradients: 41 points uniformly over a line, mapped onto a diamond.
// The ring size 17*17 = 289 is close to a multiple of 41 (41*7 = 287)

  vec3 x = 2.0 * fract(p * C.www) - 1.0;
  vec3 h = abs(x) - 0.5;
  vec3 ox = floor(x + 0.5);
  vec3 a0 = x - ox;

// Normalise gradients implicitly by scaling m
// Approximation of: m *= inversesqrt( a0*a0 + h*h );
  m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h );

// Compute final noise value at P
  vec3 g;
  g.x  = a0.x  * x0.x  + h.x  * x0.y;
  g.yz = a0.yz * x12.xz + h.yz * x12.yw;
  return 130.0 * dot(m, g);
}

2、在图像中画圆

如果简单认为在glsl中画一个圆,那就错了。因为webGL的画布长宽是不一样的,因此不能用uv值直接来画圆,而是应该正则化UV。代码如下:

float aspectRatio = uQuadSize.y / uQuadSize.x;
vec2(vUv.x, vUv.y * aspectRatio)

接下来,我们希望对图1地图按某种多边形进行掩码呢?算法也比较简单,就是点判断是否在多边形内容。比如下面的代码就是让下边界更窄的朦胧。

if(pow(vUv.x,0.3)*6.0+vUv.y<3.0||(pow(1.0-vUv.x,0.3))*6.0+vUv.y<3.2){
    texCoords.x +=1. * noise * 0.05;
    texCoords.y +=1. * noise * 0.05;
  }

好了,今天就这么简单吧。 

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

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

相关文章

鸿蒙ArkUI实战开发-主打自研语言及框架

ArkUI 是 HarmonyOS 的声明式 UI 开发框架&#xff0c;而 ArkUI-X 是基于 ArkUI 框架扩展而来的跨平台开发框架。ArkUI-X 支持 HarmonyOS、OpenHarmony、Android 和 iOS 平台&#xff0c;允许开发者使用一套代码构建支持多平台的应用程序。 一、ArkUI-X 的实战开发步骤 在实战开…

(c++)在堆区创建一个数组并且访问与释放

在堆区创建一个数组&#xff0c;然后利用一个指针指向这个数组的首地址&#xff0c;通过这个指针来访问这个数组。 代码展示了三种赋值的方式&#xff1a; 1.直接利用数组访问赋值 2.利用循环结构&#xff08;和1原理一样&#xff09; 3.循环结构键盘输入赋值 然后输出这个…

Ray_Tracing_In_One_Weekend上

目标&#xff1a; 使用vscodeIDE编写代码&#xff0c;这是我的配置 学习这个教程&#xff0c;完成一个简易的光线追踪器开发 1输出PPM图像 在不使用 opengl &#xff08;渲染图像&#xff09;/ std_image.h&#xff08;加载图像&#xff09;等库的情况下&#xff0c;怎样通…

某信服, 一点底线都没有, 一点Face都不要

某些软件厂商, 仗着自己有点背景, 做出来的东西真的是流氓 !!! 铁子们, 这玩意儿怎么卸载呢?

CertiK《Hack3d:2024年第三季度安全报告》(附报告全文链接)

CertiK《Hack3d&#xff1a;2024年第三季度Web3.0安全报告》现已发布&#xff0c;本次报告深入分析了2024年7月至9月的链上安全状况&#xff0c;本季度总损失金额为7.53亿美元&#xff0c;网络钓鱼和私钥泄露是本季度造成资产损失的主要原因。 ​ 关键数据 2024年第三季度&a…

数电基础(脉冲波形的变化和发生+multisim)

1.脉冲波形的变化和发生 1.1单稳态电路 1.1.1逻辑门组成的单稳态电路 基本概念 &#xff08;1&#xff09;单稳态电路&#xff08;monostable multivibrator又称one-shot&#xff09;常用于脉冲的变换&#xff0c;延时和定时 电路的输出有稳态和暂稳态两个不同的工作状态 …

java常用框架结构

1. Spring框架 特色&#xff1a;Spring框架就像是一个万能工具箱&#xff0c;提供了丰富的功能来满足开发者的各种需求。它支持面向切面编程&#xff08;AOP&#xff09;、依赖注入&#xff08;DI&#xff09;等特性&#xff0c;使得代码更加模块化和可维护。Spring还提供了对数…

【web安全】——XXE漏洞

1.XML基础 1.1.XML简介 XML被称为可扩展标记语言&#xff0c;与HTML类似&#xff0c;但是HTML中的标签都是预定义(预先定义好每个标签的作用)的&#xff0c;而XML语言中的标签都是自定义(可以自己定义标签的名称、属性、值、作用)的;HTML中的标签可以是单标签&#xff0c;而X…

洛谷 P11045 [蓝桥杯 2024 省 Java B] 最优分组

[Problem Discription] \color{blue}{\texttt{[Problem Discription]}} [Problem Discription] [Analysis] \color{blue}{\texttt{[Analysis]}} [Analysis] 首先得注意这么一点&#xff1a; k k k 必须得是 n n n 的因数&#xff08;这里的 n , k n,k n,k 对应于题目的 N ,…

【若依】postman调试出现认证失败,无法访问系统资源

如果前后端都已经连接通了&#xff0c;但是调试出现错误代码&#xff0c;可能是因为没有授权的问题&#xff0c;需要获得授权。 授权内容在cookie中 把cookie中的token内容粘贴到postman里面 这个时候再在postman里测试接口&#xff0c;发现可以拿到数据了

【C++】“list”的介绍和常用接口的模拟实现

【C】“list”的介绍和常用接口的模拟实现 一. list的介绍1. list常见的重要接口2. list的迭代器失效 二. list常用接口的模拟实现&#xff08;含注释&#xff09;三. list与vector的对比 一. list的介绍 list是可以在常数范围内在任意位置进行插入和删除的序列式容器&#xf…

操作符详解与表达式求值

目录 操作符分类 1.算数操作符 2.移位操作符&#xff08;只适用于整数范围&#xff09; &#xff08;1&#xff09;引入 &#xff08;2&#xff09;左移操作符<< &#xff08;2&#xff09;右移操作符>> 3.位操作符 4.赋值操作符 复合赋值符 5.单目操作符 5…

SQL:函数以及约束

目录 介绍 函数 字符串函数 数值函数 日期函数 流程函数 约束 总结 介绍 说到函数我们都不陌生,在C,C,java等语言中都有库函数,我们在平时也是经常使用,函数就是一段代码,我们既可以自定义实现,又可以使用库里内置的函数;从来更加简洁方便的完成业务;同样的在SQL中也有…

vscode qt 最新开发环境配置, 基于最新插件 Qt All Extensions Pack

qt 之前发布了vscode qt offical ,但是最新更新中将其升级改为了几个不同的插件&#xff0c;功能更强大 1. 前置条件 qt 已安装 2. 插件安装 打开vscode 插件安装&#xff0c;搜索qt 会看到很多qt插件&#xff0c;直接选择Qt All Extensions Pack 安装 会安装qt环境所需的…

国内旅游:现状与未来趋势分析

在当今社会快速发展的背景下&#xff0c;国内旅游更是呈现出蓬勃的发展态势。中国&#xff0c;这片拥有悠久历史、灿烂文化和壮丽山河的广袤土地&#xff0c;为国内旅游的兴起与发展提供了得天独厚的条件。 本报告将借助 DataEase 强大的数据可视化分析能力&#xff0c;深入剖…

Linux:深入理解冯诺依曼结构与操作系统

目录 1. 冯诺依曼体系结构 1.1 结构分析 1.2 存储结构分布图 2. 操作系统 2.1 概念 2.2 如何管理 2.3 什么是系统调用和库函数 1. 冯诺依曼体系结构 1.1 结构分析 不管是何种计算机&#xff0c;如个人笔记本电脑&#xff0c;服务器&#xff0c;都是遵循冯诺依曼结构。…

小论树形dp

文章目录 树形dp 概述树形dp 路径问题 树的最长路径 思路代码树的中心 换根DP思路代码数字转换 思路代码树形dp 有依赖的背包 二叉苹果树 思路代码树形dp 状态机 没有上司的舞会 思路代码战略游戏 思路代码皇宫看守 思路代码总结 概述 树形 DP&#xff0c;即在树上进行的 …

通信工程学习:什么是DQDB分布式队列双总线

DQDB&#xff1a;分布式队列双总线 DQDB&#xff08;Distributed Queue Dual Bus&#xff09;&#xff0c;即分布式队列双总线&#xff0c;是美国电气电子工程师学会(IEEE)802.6标准中定义的一种城域网(MAN)数据链路层通信协议。该协议主要用于城域网的数据、语音和视频传输&am…

Python 中的 os 模块

Python 中的 os 模块 在Python中&#xff0c;os 模块是一个内置的标准库&#xff0c;提供了许多与操作系统交互的功能。它允许你执行一系列操作&#xff0c;如文件和目录操作、环境变量管理等。要在Python脚本中使用os模块&#xff0c;你需要首先导入它。 一些常见的用法&…

如何在 Android 中用 Kotlin 将 dp 转换为 px

我们在开发 Android 应用时&#xff0c;经常需要将 dp&#xff08;密度无关像素&#xff09;转换为 px&#xff08;像素&#xff09;。这是因为不同设备有不同的屏幕密度&#xff0c;使用 dp 可以保持在不同设备上的一致性。&#x1f4f1; 但究竟如何将 dp 转换为 px 呢&#x…