利用shader生成随机数及简单噪声图

最新推荐文章于 2024-01-22 13:49:39 发布
最新推荐文章于 2024-01-22 13:49:39 发布
阅读量1k 收藏 6
点赞数 1
分类专栏： Unity渲染&TA 文章标签： unity
原文链接：https://zhuanlan.zhihu.com/p/390862782
版权

##

随机在shader中制作各种noise非常常见。下文中我将介绍如何利用shader生成随机数。

1维随机

1维随机是我们在shader中制作随机数的基础。我简单介绍下各个函数、参数的作用。

fract（x）->就是取x小数部分然后做个绝对值处理

sin(x)->不必多说

fract(sin(x)*a),a=1.0 如上图

fract(sin(x)*a),a=10.5 如上图

fract( sin(x + b) * a ),a=100,b=0.546 如上图

fract( sin(x + 0.546) * 143758.5964)->如上图

通常程序中我们把a、b看做随机数种子的一部分，当a越大时实际上fract( sin(x) * a)会表现的“更密集"（扩大了定义域）,也就会更“随机”。实际上定义好种子数后，我们得到的是特定的随机。

float Random1DTo1D(float value,float a,float b){
	//make value more random by making it bigger
	float random = frac(sin(value+b)*a);
        return random;
}

2维/3维/4维 高维到低维随机

在程序中我们更常用的是4D/3D/2D->3D/2D/1D的随机，通常我们使用dot()来处理高维到1维的情况,并且在dot()前为了减少artifacts(超过float边界)我们一般会对传进来的value进行处理。

2D->1D:

float Random2DTo1D(float2 value,float a ,float2 b)
{			
	//avaoid artifacts
	float2 smallValue = sin(value);
	//get scalar value from 2d vector	
	float  random = dot(smallValue,b);
	random = frac(sin(random) * a);
	return random;
}

2D->2D:（其实就是对2D用不同的种子处理2次）

float2 Random2DTo2D(float2 value){
	return float2(
		Random2DTo1D(value,14375.5964, float2(15.637, 76.243)),
		Random2DTo1D(value,14684.6034,float2(45.366, 23.168))
	);
}

3D->1D

float Random3DTo1D(float3 value,float a,float3 b)
{			
	float3 smallValue = sin(value);
	float  random = dot(smallValue,b);
	random = frac(sin(random) * a);
	return random;
}

3D->2D

float2 Random3DTo2D(float3 value){
	return float2(
		Random3DTo1D(value,14375.5964, float3(15.637,76.243,37.168)),
		Random3DTo1D(value,14684.6034,float3(45.366, 23.168,65.918))
	);
}

3D->3D

float3 Random3DTo3D(float3 value){
	return float3(
		Random3DTo1D(value,14375.5964, float3(15.637,76.243,37.168)),
		Random3DTo1D(value,14684.6034,float3(45.366, 23.168,65.918)),
		Random3DTo1D(value,17635.1739,float3(62.654, 88.467,25.111))
	);
}

4D->1D

float Random4DTo1D(float4 value,float a ,float4 b)
{			
	float4 smallValue = sin(value);
	float  random = dot(smallValue,b);
	random = frac(sin(random) * a);
	return random;
}

4D->2D

float2 Random4DTo2D(float4 value)
{			
    return float2(		
        Random4DTo1D(value,14375.5964,float4(15.637,76.243,37.168,83.511)),
        Random4DTo1D(value,14684.6034,float4(45.366, 23.168,65.918,57.514))
	);
}

4D->3D

float3 Random4DTo3D(float4 value)
{			
    return float3(		
        Random4DTo1D(value,14375.5964,float4(15.637,76.243,37.168,83.511)),
        Random4DTo1D(value,14684.6034,float4(45.366, 23.168,65.918,57.514)),
        Random4DTo1D(value,14985.1739,float4(62.654, 88.467,25.111,61.875))
	);
}

4D->4D

float4 Random4DTo4D(float4 value)
{			
    return float4(		
        Random4DTo1D(value,14375.5964,float4(15.637,76.243,37.168,83.511)),
        Random4DTo1D(value,14684.6034,float4(45.366, 23.168,65.918,57.514)),
        Random4DTo1D(value,14985.1739,float4(62.654, 88.467,25.111,61.875)),
        Random4DTo1D(value,17635.1739,float4(44.383, 38.174,67.688,22.351))	
	);
}

1维/2维/3维/4维 低维到高维随机

方法和上面一样不再赘述。

整个文件 ：

源文件链接

（因为是在URP里写的，所以风格保持了统一；另外在URP中我们可以用real来替换float，提高在移动端的性能)

#ifndef UNIVERSAL_RANDOM_INCLUDED
#define UNIVERSAL_RANDOM_INCLUDED

//1D
float Random1DTo1D(float value,float a,float b){
	//make value more random by making it bigger
	float random = frac(sin(value+b)*a);
        return random;
}

float2 Random1DTo2D(float value){
    return float2(
        Random1DTo1D(value,14375.5964,0.546),
        Random1DTo1D(value,18694.2233,0.153)
    );
}

float3 Random1DTo3D(float value){
    return float3(
        Random1DTo1D(value,14375.5964,0.546),
        Random1DTo1D(value,18694.2233,0.153),
        Random1DTo1D(value,19663.6565,0.327)
    );
}

float4 Random1DTo4D(float value){
    return float4(
        Random1DTo1D(value,14375.5964,0.546),
        Random1DTo1D(value,18694.2233,0.153),
        Random1DTo1D(value,19663.6565,0.327),
        Random1DTo1D(value,12748.4774,0.688)
    );
}
//2D
float Random2DTo1D(float2 value,float a ,float2 b)
{			
	//avaoid artifacts
	float2 smallValue = sin(value);
	//get scalar value from 2d vector	
	float  random = dot(smallValue,b);
	random = frac(sin(random) * a);
	return random;
}

float2 Random2DTo2D(float2 value){
	return float2(
		Random2DTo1D(value,14375.5964, float2(15.637, 76.243)),
		Random2DTo1D(value,14684.6034,float2(45.366, 23.168))
	);
}

float3 Random2DTo3D(float2 value){
    return float3(
        Random2DTo1D(value,14375.5964,float2(15.637, 76.243)),
        Random2DTo1D(value,18694.2233,float2(45.366, 23.168)),
        Random2DTo1D(value,19663.6565,float2(62.654, 88.467))
    );
}

float4 Random2DTo4D(float2 value){
    return float4(
        Random2DTo1D(value,14375.5964,float2(15.637, 76.243)),
        Random2DTo1D(value,18694.2233,float2(45.366, 23.168)),
        Random2DTo1D(value,19663.6565,float2(62.654, 88.467)),
        Random2DTo1D(value,17635.1739,float2(44.383, 38.174))
    );
}
//3D
float Random3DTo1D(float3 value,float a,float3 b)
{			
	float3 smallValue = sin(value);
	float  random = dot(smallValue,b);
	random = frac(sin(random) * a);
	return random;
}

float2 Random3DTo2D(float3 value){
	return float2(
		Random3DTo1D(value,14375.5964, float3(15.637,76.243,37.168)),
		Random3DTo1D(value,14684.6034,float3(45.366, 23.168,65.918))
	);
}

float3 Random3DTo3D(float3 value){
	return float3(
		Random3DTo1D(value,14375.5964, float3(15.637,76.243,37.168)),
		Random3DTo1D(value,14684.6034,float3(45.366, 23.168,65.918)),
		Random3DTo1D(value,17635.1739,float3(62.654, 88.467,25.111))
	);
}

float4 Random3DTo4D(float3 value){
	return float4(
		Random3DTo1D(value,14375.5964, float3(15.637,76.243,37.168)),
		Random3DTo1D(value,14684.6034,float3(45.366, 23.168,65.918)),
		Random3DTo1D(value,17635.1739,float3(62.654, 88.467,25.111)),
        Random3DTo1D(value,17635.1739,float3(44.383, 38.174,67.688))	
	);
}
//4D
float Random4DTo1D(float4 value,float a ,float4 b)
{			
	float4 smallValue = sin(value);
	float  random = dot(smallValue,b);
	random = frac(sin(random) * a);
	return random;
}

float2 Random4DTo2D(float4 value)
{			
    return float2(		
        Random4DTo1D(value,14375.5964,float4(15.637,76.243,37.168,83.511)),
        Random4DTo1D(value,14684.6034,float4(45.366, 23.168,65.918,57.514))
	);
}

float3 Random4DTo3D(float4 value)
{			
    return float3(		
        Random4DTo1D(value,14375.5964,float4(15.637,76.243,37.168,83.511)),
        Random4DTo1D(value,14684.6034,float4(45.366, 23.168,65.918,57.514)),
        Random4DTo1D(value,14985.1739,float4(62.654, 88.467,25.111,61.875))
	);
}

float4 Random4DTo4D(float4 value)
{			
    return float4(		
        Random4DTo1D(value,14375.5964,float4(15.637,76.243,37.168,83.511)),
        Random4DTo1D(value,14684.6034,float4(45.366, 23.168,65.918,57.514)),
        Random4DTo1D(value,14985.1739,float4(62.654, 88.467,25.111,61.875)),
        Random4DTo1D(value,17635.1739,float4(44.383, 38.174,67.688,22.351))	
	);
}

#endif

随机算法其实利用了hash的思想，所以国外又有把Random function称为Hash function的。

Shadertoy​www.shadertoy.com/results?query=hash

生成简单噪声图

很简单的shader：源文件链接

Shader "Noise"
{

    SubShader
    {

        Pass
        {
            HLSLPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/Core.hlsl"   
            #include "Random.hlsl"

            struct appdata
            {
                float4 vertex : POSITION;
            };

            struct v2f
            {
                float4 vertex : SV_POSITION;
            };


            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = TransformObjectToHClip(v.vertex.xyz);
                return o;
            }

            float4 frag (v2f i) : SV_Target
            {
                float3 value = i.vertex.xyz;
                float4 col = Random3DTo4D(value);
                return col;
            }
            ENDHLSL
        }
    }
}

利用噪声图制作卡牌背景

————————————————

原文：利用shader生成随机数及简单噪声图 - 知乎

VirtualCreator
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
利用OpenGL shader在控制台显示图像
06-27
Shader是OpenGL中的核心组件，它允许程序员在GPU（图形处理单元）上执行定制的计算，以提高渲染性能和效果。本示例将讲解如何在控制台环境下使用OpenGL、C++和ImGui库来显示图像并实时调整其位置。 首先，OpenGL是...
Shader 中的随机与噪声
weixin_34162695的博客
10-07 2805
《The Book Of Shader》笔记，有增删。 一、随机（random） 说到随机函数，JavaScript 中有 Math.random()，PHP 中有rand()，在图形绘制时，随机也无处不在。《The Book Of Shader》 通过一个简单的函数衍化，让我们了解随机： 通过fract()和sin()的结合，我们得到了一个有一定规律但被打乱的曲线，当我们把1.0变成无限大...
利用shader生成随机数
papalqi
02-17 7996
本片文章主要讲述如何利用shader生成随机数。 一维随机 y = fract(sin(x)*1.0); 上面的例子中，我们提取了sin函数其波形的分数部分.我们可以用这种效果通过把正弦函数打散成小片段来得到一些伪随机数如何实现呢？通过在sin(x)的值上乘以大些的数。 y = fract(sin(x)*10.240); y = fract(sin(x)*100.0); y = fract...
9.WebGL Shader 随机数
code for life
07-04 430
我们前面所讲的函数均为遵守秩序的函数，但我们这节课将给大家讲解随机数。在glsl中并没有提供生成随机数函数公式，如果需要实现随机数函数利用glsl现有公式模拟出随机数值。随机数在glsl中有很多应用像是噪点图就是利用随机数来实现。因此在实现噪点图之前先了解如何生成随机数函数。
在shader中使用随机数
weixin_46813963的博客
11-19 2981
//返回范围都是0~1 float Random(float n,float factor = 10000){ return frac(sin(n)*factor)*frac(cos(n)*factor); } float Random(float2 n) { float r = sin(dot(n, half2(1233.224, 1743.335))); r = frac(43758.5453 * r + 0.61432); r = frac(43758.5453 * r
Unity shader 随机数
若风
07-14 6542
inline float ValueNoise(float3 pos) { float3 Noise_skew = pos + 0.2127 + pos.x * pos.y * pos.z * 0.3713; float3 Noise_rnd = 4.789 * sin(489.123 * (Noise_skew)); return frac(Noise_rnd.x...
数字图像学笔记——7. 噪音生成（泊松噪音生成方法）
老程的技术笔记
02-03 7635
文章目录泊松噪音Knuth算法散列生成算法生成泊松噪音的图像 泊松噪音 Knuth算法 首先，回顾泊松分布的函数： P(x=k)=e−λλkk! P(x=k) = \frac{e^{- \lambda} \lambda ^ k}{k!} P(x=k)=k!e−λλk​ 其中，λ\lambdaλ是期望值，而e−λe^{-\lambda}e−λ则是单调递减的指数函数，而我们所需要关心的函数区间是∈[0,∞]\in[0, \infty]∈[0,∞], 而观察函数图像，等效于一半指数函数axa^xax，其中0&lt
Unity3D Shader实现贴图切换效果
08-26
Unity3D Shader 实现贴图切换效果 Unity3D Shader 实现贴图切换效果是 Unity3D 游戏开发中的一种常见技术，主要用于实现游戏中的贴图切换效果。这种技术可以在游戏中实现多种不同的贴图切换效果，如上下左右等方向...
Shader_程序化3D噪声贴图制作溶解效果
06-12
这个素材是基于官网“《Trifox》中的遮挡处理和溶解着色器技术”制作的...后半部分好像涉及到了屏幕特效啥啥的，由于我也才基础Shader不久，就暂时还没去做，可以先到贴吧看效果：http://tieba.baidu.com/p/5159110125
unity使用shader图像简易效果
02-03
对于实时应用，应尽量保持Shader简单高效。 - 使用GPU支持的特性，如硬件着色和纹理采样，以提高渲染效率。 - 考虑兼容性，不同的设备可能对Shader支持程度不同，确保Shader能在目标平台正常工作。 以上就是关于...
卡通shader工具，可生成shader
05-19
Toony Colors Pro 2 2.3.382 卡通shader工具，可生成shader
PPTShader 33种shader生成的PPT特效
04-29
标题中的"PPTShader 33种shader生成的PPT特效"指的是一个专门针对PowerPoint（PPT）设计的工具或库，它利用了Unity引擎的shader技术，为PPT演示文稿提供了33种不同的视觉特效。在PPT制作中，通常我们依赖于内置的...
Unity Shader学习（一）
weixin_51060975的博客
10-17 909
shader
【视觉基础篇】16 # 如何使用噪声生成复杂的纹理？
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
11-04 805
【跟月影学可视化】学习笔记。物理学上，噪声指一切不规则的信号（不一定要是声音），比如电磁噪声，热噪声，无线电传输时的噪声，激光器噪声，光纤通信噪声，照相机拍摄图片时画面的噪声等。我们知道随机数是离散的，如果对离散的随机点进行插值，可以让每个点之间的值连续过渡，然后使用 smoothstep 或者平滑的三次样条来插值，就可以形成一条连续平滑的随机曲线。对离散的随机值进行插值又被称为插值噪声（）。缺点：它的值的梯度不均匀。最直观的表现就是，二维噪声图像有明显的“块状”特点，不够平滑。 在 2D 中，除了在一条线
shader常用运算函数
我的Unity3D
03-02 4220
基本数学运算 max（a，b）返回较大的 min（a，b）返回较小的 mul（a，b）两向量相乘 abs（a）返回a的绝对值 round（x）返回与x最近的整数 sqrt（x）返回x的平方根 rsqrt（x）返回x的平方根倒数 degrees（x）将弧度转化为角度 redians（x）将角度转化为弧度 noise（x）噪声函数 网站：https://graphtoy.com/可将数学公式输入可视化 幂指对函数与偏导数 pow（x，y）x的y次幂 exp（x）返回以e为底的...
UE5入门学习笔记（二）——UE5.2蓝图Custom节点使用HLSL以及自定义ush、usf文件
qq_45523399的博客
08-22 2345
UE5.2蓝图Custom Node使用HLSL以及自定义ush、usf文件。
C++生成随机数
...
01-15 392
#include <iostream> #include <stdlib.h> #include <time.h> using namespace std; int main() { srand((unsigned)time(NULL)); for(int i = 0; i < 10;i++ ) ...
threejs,webgl着色器常用随机函数、旋转函数和噪音函数
最新发布
m0_73495473的博客
01-22 424
【代码】threejs,webgl着色器常用随机函数、旋转函数和噪音函数。
Shader Graph简介
vivo01的专栏
02-20 1715
观察目前为止我们所创建的Shader的Master Stack，里面还有Metallic和Smoothness这两个值我们没有动过，我们可以尝试添加Input节点来让使用者能够调节这两个值，这个练习留给大家自己实现。重要提示：记得点击Save Asset及时保存你的进展。
利用Shader实现边框效果
06-10
利用Shader实现边框效果的方法如下： 1. 创建一个新的Shader 在Unity中，可以通过在Project面板中右键点击创建一个新的Shader来创建一个新的Shader文件。 2. 编写Shader代码 在创建好的Shader文件中，可以使用Shader语言编写代码来实现边框效果。以下是一个简单的示例代码： ``` Shader "Custom/TextOutline" { Properties { _MainTex ("Texture", 2D) = "white" {} _OutlineColor ("Outline Color", Color) = (0,0,0,1) _OutlineWidth ("Outline Width", Range(0, 0.1)) = 0.005 } SubShader { Tags {"Queue"="Transparent" "RenderType"="Transparent"} Pass { CGPROGRAM #pragma vertex vert #pragma fragment frag #include "UnityCG.cginc" struct appdata { float4 vertex : POSITION; float2 uv : TEXCOORD0; }; struct v2f { float2 uv : TEXCOORD0; float4 vertex : SV_POSITION; }; sampler2D _MainTex; float4 _OutlineColor; float _OutlineWidth; v2f vert (appdata v) { v2f o; o.vertex = UnityObjectToClipPos(v.vertex); o.uv = v.uv; return o; } fixed4 frag (v2f i) : SV_Target { float4 col = tex2D(_MainTex, i.uv); float4 outline = tex2D(_MainTex, i.uv + float2(-_OutlineWidth, 0)) + tex2D(_MainTex, i.uv + float2(_OutlineWidth, 0)) + tex2D(_MainTex, i.uv + float2(0, -_OutlineWidth)) + tex2D(_MainTex, i.uv + float2(0, _OutlineWidth)); outline.a = 1.0; return lerp(outline, col, col.a); } ENDCG } } FallBack "Diffuse" } ``` 3. 将Shader应用到Text组件上 在创建好的Shader文件中，可以通过将Shader应用到Text组件的Material上来实现边框效果。具体的方法是在Project面板中选择Text组件的Material，然后将Shader设置为刚刚创建的Shader即可。 需要注意的是，以上示例代码实现的边框效果比较简单，可以根据实际需求来调整代码中的参数和算法。同时，Shader的编写也需要一定的基础知识和经验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值