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

Shadertoy着色器移植到Three.js经验总结

article 2025/10/1 7:39:07

Shadertoy是一个流行的在线平台，用于创建和分享WebGL片段着色器。里面有很多令人惊叹的画面，甚至3D场景。本人也移植了几个ShaderToy上的着色器。本文将详细介绍移植过程中需要注意的关键点。

1. 基本结构差异

想要移植ShaderToy的shader到three.js，需要先了解他们直接的差异。他们之间的差异主要在以下几个方面：

  1. ShaderToy没有顶点着色器
    ShaderTory上面的shader只有片元着色器，没有几何，移植到three.js上需要构造一个默认的顶点着色器，同时提供几何信息。这个也比较简单，使用两个三角形铺面整个视口即可。其实用其他的方式也可以，例如用一个大的三角形，只要有个物体几何能充满整个视口即可。

  2. ShaderToy提供了很多内置变量
    ShaderToy提供了不少内置变量,，在three.js中需要咱们自己用uniform来传入。ShaderToy内置变量处理方法如下：

全局变量含义three.js修改方案核心代码
uniform vec3 iResolution;视口大小，单位像素uniforms.iResolution = { value: new THREE.Vector2(options.width, options.hieght) }
uniform float iTime;从开始运行到现在的时间，单位秒var clock = new THREE.Clock();
this.uniforms.iTime.value = this.clock.getElapsedTime();
uniform float iTimeDelta;上一帧渲染到现在的时间，单位秒var clock = new THREE.Clock();
this.uniforms.iTimeDelta.value = this.clock.getDelta();
uniform int iFrame;第几帧this.uniforms.iFrame.value = this.uniforms.iFrame.value + 1;
uniform float iChannelTime[4];//
uniform vec3 iChannelResolution[4];每个通道的分辨率，单位像素uniforms[“iChannelResolution”] = { type: “v3v”, value: [ new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3(), ] };
uniform vec4 iMouse;是vec4类型，xy是鼠标当前位置与单击位置，zw是单击位置document.addEventListener(‘mousemove’, (e) => { material.uniforms.iMouse.value.x = e.clientX; material.uniforms.iMouse.value.y = window.innerHeight - e.clientY; }); document.addEventListener(‘mousedown’, (e) => { material.uniforms.iMouse.value.z = e.clientX; material.uniforms.iMouse.value.w = window.innerHeight - e.clientY; });
uniform samplerXX iChanneli;通道的纹理uniforms[“iChannel” + i] = { type: “t”, value: texture }
  1. ShaderToy语法的差异

ShaderToy语法核心都是 GLSL，只是在在变量命名、输入输出方式、内置函数/变量等方面存在区别。以下是关键语法差异的对比：

ShaderToythree.js
入口函数是：mainImage(out vec4 fragColor, in vec2 fragCoord)入口函数是：void main()
fragCoord当前像素的坐标用的是gl_FragCoord
用变量fragColor作为输出通过 gl_FragColor 变量输出
不需要定义变量精度需定义精度：precision highp float; precision highp int;precision highp sampler2D;precision highp samplerCube;

移植基本模版

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Shadertoy to Three.js</title><style>body {margin: 0;overflow: hidden;}canvas {display: block;}</style>
</head><body><script src="./three.min.js"></script><script>const scene = new THREE.Scene();const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);const renderer = new THREE.WebGLRenderer({ antialias: true });renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);console.log(renderer.capabilities.isWebGL2)const geometry = new THREE.BufferGeometry();geometry.setAttribute("position", new THREE.Float32BufferAttribute([-1, -1, 0,1, -1, 0,1, 1, 0,-1, 1, 0], 3))geometry.setIndex([0, 1, 2, 0, 2, 3]);const material = new THREE.RawShaderMaterial({uniforms: {iResolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) },iTime: { value: 0 },mouse: { value: new THREE.Vector4(0, 0, 0, 0) },},// glslVersion: THREE.GLSL3,vertexShader: `#version 300 esin vec3 position;void main() {gl_Position = vec4(position, 1.0);}`,fragmentShader: `#version 300 es
precision highp float;
precision highp int;
precision highp sampler2D;
precision highp samplerCube;
out vec4 fragColor;uniform vec2 iResolution;
uniform float iTime;void main(  )
{vec2 uv = gl_FragCoord.xy/iResolution.xy;// [0,1]uv -= 0.5;uv.x *= iResolution.x / iResolution.y;float d = length(uv);float r = 0.3;float c = smoothstep(r, r + 0.002, d);fragColor = vec4(vec3(c), 1.);
}
`});const plane = new THREE.Mesh(geometry, material);scene.add(plane);window.addEventListener('resize', () => {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth, window.innerHeight);material.uniforms.iResolution.value.set(window.innerWidth, window.innerHeight);});document.addEventListener('mousemove', (e) => {material.uniforms.iMouse.value.x = e.clientX;material.uniforms.iMouse.value.y = window.innerHeight - e.clientY;});document.addEventListener('mousedown', (e) => {material.uniforms.iMouse.value.z = e.clientX;material.uniforms.iMouse.value.w = window.innerHeight - e.clientY;});function animate() {requestAnimationFrame(animate);material.uniforms.iTime.value = performance.now() / 1000; // 秒为单位renderer.render(scene, camera);}animate();</script>
</body></html>

这个模版是画圆的实例，效果如下：

有以下几点需要注意：

  1. 两个三角形面片的坐标已经在[-1, 1]之间，不需要在VertexShader进行坐标变换，所有顶点着色器代码没有MVP矩阵：
#version 300 es
in vec3 position;
void main() {gl_Position = vec4(position, 1.0);
}
  1. 使用了RawShaderMaterial而不是ShaderMaterial，这样可对Shader代码进行完全掌控
  2. 语法上使用了WebGL2.0的语法，如果使用1.0的语法，需去掉版本声明、一些关键字

最后展示一个稍微复杂点的Shader效果：

结语

将Shadertoy着色器移植到Three.js需要对两者之间的差异有清晰理解。正确处理全局变量、语法、渲染管线等关方面的差异，可将绝大多数Shadertoy效果成功移植到Three.js项目中。

相关文章：

Shadertoy着色器移植到Three.js经验总结

Shadertoy是一个流行的在线平台&#xff0c;用于创建和分享WebGL片段着色器。里面有很多令人惊叹的画面&#xff0c;甚至3D场景。本人也移植了几个ShaderToy上的着色器。本文将详细介绍移植过程中需要注意的关键点。 1. 基本结构差异 想要移植ShaderToy的shader到three.js&am…...

编程日记 2025/9/18 0:39:22

电脑端音乐播放器推荐：提升你的听歌体验！

在快节奏的职场环境中&#xff0c;许多上班族都喜欢用音乐为工作时光增添色彩。今天要分享的这款音乐工具&#xff0c;或许能为你的办公时光带来意想不到的惊喜。 一、软件介绍-澎湃 澎湃音乐看似是个普通的播放器&#xff0c;实则藏着强大的资源整合能力。左侧功能栏清晰陈列着…...

编程日记 2025/9/18 21:49:29

VIC-2D 7.0 为平面样件机械试验提供全视野位移及应变数据软件

The VIC-2D系统是一个完全集成的解决方案&#xff0c;它基于优化的相关算法为平面试样的力学测试提供非接触、全场的二维位移和应变数据&#xff0c;可测量关注区域内的每个像素子集的面内位移&#xff0c;并通过多种张量选项计算全场应变。The VIC-2D 系统可测量超过 2000%变形…...

编程日记 2025/10/1 6:50:30

一周学完计算机网络之三：1、数据链路层概述

简单的概述 数据链路层是计算机网络体系结构中的第二层&#xff0c;它在物理层提供的基本服务基础上&#xff0c;负责将数据从一个节点可靠地传输到相邻节点。可以将其想象成一个负责在两个相邻的网络设备之间进行数据 “搬运” 和 “整理” 的 “快递中转站”。 几个重要概念…...

编程日记 2025/9/16 0:11:17

网卡网孔速率的协商是如何进行的？

网卡与交换机等网络设备之间的速率协商主要通过**自动协商&#xff08;Auto-Negotiation&#xff09;**机制实现&#xff0c;其核心是物理层&#xff08;PHY&#xff09;芯片之间的信息交互。以下是协商过程的详细解析&#xff1a; 一、自动协商的核心流程 1. 发送配置帧&am…...

编程日记 2025/6/7 9:46:46

单片机-STM32部分：13-1、蜂鸣器

飞书文档https://x509p6c8to.feishu.cn/wiki/V8rpwIlYIiEuXLkUljTcXWiKnSc 一、应用场景 大部分的电子产品、家电&#xff08;风扇、空调、电水壶&#xff09;都会有蜂鸣器&#xff0c;用于提示设备的工作状态 二、原理 蜂鸣器是一种将电信号转换为声音信号的器件&#xff0…...

编程日记 2025/9/16 0:11:11

动态IP技术赋能业务创新：解锁企业数字化转型新维度

在数字经济高速发展的今天&#xff0c;IP地址已不再是简单的网络标识符&#xff0c;而是演变为支撑企业数字化转型的核心基础设施之一。动态IP技术凭借其灵活、高效、安全的特性&#xff0c;正在重塑传统业务模式&#xff0c;催生出诸多创新应用场景。本文将深入剖析动态IP的技…...

编程日记 2025/9/16 2:35:03

使用Python删除PDF中多余或空白的页面

目录 为什么需要删除 PDF 中的多余或空白页面&#xff1f; 所需工具 环境准备 如何使用Python删除PDF中的多余页面 实现思路 详细实现步骤 实现代码 如何使用Python检测并删除PDF中的空白页 实现思路 详细实现步骤 实现代码 在处理 PDF 文件时&#xff0c;常常会遇到…...

编程日记 2025/9/19 8:25:50

英语复习笔记 1

前言 我们知道英语最重要就是单词和阅读理解&#xff0c;因为时间安排和自己懒惰的原因&#xff0c;英语复习实际上进行得非常缓慢。实际上英语复习得比较少&#xff0c;但是我想考一个高分&#xff0c;这样下去肯定是废掉了。所以从今天开始我要好好复习英语。之前有个大佬说…...

编程日记 2025/9/20 19:15:12

UART16550 IP core笔记二

XIN时钟 表示use external clk for baud rate选型&#xff0c;IP核会出现Xin时钟引脚 XIN输入被外部驱动&#xff0c;也就是外部时钟源&#xff0c;那么外部时钟必须要满足特定的要求&#xff0c;就是XIN 的range范围是xin<S_AXI_CLK/2,如果不满足这个条件&#xff0c;那么A…...

编程日记 2025/9/18 23:23:09

TDengine 在金融领域的应用

简介 金融行业正处于数据处理能力革新的关键时期。随着市场数据量的爆炸式增长和复杂性的日益加深&#xff0c;金融机构面临着寻找能够高效处理大规模、高频次以及多样化时序数据的大数据处理系统的迫切需求。这一选择将成为金融机构提高数据处理效率、优化交易响应时间、提高…...

编程日记 2025/9/19 15:28:10

OSCP - Hack The Box - Sau

主要知识点 CVE-2023-27163漏洞利用systemd提权 具体步骤 执行nmap扫描&#xff0c;可以先看一下55555端口 Nmap scan report for 10.10.11.224 Host is up (0.58s latency). Not shown: 65531 closed tcp ports (reset) PORT STATE SERVICE VERSION 22/tcp o…...

编程日记 2025/9/16 7:59:33

大模型的Lora如何训练？

大模型LoRA（Low-Rank Adaptation）训练是一种参数高效的微调方法，通过冻结预训练模型权重并引入低秩矩阵实现轻量化调整。以下是涵盖原理、数据准备、工具、参数设置及优化的全流程指南： 一、LoRA的核心原理 低秩矩阵分解 在原始权重矩阵$ W 旁添加两个低秩矩阵 旁添加两个…...

编程日记 2025/6/30 7:05:16

分词器工作流程和Ik分词器详解

切分词语&#xff0c;normalization 给你一段句子&#xff0c;然后将这段句子拆分成一个一个的单个的单词&#xff0c;同时对每个单词进行 normalization&#xff08;时态转换&#xff0c;单复数转换&#xff09;&#xff0c;分词器 recall&#xff0c;召回率&#xff1a;搜索的…...

编程日记 2025/7/14 2:54:14

QT6 源（93）篇三：阅读与注释共用体类 QVariant 及其源代码，本类支持比较运算符 ==、!=。

&#xff08;9&#xff09; 本类支持比较运算符 、! &#xff1a; 可见&#xff0c; QString 类型里可存储多个 unicode 字符&#xff0c;即使只存储一个 unicode 字符也不等于 QChar。 &#xff08;10&#xff09;本源代码来自于头文件 qvariant . h &#xff1a; #ifndef Q…...

编程日记 2025/9/18 22:10:21

Maven私服搭建与登录全攻略

目录 1.背景2.简介3.安装4.启动总结参考文献 1.背景 回顾下maven的构建流程&#xff0c;如果没有私服&#xff0c;我们所需的所有jar包都需要通过maven的中央仓库或者第三方的maven仓库下载到本地&#xff0c;当一个公司或者一个团队所有人都重复的从maven仓库下载jar包&#…...

编程日记 2025/9/17 20:46:44

力扣210（拓扑排序）

210. 课程表 II - 力扣&#xff08;LeetCode&#xff09; 这是一道拓扑排序的模板题。简单来说&#xff0c;给出一个有向图&#xff0c;把这个有向图转成线性的排序就叫拓扑排序。如果有向图中有环就没有办法进行拓扑排序了。因此&#xff0c;拓扑排序也是图论中判断有向无环图…...

编程日记 2025/9/22 3:21:31

1.1 文章简介

前因后果链 行业需求 → 技能断层 → 课程设计响应 (高薪岗位要求数学基础) → (符号/公式理解困难) → (聚焦原理与应用) 行业驱动因素 • 前因&#xff1a;机器学习/AI等领域的高薪岗位激增&#xff0c;但数学能力成为主要门槛 • 关键矛盾&#xff1a;算法论文中的数学…...

编程日记 2025/9/20 10:05:01

将本地文件上传到云服务器上

使用 SCP 命令&#xff08;最常用&#xff09; # 基本语法 scp [本地文件路径] [用户名][服务器IP]:[目标路径]# 示例&#xff1a;上传单个文件 scp /path/to/local/file.txt root192.168.1.100:/path/to/remote/# 上传整个目录 scp -r /path/to/local/directory root192.168.…...

编程日记 2025/7/10 9:24:09

C++ asio网络编程(5)简单异步echo服务器

上一篇文章:C asio网络编程(4)异步读写操作及注意事项 文章目录 前言一、Session类1.代码2.代码详解3.实现Session类1.构造函数2.handle_read3.介绍一下boost的封装函数和api4.handle_write 二、Server类1.代码2.代码思路详解 三、客户端四、运行截图与流程图 前言 提示&…...

编程日记 2025/9/16 0:11:23

【机器人】复现 UniGoal 具身导航 | 通用零样本目标导航 CVPR 2025

UniGoal的提出了一个通用的零样本目标导航框架&#xff0c;能够统一处理多种类型的导航任务。 支持 对象类别导航、实例图像目标导航和文本目标导航&#xff0c;而无需针对特定任务进行训练或微调。 本文分享UniGoal复现和模型推理的过程&#xff5e; 查找沙发&#xff0c;模…...

编程日记 2025/9/16 0:11:19

基于大模型预测的吉兰 - 巴雷综合征综合诊疗方案研究报告大纲

目录 一、引言（一）研究背景（二）研究目的与意义二、大模型预测吉兰 - 巴雷综合征的理论基础与技术架构（一）大模型原理概述（二）技术架构设计三、术前预测与手术方案制定（一）术前预测内容（二）手术方案制定依据与策略四、术中监测与麻醉方案调整（一）术中监测指标与数…...

编程日记 2025/6/5 20:56:49

spring中的@PropertySource注解详解

一、核心功能与作用 PropertySource是Spring框架中用于加载外部配置文件的核心注解&#xff0c;主要作用是将属性文件&#xff08;如.properties、.yml&#xff09;的键值对加载到Spring的Environment环境中&#xff0c;实现配置与代码的解耦。其核心价值包括&#xff1a; 外部…...

编程日记 2025/9/16 0:11:25

ChromeDriver 技术生态与应用场景深度解析

ChromeDriver 技术生态与应用场景深度解析 随着 Web 自动化测试、运维和数据采集需求的不断增长&#xff0c;ChromeDriver 及其相关技术栈在各行业中扮演着举足轻重的角色。本文将从技术选型、语言适配、典型场景、技术延伸等维度&#xff0c;结合最新行业趋势与实践经验&…...

编程日记 2025/7/16 20:23:57

【NextPilot日志移植】日志写入流程

&#x1f4dd; 文件后端日志写入流程详解 当后端选择文件时&#xff0c;日志写入过程主要涉及 LogWriter 和 LogWriterFile 类的协作。以下是详细的日志写入过程解释及涉及的代码&#xff1a; 1. LogWriter 类初始化 在 LogWriter 类的构造函数中&#xff0c;如果配置的后端…...

编程日记 2025/7/20 0:38:56

二极管钳位电路——Multisim电路仿真

目录 二极管钳位电路 2.1 二极管正向钳位电路 二极管压降测试 2.1.1 二极管正向钳位电路图 2.1.2 二极管正向钳位工作原理 2.2 二极管负向钳位电路 2.2.1 二极管负向钳位电路图 2.2.2 二极管负向钳位工作原理 二极管正向反向钳位仿真电路实验结果 2.3 二极管顶部钳位…...

编程日记 2025/9/16 0:11:21

Docker编排工具---Compose的概述及使用

目录 一、Compose工具的概述 二、Compose的常用命令 1、列出容器 2、查看访问日志 3、输出绑定的公共端口 4、重新构建服务 5、启动服务 6、停止服务 7、删除已停止服务的容器 8、创建和启动容器 9、在运行的容器中执行命令 10、指定一个服务启动容器的个数 11、其…...

编程日记 2025/9/23 23:03:46

5.10-套接字通信 - C++

套接字通信 1.1 通信效率问题 服务器端 单线程 / 单进程 无法使用&#xff0c;不支持多客户端 多线程 / 多进程 写程序优先考虑多线程&#xff1a;什么时候考虑多进程&#xff1f; 启动了一个可执行程序 A &#xff0c;要在 A 中启动一个可执行程序 B 支持多客户端连接 IO 多…...

编程日记 2025/9/18 23:35:57

suricata增加单元测试编译失败

一、环境 $ lsb_release -a No LSB modules are available. Distributor ID: Ubuntu Description: Ubuntu 22.04.5 LTS Release: 22.04 Codename: jammysuricata: suricata7.0.5 IDE: vscode 二、背景 在suricata中开发了某个功能后&#xff0c;增加unittest时&#xff0c;…...

编程日记 2025/9/22 0:41:42

高并发场景下的BI架构设计：衡石分布式查询引擎与缓存分级策略

在电商大促、金融交易时段或IoT实时监控场景中&#xff0c;企业BI系统常面临瞬时万级并发查询的冲击——运营团队需要实时追踪GMV波动&#xff0c;风控部门需秒级响应欺诈检测&#xff0c;产线监控需毫秒级反馈设备状态。传统单体架构的BI系统在此类场景下极易崩溃&#xff0c;…...

编程日记 2025/9/17 13:27:42