当前位置：首页 > news >正文

ThreeJS-3D教学十五：ShaderMaterial（noise、random）

news 2026/2/11 2:44:18

ThreeJS-3D教学十四：ShaderMaterial（length、fract、step）
上面这篇主要是操作 fragmentShader 片元着色器，实现对物体颜色的修改，这次咱们来看下修改 vertexShader 顶点着色器，这个其实就是位移各个顶点的位置。

接下来我们先介绍下 noise 噪声函数（Perlin Noise、Simplex Noise 等）能使相邻的点（一维、二维、三维的点都行）产生相近的数值，而不是 random 随机函数那种每个位置的数值都和附近无关的效果。

noise 函数不是内置函数但有现成的实现可以使用，搜索 glsl noise function，就能找到很多实现。这里我们先演示在三维顶点坐标上使用 noise 的效果，因此先复制粘帖接收 vec3 格式参数的 cnoise() 到 main 函数之前然后进行使用。

vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);}
vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;}
vec3 fade(vec3 t) {return t*t*t*(t*(t*6.0-15.0)+10.0);}float cnoise(vec3 P){vec3 Pi0 = floor(P); // Integer part for indexingvec3 Pi1 = Pi0 + vec3(1.0); // Integer part + 1Pi0 = mod(Pi0, 289.0);Pi1 = mod(Pi1, 289.0);vec3 Pf0 = fract(P); // Fractional part for interpolationvec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);vec4 iy = vec4(Pi0.yy, Pi1.yy);vec4 iz0 = Pi0.zzzz;vec4 iz1 = Pi1.zzzz;vec4 ixy = permute(permute(ix) + iy);vec4 ixy0 = permute(ixy + iz0);vec4 ixy1 = permute(ixy + iz1);vec4 gx0 = ixy0 / 7.0;vec4 gy0 = fract(floor(gx0) / 7.0) - 0.5;gx0 = fract(gx0);vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);vec4 sz0 = step(gz0, vec4(0.0));gx0 -= sz0 * (step(0.0, gx0) - 0.5);gy0 -= sz0 * (step(0.0, gy0) - 0.5);vec4 gx1 = ixy1 / 7.0;vec4 gy1 = fract(floor(gx1) / 7.0) - 0.5;gx1 = fract(gx1);vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);vec4 sz1 = step(gz1, vec4(0.0));gx1 -= sz1 * (step(0.0, gx1) - 0.5);gy1 -= sz1 * (step(0.0, gy1) - 0.5);vec3 g000 = vec3(gx0.x,gy0.x,gz0.x);vec3 g100 = vec3(gx0.y,gy0.y,gz0.y);vec3 g010 = vec3(gx0.z,gy0.z,gz0.z);vec3 g110 = vec3(gx0.w,gy0.w,gz0.w);vec3 g001 = vec3(gx1.x,gy1.x,gz1.x);vec3 g101 = vec3(gx1.y,gy1.y,gz1.y);vec3 g011 = vec3(gx1.z,gy1.z,gz1.z);vec3 g111 = vec3(gx1.w,gy1.w,gz1.w);vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));g000 *= norm0.x;g010 *= norm0.y;g100 *= norm0.z;g110 *= norm0.w;vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));g001 *= norm1.x;g011 *= norm1.y;g101 *= norm1.z;g111 *= norm1.w;float n000 = dot(g000, Pf0);float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));float n111 = dot(g111, Pf1);vec3 fade_xyz = fade(Pf0);vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x); return 2.2 * n_xyz;
}

下面我们先看下案例效果：
在这里插入图片描述

11111

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body {width: 100%;height: 100%;}* {margin: 0;padding: 0;}.label {font-size: 20px;color: #000;font-weight: 700;}.circle {width: 20px;height: 20px;border-radius: 10px;position: absolute;left: 0;top: 0;background-color: red;z-index: 1000;}#container {position: relative;width: 100%;height: 100vh;}</style>
</head>
<body>
<div class="circle"></div>
<div id="container"></div>
<script id="vshaderBox" type="x-shader/x-vertex">uniform float uTime;void main() {// sin 0-1之间的数  cos 1-0之间的数vec3 newPos = position * cos(uTime);gl_Position = projectionMatrix * modelViewMatrix * vec4(newPos, 1.0);}
</script>
<scri

ThreeJS-3D教学十五：ShaderMaterial（noise、random）

相关文章：

ThreeJS-3D教学十五：ShaderMaterial（noise、random）

LeetCode 2974.最小数字游戏：排序+交换奇偶位

使用vllIm部署大语言模型

静态搜索iOS动态链接函数的调用位置

【鸿蒙学习笔记】尺寸设置・layoutWeight・对子组件进行重新布局

vue实现表单输入框数字类型校验功能

JS登录页源码 —— 可一键复制抱走

Kithara与OpenCV （一）

什么是软件定义安全SDSec

【C语言】C语言可以做什么？

WordPress 主题技巧：给文章页增加“谁来过”模块。

【vue组件库搭建07】Vitest单元测试

JSONObject和Map＜String, Object＞的转换

C# 建造者模式（Builder Pattern）

初阶数据结构速成

nx上darknet的使用-目标检测-在python中的使用

Python高级（四）_内存管理

关键路径-matlab

JavaDS —— 单链表与 LinkedList

LangChain —— Message —— how to filter messages

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

深入剖析AI大模型：大模型时代的 Prompt 工程全解析

【入坑系列】TiDB 强制索引在不同库下不生效问题

iPhone密码忘记了办？iPhoneUnlocker，iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版分享

CentOS下的分布式内存计算Spark环境部署

AGain DB和倍数增益的关系

MySQL 8.0 事务全面讲解

计算机基础知识解析：从应用到架构的全面拆解

探索Selenium：自动化测试的神奇钥匙

OD 算法题 B卷【正整数到Excel编号之间的转换】